Board is now being displayed

secret/snake/game.js

@@ -1,42 +1,43 @@
 'use strict';
 
-// Get references to the buttons
-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.getElementById("grid");
+// 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
+grid.id = 'grid';
+document.querySelector('.game').appendChild(grid);
 
-// Game variables
-let snake;
-let apple;
-let gameInterval;
+// 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;
 
-// Initialize the game
+// Initialize Game
 function initGame() {
-    document.getElementById('grid').style.display = 'grid';
+    console.log('Game initialized!');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = 'repeat(10, 1fr)';
+    grid.style.gridTemplateRows = 'repeat(10, 1fr)';
+    grid.style.width = '350px';
+    grid.style.height = '350px';
     document.getElementById('title').style.display = 'none';
     document.getElementById('description').style.display = 'none';
-    snake = [{ x: 10, y: 10 }];
-    apple = spawnApple();
     isGameRunning = true;
-    gameInterval = setInterval(gameLoop, 100);
-
-    // Render grid only during initialization
-    renderGrid();
+    snake = [{ x: 5, y: 5 }];
+    apple = spawnApple();
+    direction = { x: 0, y: 0 };
+    clearInterval(gameInterval);
+    gameInterval = setInterval(gameLoop, 200);
     render();
 }
 
-// Game loop
-function gameLoop() {
-    updateSnake();
-    checkCollisions();
-    render();
-}
-
-// Spawn an apple at a random position
+// Spawn an Apple
 function spawnApple() {
     return {
         x: Math.floor(Math.random() * 10),
@@ -44,57 +45,88 @@ function spawnApple() {
     };
 }
 
-// Update the snake's position
+// Update Snake's Position
 function updateSnake() {
-    // Logic to move the snake based on direction
+    const newHead = {
+        x: snake[0].x + direction.x,
+        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;
+
+    // Check collision with itself
+    if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
+        gameOver();
+        return;
+    }
+
+    snake.unshift(newHead);
+
+    // Check collision with apple
+    if (newHead.x === apple.x && newHead.y === apple.y) {
+        apple = spawnApple();
+    } else {
+        snake.pop(); // Remove tail
+    }
 }
 
-// Check for collisions with walls, itself, or apple
-function checkCollisions() {
-    // Logic to check for collisions
-}
-
-// Render the game state
+// Render Game State
 function render() {
-    // Logic to render the snake and apple on the screen
-}
 
-// Render the grid
-function renderGrid() {
-    const gridSize = 10;
-    grid.innerHTML = ''; // Clear the grid first
+    const grid = document.getElementById("grid");
+    grid.innerHTML = ""; // Clear the grid
 
+    // Generate the grid
     for (let y = 0; y < gridSize; y++) {
-        let row = document.createElement('div');
-        row.classList.add('row');
         for (let x = 0; x < gridSize; x++) {
-            let cell = document.createElement('div');
-            cell.classList.add('cell');
-            row.appendChild(cell);
+            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");
+            }
+
+            grid.appendChild(cell);
         }
-        grid.appendChild(row);
     }
 }
 
-// Button event listeners
-upButton.addEventListener("click", () => {
-    // Logic to move the snake up
-});
+// Game Loop
+function gameLoop() {
+    if (!isGameRunning) return;
+    updateSnake();
+    render();
+}
 
-downButton.addEventListener("click", () => {
-    // Logic to move the snake down
-});
+// Handle Game Over
+function gameOver() {
+    alert('Game Over!');
+    clearInterval(gameInterval);
+    isGameRunning = false;
+}
 
-leftButton.addEventListener("click", () => {
-    // Logic to move the snake left
-});
-
-rightButton.addEventListener("click", () => {
-    // Logic to move the snake right
-});
-
-startButton.addEventListener("click", () => {
-    if (!isGameRunning) {
-        initGame();
-    }
+// 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 });
+startButton.addEventListener('click', () => {
+    if (!isGameRunning) initGame();
 });