From cd401ee5b65d28e453e93845621bdf17980ee51e Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 25 Feb 2025 13:33:17 +0100 Subject: [PATCH] why is one working and the other isn't --- secret/snake/game.js | 143 +++++++++---------------------- secret/snake/test.html | 186 +++++++++++++++++++++++------------------ 2 files changed, 147 insertions(+), 182 deletions(-) diff --git a/secret/snake/game.js b/secret/snake/game.js index 2f6ea42..f94dc2e 100644 --- a/secret/snake/game.js +++ b/secret/snake/game.js @@ -1,156 +1,95 @@ -// testing from old tutorial - "use strict"; const cvs = document.getElementById("snake"); const ctx = cvs.getContext("2d"); +const box = 20; -// create the unit -const box = 32; - -// load images - -const ground = new Image(); -ground.src = "img/ground.png"; - -const foodImg = new Image(); -foodImg.src = "img/food.png"; - -// load audio files - -let dead = new Audio(); -let eat = new Audio(); -let up = new Audio(); -let right = new Audio(); -let left = new Audio(); -let down = new Audio(); - -dead.src = "audio/dead.mp3"; -eat.src = "audio/eat.mp3"; -up.src = "audio/up.mp3"; -right.src = "audio/right.mp3"; -left.src = "audio/left.mp3"; -down.src = "audio/down.mp3"; - -// create the snake - -let snake = []; - -snake[0] = { - x: 9 * box, - y: 10 * box, -}; - -// create the food - +let snake = [{ x: 9 * box, y: 10 * box }]; let food = { - x: Math.floor(Math.random() * 17 + 1) * box, - y: Math.floor(Math.random() * 15 + 3) * box, + x: Math.floor(Math.random() * 19 + 1) * box, + y: Math.floor(Math.random() * 19 + 1) * box, }; - -// create the score var - let score = 0; - -//control the snake - let d; +let game; document.addEventListener("keydown", direction); - function direction(event) { let key = event.keyCode; - if (key == 37 && d != "RIGHT") { - left.play(); - d = "LEFT"; - } else if (key == 38 && d != "DOWN") { - d = "UP"; - up.play(); - } else if (key == 39 && d != "LEFT") { - d = "RIGHT"; - right.play(); - } else if (key == 40 && d != "UP") { - d = "DOWN"; - down.play(); - } + if ((key == 37 || key == 65) && d != "RIGHT") d = "LEFT"; + else if ((key == 38 || key == 87) && d != "DOWN") d = "UP"; + else if ((key == 39 || key == 68) && d != "LEFT") d = "RIGHT"; + else if ((key == 40 || key == 83) && d != "UP") d = "DOWN"; } -// cheack collision function function collision(head, array) { - for (let i = 0; i < array.length; i++) { - if (head.x == array[i].x && head.y == array[i].y) { - return true; - } - } - return false; + return array.some((part) => head.x == part.x && head.y == part.y); } -// draw everything to the canvas - function draw() { - ctx.drawImage(ground, 0, 0); + ctx.fillStyle = "#0f380f"; + ctx.fillRect(0, 0, cvs.width, cvs.height); + + ctx.fillStyle = "red"; + ctx.fillRect(food.x, food.y, box, box); for (let i = 0; i < snake.length; i++) { - ctx.fillStyle = i == 0 ? "green" : "white"; + ctx.fillStyle = i == 0 ? "lime" : "white"; ctx.fillRect(snake[i].x, snake[i].y, box, box); - - ctx.strokeStyle = "red"; + ctx.strokeStyle = "black"; ctx.strokeRect(snake[i].x, snake[i].y, box, box); } - ctx.drawImage(foodImg, food.x, food.y); - - // old head position let snakeX = snake[0].x; let snakeY = snake[0].y; - // which direction if (d == "LEFT") snakeX -= box; if (d == "UP") snakeY -= box; if (d == "RIGHT") snakeX += box; if (d == "DOWN") snakeY += box; - // if the snake eats the food if (snakeX == food.x && snakeY == food.y) { score++; - eat.play(); food = { - x: Math.floor(Math.random() * 17 + 1) * box, - y: Math.floor(Math.random() * 15 + 3) * box, + x: Math.floor(Math.random() * 19 + 1) * box, + y: Math.floor(Math.random() * 19 + 1) * box, }; - // we don't remove the tail } else { - // remove the tail snake.pop(); } - // add new Head - - let newHead = { - x: snakeX, - y: snakeY, - }; - - // game over + let newHead = { x: snakeX, y: snakeY }; if ( - snakeX < box || - snakeX > 17 * box || - snakeY < 3 * box || - snakeY > 17 * box || + snakeX < 0 || + snakeX >= cvs.width || + snakeY < 0 || + snakeY >= cvs.height || collision(newHead, snake) ) { clearInterval(game); - dead.play(); + document.getElementById("restartBtn").style.display = "block"; + return; } snake.unshift(newHead); ctx.fillStyle = "white"; - ctx.font = "45px Changa one"; - ctx.fillText(score, 2 * box, 1.6 * box); + ctx.font = "20px Arial"; + ctx.fillText("Score: " + score, 10, 20); } -// call draw function every 100 ms +function restartGame() { + snake = [{ x: 9 * box, y: 10 * box }]; + food = { + x: Math.floor(Math.random() * 19 + 1) * box, + y: Math.floor(Math.random() * 19 + 1) * box, + }; + score = 0; + d = ""; + document.getElementById("restartBtn").style.display = "none"; + game = setInterval(draw, 150); +} -let game = setInterval(draw, 100); +document.getElementById("restartBtn").addEventListener("click", restartGame); +game = setInterval(draw, 150); diff --git a/secret/snake/test.html b/secret/snake/test.html index a10dce8..12a5cfb 100644 --- a/secret/snake/test.html +++ b/secret/snake/test.html @@ -3,106 +3,140 @@ - Snake Game + Snake Game - GameBoy Style - - +
+

Snake Game

+
+ +
+ +