Untitled

<!DOCTYPE html>
<html lang="pt">
	<head>
		<meta charset="utf-8">
		<title>Snake</title>
		<script >
			document.addEventListener("DOMContentLoaded", ()=>{

				const canvas = document.getElementById("Game");
				const canvas2d = canvas.getContext("2d");

				const box = 32;

				/*carregar as imagens*/
				const groundImg = new Image();
				groundImg.src = "snake/img/ground.png";
				const foodImg = new Image();
				foodImg.src = "snake/img/food.png";

				/*carregar o audio*/
				const deadAud = new Audio("snake/audio/dead.mp3")
				const eatAud = new Audio("snake/audio/down.mp3")
				const downAud = new Audio("snake/audio/eat.mp3")
				const leftAud = new Audio("snake/audio/left.mp3")
				const rightAud = new Audio("snake/audio/right.mp3")
				const upAud = new Audio("snake/audio/up.mp3")

				let food = {
					x:Math.floor(Math.random() * 17 + 1) * box,
					y:Math.floor(Math.random() * 15 + 3) * box
				};

				const snake = [];

				snake[0] = {
					x: 10 * box,
					y:9 * box
				};

				let score = 0;
				let direction;

				const setDirection = (event) => {

					if(event.keyCode === 37 && direction !== "right"){
						direction = "left";
					}
					else if (event.keyCode === 38 && direction !== "down"){
						direction = "up";
					}
					else if (event.keyCode === 39 && direction !== "left"){
						direction = "right";
					}
					else if (event.keyCode === 40 && direction !== "up"){
						direction = "down";
					}
				}
				document.addEventListener("keydown", setDirection);

				const collisionChecker = (snake) => {
					for(let i = 1; i < snake.length; i++){
						if(snake[0].x === snake[i].x && snake[0].y === snake[i].y){
							return true;
						}
					}

					return false;
				}

				const game = setInterval(()=>{
					canvas2d.drawImage(groundImg,0 ,0);
					canvas2d.drawImage(foodImg,food.x,food.y);

					for(let i = 0; i < snake.length; i++){
						canvas2d.fillStyle = (i === 0 ) ? "#0F0" : "green";

						canvas2d.fillRect(snake[i].x, snake[i].y,box,box);

						canvas2d.strokeStyle = "#F00";
						canvas2d.strokeRect(snake[i].x, snake[i].y,box,box);
					}

					/*guardar a cabeça atual*/
					let snakeX = snake[0].x;
					let snakeY = snake[0].y;

					/*verificar se conseguiu comer*/
					if(snakeX === food.x && snakeY === food.y){
						score++;

						eatAud.play();

						food = {
							x:Math.floor(Math.random() * 17 + 1) * box,
							y:Math.floor(Math.random() * 15 + 3) * box
						};
					}
					else {
						snake.pop();
					}

					if (direction === "left"){
						snakeX -= box;							/* snake[0].x = snake[0].x - box; <=> snake[0].x -= box;*/
					}
					else if(direction === "up"){
						snakeY -= box;
					}
					else if(direction === "down"){
						snakeY += box;
					}
					else if(direction === "right"){
						snakeX += box;
					}

					/*verificar se houve Game Over*/
					if(snakeX < box ||
					  snakeX > 17 * box ||
					  snakeY < 3 * box ||
					  snakeY > 17 * box ||
					  collisionChecker(snake)
					   ) {
						clearInterval(game);
						deadAud.play();

						setTimeout (()=>{alert("take the L noob!");},10)
						window.location.reload();
					}

					const newHead = {
						x: snakeX,
						y:snakeY
					};

					snake.unshift(newHead);

					canvas2d.fillStyle = "#FFF";
					canvas2d.font = "45px Calibri";
					canvas2d.fillText(score, 2 * box,1.6 * box);


				},100);
			});
		</script>
    </head>
    <body>
    	<div>
    		<canvas id="Game" width="608" height="608"></canvas>
    	</div>
    </body>
 </html>