const tick = 250; var mobile = false; function shortenArr(arr, len) { while(arr.length > len) { arr.pop(); } return arr; } function numToLen(num, len) { num = num.toString(); for(let i = num.length;i < len; i++) { num = "0" + num; } return num; } function combineNumsInHalves(num1, num2) { num1 = num1.toString(); num2 = num2.toString(); if (num1.length > num2.length) { return num1 + numToLen(num2, num1.length); } else { return numToLen(num1, num2.length) + num2; } } function drawPixel(x, y, color = "#FFFFFF") { let pixel = document.getElementById(combineNumsInHalves(x, y)); pixel.style.backgroundColor = color; } class Vector2 { constructor(x, y) { this.x = x; this.y = y; } draw(display, color) { document.getElementById(combineNumsInHalves(this.x, this.y)).style.backgroundColor = color; } equals(other) { if ((this.x === other.x) && (this.y === other.y)) { return true; } else { return false; } } } class Food { constructor(x, y, color = "#FFFF99", nutrition = 1) { this.coord = new Vector2(x, y); this.col = color; this.coord = undefined; this.nutrition = nutrition; } changePos(planeW, planeH, snakes, nutrition) { while(true) { let free = true; let randVec = new Vector2(Math.round(Math.random() * (planeW - 1)), Math.round(Math.random() * (planeH - 1))); for(let s = 0; s < snakes.length; s++) { for(let vec = 0; vec < snakes[s].coords.length; vec++) { if (randVec.equals(snakes[s].coords[vec])) { free = false; } } } if (free) { this.coord = randVec; this.nutrition = nutrition; break; } } } update(display, snakes, planeW, planeH, nutrition) { nutrition = nutrition || this.nutrition; for(let s = 0; s < snakes.length; s++) { if (this.coord.equals(snakes[s].coords[0])) { snakes[s].len += nutrition; this.changePos(planeW, planeH, snakes, nutrition); } } this.coord.draw(display, this.col); } } class Snake { constructor(x, y, color = "#FFFFFF", len = 4, key = "w", damage = 1) { this.coords = [new Vector2(x, y)]; this.len = len; for(let i = 1; i < this.len; i++) { this.coords.push(new Vector2(x - i, y)); } this.col = color this.originalCol = this.col; this.dir = key; this.newDir = undefined; this.damage = damage; } move() { switch(this.dir) { case "w": if (!(this.coords[1].equals(new Vector2(this.coords[0].x, this.coords[0].y - 1)))) { this.coords.unshift(new Vector2(this.coords[0].x, this.coords[0].y - 1)); } else { this.dir = "s"; this.move(); } break; case "a": if (!(this.coords[1].equals(new Vector2(this.coords[0].x - 1, this.coords[0].y)))) { this.coords.unshift(new Vector2(this.coords[0].x - 1, this.coords[0].y)); } else { this.dir = "d"; this.move(); } break; case "s": if (!(this.coords[1].equals(new Vector2(this.coords[0].x, this.coords[0].y + 1)))) { this.coords.unshift(new Vector2(this.coords[0].x, this.coords[0].y + 1)); } else { this.dir = "w"; this.move(); } break; case "d": if (!(this.coords[1].equals(new Vector2(this.coords[0].x + 1, this.coords[0].y)))) { this.coords.unshift(new Vector2(this.coords[0].x + 1, this.coords[0].y)); } else { this.dir = "a"; this.move(); } break; } } update(display, maxX, maxY, snakes) { //moving if (this.coords.length > 1) { this.move() } else { alert(this.originalCol + " player lost!"); location.reload(true); } this.dir = this.newDir || this.dir; this.newDir = undefined; //back from damage color this.col = this.originalCol; //keeping the length if (this.coords.length > this.len) { this.coords = shortenArr(this.coords, this.len); } //"Teleporting" to the other side if (this.coords[0].x < 0) { this.coords[0] = new Vector2(maxX, this.coords[0].y); } if (this.coords[0].x > maxX) { this.coords[0] = new Vector2(0, this.coords[0].y); } if (this.coords[0].y < 0) { this.coords[0] = new Vector2(this.coords[0].x, maxY); } if (this.coords[0].y > maxY) { this.coords[0] = new Vector2(this.coords[0].x, 0); } for(let s = 0; s < snakes.length; s++) { let i = 0; if (snakes[s] == this) { i = 1; } for(; i < snakes[s].coords.length; i++) { if(this.coords[0].equals(snakes[s].coords[i])) { this.col = "red"; //this.len = 4; if (this.len > this.damage) { this.len -= this.damage; this.coords = shortenArr(this.coords, this.len); } this.newDir = this.dir; this.dir = "x"; } } } for(let p = 0; p < this.coords.length; p++) { this.coords[p].draw(display, this.col); } } set key(k) { if ( ( !((k === "w") && (this.dir === "s")) ) && ( !((k === "s") && (this.dir === "w")) ) && ( !((k === "a") && (this.dir === "d")) ) && ( !((k === "d") && (this.dir === "a")) ) ) { if (this.newDir === undefined) { this.dir = k; } else { this.newDir = k; } } } } function submit() { window.cells = parseInt(document.getElementById("width").value) || 10; window.food = []; if ((mobile === false) && (document.getElementById("two-player").checked)) { window.players = [(new Snake(Math.floor((cells / 4) * 1), Math.floor((cells / 4) * 1), "coral")), (new Snake(Math.floor((cells / 4) * 3), Math.floor((cells / 4) * 3), "olive"))]; } else { window.players = [new Snake(Math.floor(cells / 2), Math.floor(cells / 2), "coral")] } for(let fd = 0;fd < parseInt((document.getElementById("food").value || 2));fd++) { food.push(new Food(0, 0)); food[fd].changePos(cells, cells, players, (parseInt(document.getElementById("nutrition").value || 1))); } document.getElementsByTagName("body")[0].removeChild(document.getElementById("setup")); window.display = document.getElementsByClassName("display")[0]; for(let y = 0; y < cells; y++) { let tr = document.createElement("tr"); for(let x = 0; x < cells; x++) { let td = document.createElement("td"); td.id = combineNumsInHalves(x, y); td.style.width = (display.style.width / cells) - (((display.style.width) / cells) / 10); td.style.height = (display.style.height / cells) - (((display.style.height) / cells) / 10); td.style.borderSpacing = (display.style.width / cells) / 10; tr.appendChild(td); } document.getElementsByClassName("display")[0].appendChild(tr); } window.addEventListener("resize", () => { for(let y = 0; y < cells; y++) { for(let x = 0; x < cells; x++) { let td = document.getElementById(combineNumsInHalves(x, y)); td.style.width = (display.style.width / cells) - (((display.style.width) / cells) / 10); td.style.height = (display.style.height / cells) - (((display.style.height) / cells) / 10); td.style.borderSpacing = (display.style.width / cells) / 10; } } }); //movement controls window.addEventListener("keydown", event => { switch(event.key) { case "w": players[0].key = "w" break; case "a": players[0].key = "a"; break; case "s": players[0].key = "s" break; case "d": players[0].key = "d"; break; case "i": players[1].key = "w" break; case "j": players[1].key = "a"; break; case "k": players[1].key = "s" break; case "l": players[1].key = "d"; break; } }); if (mobile) { document.getElementById("w").addEventListener("touchstart", () => { players[0].key = "w"; }); document.getElementById("a").addEventListener("touchstart", () => { players[0].key = "a"; }); document.getElementById("s").addEventListener("touchstart", () => { players[0].key = "s"; }); document.getElementById("d").addEventListener("touchstart", () => { players[0].key = "d"; }); } else if (players.length === 1) { document.getElementById("w").addEventListener("click", () => { players[0].key = "w"; }); document.getElementById("a").addEventListener("click", () => { players[0].key = "a"; }); document.getElementById("s").addEventListener("click", () => { players[0].key = "s"; }); document.getElementById("d").addEventListener("click", () => { players[0].key = "d"; }); } game(); } function game() { setTimeout(() => { requestAnimationFrame(game); }, tick); for(let x = 0; x < cells; x++) { for(let y = 0; y < cells; y++) { drawPixel(x, y, "#000000"); } } for(let p = 0; p < players.length; p++) { players[p].update(display, cells - 1, cells - 1, players); } for(let f = 0; f < food.length;f++) { food[f].update(display, players, cells, cells); } } window.onload = () => { document.getElementsByClassName("submit")[0].addEventListener("click", submit); window.addEventListener("touchstart", () => { if (mobile === false) { mobile = true; let checkbox = document.getElementById("two-player"); if (checkbox) { checkbox.disabled = true; document.getElementById("two-playerP").style.color = "lightgray"; alert("The mobile controls are pretty horrible. I recommend to try this game with a keyboard instead by using the buttons on the screen. With a keyboard you may also play in the two-player mode."); } } }); }

snake(s)