//ON LOAD window.onload = () => { //MAKE THE GRID cont = document.getElementById("container"); for (let x = 0; x < 10; x++) { for (let y = 0; y < 10; y++) { cont.innerHTML += "

"; } } //SET SOME VARIABLES dontSet = false; bite = false; } //MAIN OBJECT let Snake = { //TELL IF IT IS RUNNING OR NOT isRunning: false, //TELL WHICH DIRECTION IT IS GOING directions: { up: false, down: false, left: false, right: false }, //TELL THE LENGTH OF THE SNAKE length: 0, //TELL WHICH BLOCKS IS IT OCCUPYING occupied: [{ x: undefined, y: undefined, direction: undefined }], //TELL WHICH BLOCK IS "REWARDED" rewarded: { x: undefined, y: undefined }, //MOVE FUNCTION move: () => { //SET THE WHOLE GRID'S BACKGROUND TO WHITE for (let i = 0; i < b.length; i++) { b[i].style.background = "#FFFFFF"; } //MOVE THE POSITIONS OF THE SNAKE if (Snake.directions.up) { Snake.occupied[0].y--; } else if (Snake.directions.down) { Snake.occupied[0].y++; } else if (Snake.directions.left) { Snake.occupied[0].x--; } else if (Snake.directions.right) { Snake.occupied[0].x++; } //TAKE THE REWARD if (Snake.occupied[0].x == Snake.rewarded.x && Snake.occupied[0].y == Snake.rewarded.y) { Snake.reward(); Snake.lengthen(); } //CHANGE THE TAIL'S DIRECTION for (let i = Snake.length - 1; i > 1; i--) { Snake.occupied[i].direction = Snake.occupied[i - 1].direction; } //MOVE THE SNAKE'S TAIL for (let i = Snake.length - 1; i > 0; i--) { Snake.occupied[i].x = Snake.occupied[i - 1].x; Snake.occupied[i].y = Snake.occupied[i - 1].y; } //CHECK IF YOU HAVE BITTEN YOURSELF for (let i = 2; i < Snake.length; i++) { if (Snake.occupied[0].x == Snake.occupied[i].x && Snake.occupied[0].y == Snake.occupied[i].y) bite = true; } //IF YOU RUN INTO A WALL OR BITE YOURSELF, THE GAME ENDS if (Snake.occupied[0].x < 0 || Snake.occupied[0].x > 9 || Snake.occupied[0].y < 0 || Snake.occupied[0].y > 9 || bite == true) { alert("Game Over!"); clearInterval(play); playAgain = confirm("Play Again?"); if (playAgain) { bite = false; Snake.length = 0; Snake.occupied = [{ x: undefined, y: undefined, direction: undefined }]; Snake.rewarded.x = undefined; Snake.rewarded.y = undefined; Snake.isRunning = false; b = document.getElementsByClassName("box"); dontSet = false; } return; } //SET THE SNAKE'S AND THE REWARD'S COLOR for (let i = 0; i < Snake.length; i++) { document.getElementById("" + Snake.occupied[i].x + Snake.occupied[i].y).style.background = "#000000"; } document.getElementById("" + Snake.rewarded.x + Snake.rewarded.y).style.background = "#FF0000"; }, reward: () => { rewardX = Math.floor(Math.random() * 10); rewardY = Math.floor(Math.random() * 10); condition = "if ((Snake.occupied[0].x == rewardX && Snake.occupied[0].y == rewardY)"; for (let i = 1; i < Snake.length; i++) { condition += " || (Snake.occupied[" + i + "].x == rewardX && Snake.occupied[" + i + "].y == rewardY)"; } condition += ") {rewardX = Math.floor(Math.random() * 10); rewardY = Math.floor(Math.random() * 10);}"; for (let i = 0; i < 10000; i++) { eval(condition); } document.getElementById("" + rewardX + rewardY).style.background = "#FF0000"; Snake.rewarded.x = rewardX; Snake.rewarded.y = rewardY; }, lengthen: () => { Snake.length++; Snake.occupied.push({ x: undefined, y: undefined, direction: undefined }); switch (Snake.occupied[Snake.length - 2].direction) { case "up": Snake.occupied[Snake.length - 1].x = Snake.occupied[Snake.length - 2].x; Snake.occupied[Snake.length - 1].y = Snake.occupied[Snake.length - 2].y + 1; break; case "down": Snake.occupied[Snake.length - 1].x = Snake.occupied[Snake.length - 2].x; Snake.occupied[Snake.length - 1].y = Snake.occupied[Snake.length - 2].y - 1; break; case "left": Snake.occupied[Snake.length - 1].x = Snake.occupied[Snake.length - 2].x + 1; Snake.occupied[Snake.length - 1].y = Snake.occupied[Snake.length - 2].y; break; case "right": Snake.occupied[Snake.length - 1].x = Snake.occupied[Snake.length - 2].x - 1; Snake.occupied[Snake.length - 1].y = Snake.occupied[Snake.length - 2].y; break; } } } //AT THE START, YOU CAN PLACE YOUR STARTING POSITION let setStartPos = (object) => { if (!dontSet) { Snake.occupied[0].x = object.id[0]; Snake.occupied[0].y = object.id[1]; b = document.getElementsByClassName("box"); Snake.length = 1; object.style.background = "#000000"; } dontSet = true; } //WHEN YOU CLICK ON A BUTTON, IT WILL CHANGE THE DIRECTION, AND AT THE START IT WILL START THE GAME let changeDirection = (direction) => { Snake.directions.up = false; Snake.directions.down = false; Snake.directions.left = false; Snake.directions.right = false; Snake.directions[direction] = true; Snake.occupied[0].direction = direction; if (!Snake.isRunning && Snake.length == 1) { play = setInterval(Snake.move, 300); Snake.isRunning = true; Snake.reward(); } }