From c8457d3b1c6dccc5a42d9a2e7f4174f8b76f48b7 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 25 Feb 2025 12:00:40 +0100 Subject: [PATCH] WHY IS THIS BULLSHIT WORKING --- secret/snake/game.js | 251 +++++++++++++++++++++++----------------- secret/snake/index.html | 2 +- secret/snake/test.html | 171 +++++++++++++++++++++++++++ 3 files changed, 314 insertions(+), 110 deletions(-) create mode 100644 secret/snake/test.html diff --git a/secret/snake/game.js b/secret/snake/game.js index 22cf87f..2f6ea42 100644 --- a/secret/snake/game.js +++ b/secret/snake/game.js @@ -1,123 +1,156 @@ +// testing from old tutorial + "use strict"; -document.addEventListener("DOMContentLoaded", () => { - const cvs = document.getElementById("game"); - const ctx = cvs.getContext("2d"); - const startBtn = document.getElementById("start"); - const description = document.getElementById("description"); - const box = 32; +const cvs = document.getElementById("snake"); +const ctx = cvs.getContext("2d"); - const ground = new Image(); - ground.src = "img/ground.png"; +// create the unit +const box = 32; - const foodImg = new Image(); - foodImg.src = "img/food.png"; +// load images - let dead = new Audio("audio/dead.mp3"); - let eat = new Audio("audio/eat.mp3"); - let up = new Audio("audio/up.mp3"); - let right = new Audio("audio/right.mp3"); - let left = new Audio("audio/left.mp3"); - let down = new Audio("audio/down.mp3"); +const ground = new Image(); +ground.src = "img/ground.png"; - 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, +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 food = { + x: Math.floor(Math.random() * 17 + 1) * box, + y: Math.floor(Math.random() * 15 + 3) * box, +}; + +// create the score var + +let score = 0; + +//control the snake + +let d; + +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(); + } +} + +// 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; +} + +// draw everything to the canvas + +function draw() { + ctx.drawImage(ground, 0, 0); + + for (let i = 0; i < snake.length; i++) { + ctx.fillStyle = i == 0 ? "green" : "white"; + ctx.fillRect(snake[i].x, snake[i].y, box, box); + + ctx.strokeStyle = "red"; + 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, + }; + // we don't remove the tail + } else { + // remove the tail + snake.pop(); + } + + // add new Head + + let newHead = { + x: snakeX, + y: snakeY, }; - let score = 0; - let d; - let game; - document.addEventListener("keydown", direction); - document - .getElementById("up") - .addEventListener("click", () => changeDirection("UP")); - document - .getElementById("down") - .addEventListener("click", () => changeDirection("DOWN")); - document - .getElementById("left") - .addEventListener("click", () => changeDirection("LEFT")); - document - .getElementById("right") - .addEventListener("click", () => changeDirection("RIGHT")); - startBtn.addEventListener("click", startGame); + // game over - function direction(event) { - const key = event.key.toLowerCase(); - if ((key === "arrowleft" || key === "a") && d !== "RIGHT") - changeDirection("LEFT"); - if ((key === "arrowup" || key === "w") && d !== "DOWN") - changeDirection("UP"); - if ((key === "arrowright" || key === "d") && d !== "LEFT") - changeDirection("RIGHT"); - if ((key === "arrowdown" || key === "s") && d !== "UP") - changeDirection("DOWN"); + if ( + snakeX < box || + snakeX > 17 * box || + snakeY < 3 * box || + snakeY > 17 * box || + collision(newHead, snake) + ) { + clearInterval(game); + dead.play(); } - function changeDirection(newDirection) { - d = newDirection; - if (newDirection === "LEFT") left.play(); - if (newDirection === "UP") up.play(); - if (newDirection === "RIGHT") right.play(); - if (newDirection === "DOWN") down.play(); - } + snake.unshift(newHead); - function collision(head, array) { - return array.some( - (segment) => segment.x === head.x && segment.y === head.y - ); - } + ctx.fillStyle = "white"; + ctx.font = "45px Changa one"; + ctx.fillText(score, 2 * box, 1.6 * box); +} - function draw() { - ctx.drawImage(ground, 0, 0); - snake.forEach((segment, index) => { - ctx.fillStyle = index === 0 ? "green" : "white"; - ctx.fillRect(segment.x, segment.y, box, box); - ctx.strokeStyle = "red"; - ctx.strokeRect(segment.x, segment.y, box, box); - }); - ctx.drawImage(foodImg, food.x, food.y); +// call draw function every 100 ms - let snakeX = snake[0].x; - let snakeY = snake[0].y; - if (d === "LEFT") snakeX -= box; - if (d === "UP") snakeY -= box; - if (d === "RIGHT") snakeX += box; - if (d === "DOWN") snakeY += box; - - 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, - }; - } else { - snake.pop(); - } - - let newHead = { x: snakeX, y: snakeY }; - if ( - snakeX < box || - snakeX > 17 * box || - snakeY < 3 * box || - snakeY > 17 * box || - collision(newHead, snake) - ) { - clearInterval(game); - dead.play(); - } - - snake.unshift(newHead); - ctx.fillStyle = "white"; - ctx.font = "45px Changa one"; - ctx.fillText(score, 2 * box, 1.6 * box); - } - - function startGame() { - description.style.display = "none"; - game = setInterval(draw, 100); - } -}); +let game = setInterval(draw, 100); diff --git a/secret/snake/index.html b/secret/snake/index.html index 183027f..7f81ed2 100644 --- a/secret/snake/index.html +++ b/secret/snake/index.html @@ -38,7 +38,7 @@

▲ or W or arrow up = move up

▼ or S or arrow down = move down

- + diff --git a/secret/snake/test.html b/secret/snake/test.html new file mode 100644 index 0000000..a10dce8 --- /dev/null +++ b/secret/snake/test.html @@ -0,0 +1,171 @@ + + + + + + Snake Game + + + + + + + + +