diff --git a/secret/snake/audio/dead.mp3 b/secret/snake/audio/dead.mp3
deleted file mode 100644
index 414bf65..0000000
Binary files a/secret/snake/audio/dead.mp3 and /dev/null differ
diff --git a/secret/snake/audio/down.mp3 b/secret/snake/audio/down.mp3
deleted file mode 100644
index 03533a0..0000000
Binary files a/secret/snake/audio/down.mp3 and /dev/null differ
diff --git a/secret/snake/audio/eat.mp3 b/secret/snake/audio/eat.mp3
deleted file mode 100644
index 076198c..0000000
Binary files a/secret/snake/audio/eat.mp3 and /dev/null differ
diff --git a/secret/snake/audio/left.mp3 b/secret/snake/audio/left.mp3
deleted file mode 100644
index 4d3d245..0000000
Binary files a/secret/snake/audio/left.mp3 and /dev/null differ
diff --git a/secret/snake/audio/right.mp3 b/secret/snake/audio/right.mp3
deleted file mode 100644
index 64408ea..0000000
Binary files a/secret/snake/audio/right.mp3 and /dev/null differ
diff --git a/secret/snake/audio/up.mp3 b/secret/snake/audio/up.mp3
deleted file mode 100644
index 97cfbe9..0000000
Binary files a/secret/snake/audio/up.mp3 and /dev/null differ
diff --git a/secret/snake/game.js b/secret/snake/game.js
index f94dc2e..08d50d5 100644
--- a/secret/snake/game.js
+++ b/secret/snake/game.js
@@ -1,95 +1,150 @@
"use strict";
-const cvs = document.getElementById("snake");
-const ctx = cvs.getContext("2d");
-const box = 20;
+const upButton = document.getElementById("up");
+const downButton = document.getElementById("down");
+const leftButton = document.getElementById("left");
+const rightButton = document.getElementById("right");
+const startButton = document.getElementById("start");
+const grid = document.createElement("div");
+grid.id = "grid";
+document.querySelector(".game").appendChild(grid);
-let snake = [{ x: 9 * box, y: 10 * box }];
-let food = {
- x: Math.floor(Math.random() * 19 + 1) * box,
- y: Math.floor(Math.random() * 19 + 1) * box,
-};
-let score = 0;
-let d;
-let game;
+let snake = [{ x: 5, y: 5 }];
+let apple = { x: 8, y: 5 };
+let direction = { x: 0, y: 0 };
+let gameInterval = null;
+let isGameRunning = false;
+const gridSize = 10;
-document.addEventListener("keydown", direction);
-function direction(event) {
- let key = event.keyCode;
- 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";
+function initGame() {
+ grid.style.display = "grid";
+ grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
+ grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
+ grid.style.width = "350px";
+ grid.style.height = "350px";
+ document.getElementById("title").style.display = "none";
+ document.getElementById("description").style.display = "none";
+
+ isGameRunning = true;
+ snake = [{ x: 5, y: 5 }];
+ apple = spawnApple();
+ direction = { x: 0, y: 0 };
+
+ clearInterval(gameInterval);
+ gameInterval = setInterval(gameLoop, 200);
+ render();
}
-function collision(head, array) {
- return array.some((part) => head.x == part.x && head.y == part.y);
-}
-
-function draw() {
- 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 ? "lime" : "white";
- ctx.fillRect(snake[i].x, snake[i].y, box, box);
- ctx.strokeStyle = "black";
- ctx.strokeRect(snake[i].x, snake[i].y, box, box);
- }
-
- 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++;
- food = {
- x: Math.floor(Math.random() * 19 + 1) * box,
- y: Math.floor(Math.random() * 19 + 1) * box,
+function spawnApple() {
+ let newApple;
+ do {
+ newApple = {
+ x: Math.floor(Math.random() * gridSize),
+ y: Math.floor(Math.random() * gridSize),
};
- } else {
- snake.pop();
- }
+ } while (
+ snake.some(
+ (segment) => segment.x === newApple.x && segment.y === newApple.y
+ )
+ );
+ return newApple;
+}
- let newHead = { x: snakeX, y: snakeY };
+function updateSnake() {
+ const newHead = {
+ x: snake[0].x + direction.x,
+ y: snake[0].y + direction.y,
+ };
+
+ if (newHead.x < 0) newHead.x = gridSize - 1;
+ if (newHead.y < 0) newHead.y = gridSize - 1;
+ if (newHead.x >= gridSize) newHead.x = 0;
+ if (newHead.y >= gridSize) newHead.y = 0;
if (
- snakeX < 0 ||
- snakeX >= cvs.width ||
- snakeY < 0 ||
- snakeY >= cvs.height ||
- collision(newHead, snake)
+ snake.some((segment) => segment.x === newHead.x && segment.y === newHead.y)
) {
- clearInterval(game);
- document.getElementById("restartBtn").style.display = "block";
+ gameOver();
return;
}
snake.unshift(newHead);
- ctx.fillStyle = "white";
- ctx.font = "20px Arial";
- ctx.fillText("Score: " + score, 10, 20);
+ if (newHead.x === apple.x && newHead.y === apple.y) {
+ apple = spawnApple();
+ } else {
+ snake.pop();
+ }
}
-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);
+function render() {
+ grid.innerHTML = "";
+
+ for (let y = 0; y < gridSize; y++) {
+ for (let x = 0; x < gridSize; x++) {
+ const cell = document.createElement("div");
+ cell.classList.add("cell");
+
+ if ((x + y) % 2 === 0) {
+ cell.classList.add("light-green");
+ } else {
+ cell.classList.add("dark-green");
+ }
+
+ if (snake.some((segment) => segment.x === x && segment.y === y)) {
+ cell.classList.add("snake");
+ }
+
+ if (apple.x === x && apple.y === y) {
+ cell.classList.add("apple");
+ }
+
+ grid.appendChild(cell);
+ }
+ }
}
-document.getElementById("restartBtn").addEventListener("click", restartGame);
-game = setInterval(draw, 150);
+function gameLoop() {
+ if (!isGameRunning) return;
+ updateSnake();
+ render();
+}
+
+function gameOver() {
+ alert("Game Over!");
+ clearInterval(gameInterval);
+ isGameRunning = false;
+}
+
+function handleDirectionInput(key) {
+ switch (key) {
+ case "ArrowUp":
+ case "w":
+ if (direction.y === 0) direction = { x: 0, y: -1 };
+ break;
+ case "ArrowDown":
+ case "s":
+ if (direction.y === 0) direction = { x: 0, y: 1 };
+ break;
+ case "ArrowLeft":
+ case "a":
+ if (direction.x === 0) direction = { x: -1, y: 0 };
+ break;
+ case "ArrowRight":
+ case "d":
+ if (direction.x === 0) direction = { x: 1, y: 0 };
+ break;
+ }
+}
+
+upButton.addEventListener("click", () => handleDirectionInput("ArrowUp"));
+downButton.addEventListener("click", () => handleDirectionInput("ArrowDown"));
+leftButton.addEventListener("click", () => handleDirectionInput("ArrowLeft"));
+rightButton.addEventListener("click", () => handleDirectionInput("ArrowRight"));
+startButton.addEventListener("click", () => {
+ if (!isGameRunning) initGame();
+});
+
+document.addEventListener("keydown", (event) => {
+ handleDirectionInput(event.key);
+});
diff --git a/secret/snake/img/food.png b/secret/snake/img/food.png
deleted file mode 100644
index 921fe78..0000000
Binary files a/secret/snake/img/food.png and /dev/null differ
diff --git a/secret/snake/img/ground.png b/secret/snake/img/ground.png
deleted file mode 100644
index 218b190..0000000
Binary files a/secret/snake/img/ground.png and /dev/null differ
diff --git a/secret/snake/index.html b/secret/snake/index.html
index 7f81ed2..183027f 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
deleted file mode 100644
index 12a5cfb..0000000
--- a/secret/snake/test.html
+++ /dev/null
@@ -1,197 +0,0 @@
-
-
-
-
-
- Snake Game - GameBoy Style
-
-
-
-
-
Snake Game
-
-
-
-
-