secret/snake/game.js

@@ -1,64 +1,62 @@
 'use strict';
 
-// DOM Elements
 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'); // Create grid dynamically
+const grid = document.createElement('div');
 grid.id = 'grid';
 document.querySelector('.game').appendChild(grid);
 
-// Game Variables
 let snake = [{ x: 5, y: 5 }];
 let apple = { x: 8, y: 5 };
 let direction = { x: 0, y: 0 };
 let gameInterval = null;
 let isGameRunning = false;
-let gridSize = 10;
+const gridSize = 10;
 
-// Initialize Game
 function initGame() {
-    console.log('Game initialized!');
     grid.style.display = 'grid';
-    grid.style.gridTemplateColumns = 'repeat(10, 1fr)';
-    grid.style.gridTemplateRows = 'repeat(10, 1fr)';
+    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();
 }
 
-// Spawn an Apple
 function spawnApple() {
-    return {
-        x: Math.floor(Math.random() * 10),
-        y: Math.floor(Math.random() * 10),
-    };
+    let newApple;
+    do {
+        newApple = {
+            x: Math.floor(Math.random() * gridSize),
+            y: Math.floor(Math.random() * gridSize)
+        };
+    } while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y));
+    return newApple;
 }
 
-// Update Snake's Position
 function updateSnake() {
     const newHead = {
         x: snake[0].x + direction.x,
-        y: snake[0].y + direction.y,
+        y: snake[0].y + direction.y
     };
 
-    // Wrap snake around edges
-    if (newHead.x < 0) newHead.x = 9;
-    if (newHead.y < 0) newHead.y = 9;
-    if (newHead.x > 9) newHead.x = 0;
-    if (newHead.y > 9) newHead.y = 0;
+    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;
 
-    // Check collision with itself
     if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
         gameOver();
         return;
@@ -66,39 +64,31 @@ function updateSnake() {
 
     snake.unshift(newHead);
 
-    // Check collision with apple
     if (newHead.x === apple.x && newHead.y === apple.y) {
         apple = spawnApple();
     } else {
-        snake.pop(); // Remove tail
+        snake.pop();
     }
 }
 
-// Render Game State
 function render() {
+    grid.innerHTML = "";
 
-    const grid = document.getElementById("grid");
-    grid.innerHTML = ""; // Clear the grid
-
-    // Generate the grid
     for (let y = 0; y < gridSize; y++) {
         for (let x = 0; x < gridSize; x++) {
             const cell = document.createElement("div");
             cell.classList.add("cell");
 
-            // Alternate colors for a chessboard pattern
             if ((x + y) % 2 === 0) {
                 cell.classList.add("light-green");
             } else {
                 cell.classList.add("dark-green");
             }
 
-            // Check if the cell is part of the snake
             if (snake.some(segment => segment.x === x && segment.y === y)) {
                 cell.classList.add("snake");
             }
 
-            // Check if the cell is the apple
             if (apple.x === x && apple.y === y) {
                 cell.classList.add("apple");
             }
@@ -108,25 +98,47 @@ function render() {
     }
 }
 
-// Game Loop
 function gameLoop() {
     if (!isGameRunning) return;
     updateSnake();
     render();
 }
 
-// Handle Game Over
 function gameOver() {
     alert('Game Over!');
     clearInterval(gameInterval);
     isGameRunning = false;
 }
 
-// Event Listeners for Buttons
-upButton.addEventListener('click', () => direction = { x: 0, y: -1 });
-downButton.addEventListener('click', () => direction = { x: 0, y: 1 });
-leftButton.addEventListener('click', () => direction = { x: -1, y: 0 });
-rightButton.addEventListener('click', () => direction = { x: 1, y: 0 });
+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);
+});