Board is now being displayed

secret/snake/game.js

@@ -1,42 +1,43 @@
 'use strict';
 
-// Get references to the buttons
+// DOM Elements
-const upButton = document.getElementById("up");
+const upButton = document.getElementById('up');
-const downButton = document.getElementById("down");
+const downButton = document.getElementById('down');
-const leftButton = document.getElementById("left");
+const leftButton = document.getElementById('left');
-const rightButton = document.getElementById("right");
+const rightButton = document.getElementById('right');
-const startButton = document.getElementById("start");
+const startButton = document.getElementById('start');
-const grid = document.getElementById("grid");
+const grid = document.createElement('div'); // Create grid dynamically
+grid.id = 'grid';
+document.querySelector('.game').appendChild(grid);
 
-// Game variables
+// Game Variables
-let snake;
+let snake = [{ x: 5, y: 5 }];
-let apple;
+let apple = { x: 8, y: 5 };
-let gameInterval;
+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);
+    snake = [{ x: 5, y: 5 }];
-
+    apple = spawnApple();
-    // Render grid only during initialization
+    direction = { x: 0, y: 0 };
-    renderGrid();
+    clearInterval(gameInterval);
+    gameInterval = setInterval(gameLoop, 200);
     render();
 }
 
-// Game loop
+// Spawn an Apple
-function gameLoop() {
-    updateSnake();
-    checkCollisions();
-    render();
-}
-
-// Spawn an apple at a random position
 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;
     }
 
-// Check for collisions with walls, itself, or apple
+    snake.unshift(newHead);
-function checkCollisions() {
+
-    // Logic to check for collisions
+    // Check collision with apple
+    if (newHead.x === apple.x && newHead.y === apple.y) {
+        apple = spawnApple();
+    } else {
+        snake.pop(); // Remove tail
+    }
 }
 
-// Render the game state
+// Render Game State
 function render() {
-    // Logic to render the snake and apple on the screen
-}
 
-// Render the grid
+    const grid = document.getElementById("grid");
-function renderGrid() {
+    grid.innerHTML = ""; // Clear the grid
-    const gridSize = 10;
-    grid.innerHTML = ''; // Clear the grid first
 
+    // 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');
+            const cell = document.createElement("div");
-            cell.classList.add('cell');
+            cell.classList.add("cell");
-            row.appendChild(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
+// Game Loop
-upButton.addEventListener("click", () => {
+function gameLoop() {
-    // Logic to move the snake up
+    if (!isGameRunning) return;
-});
+    updateSnake();
-
+    render();
-downButton.addEventListener("click", () => {
-    // Logic to move the snake down
-});
-
-leftButton.addEventListener("click", () => {
-    // Logic to move the snake left
-});
-
-rightButton.addEventListener("click", () => {
-    // Logic to move the snake right
-});
-
-startButton.addEventListener("click", () => {
-    if (!isGameRunning) {
-        initGame();
 }
+
+// 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 });
+startButton.addEventListener('click', () => {
+    if (!isGameRunning) initGame();
 });

secret/snake/styles.css

@@ -35,7 +35,7 @@ html {
 
 /* Screen */
 .screen {
-    background-color: black; /* Game Boy green screen */
+    background-color: black;
     border: 4px solid #0f380f;
     width: 90%;
     height: 55%;
@@ -55,7 +55,7 @@ html {
 
 /* Titles */
 h1 {
-    font-size: 2rem; /* Increased font size */
+    font-size: 2rem;
     margin-bottom: 10px;
     text-transform: uppercase;
     color: #9bbc0f;
@@ -69,6 +69,45 @@ h1 {
     color: white;
 }
 
+/* Grid container */
+#grid {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr); /* Adjust to match gridSize */
+    grid-template-rows: repeat(10, 1fr); /* Adjust to match gridSize */
+    width: 400px; /* Adjust as needed */
+    height: 400px; /* Adjust as needed */
+    border: 2px solid #0f380f;
+    margin: 20px auto;
+    /* initially hide */
+    display: none;
+}
+
+/* Individual cells */
+.cell {
+    width: 100%;
+    height: 100%;
+}
+
+.cell.light-green {
+    background-color: #9bbc0f;
+}
+
+.cell.dark-green {
+    background-color: #0f380f;
+}
+
+/* Snake styling */
+.snake {
+    background-color: #e600ff; /* Snake color */
+    z-index: 1000;
+}
+
+/* Apple styling */
+.apple {
+    background-color: red; /* Apple color */
+    z-index: 999;
+}
+
 /* Controls Section */
 .controls {
     margin-top: 20px;
@@ -81,8 +120,8 @@ h1 {
 /* D-Pad */
 .dpad {
     position: relative;
-    width: 120px; /* Increased size */
+    width: 120px;
-    height: 120px; /* Increased size */
+    height: 120px;
 }
 
 /* Base Styling for D-Pad Buttons */
@@ -94,7 +133,7 @@ h1 {
     position: absolute;
     width: 42px;
     height: 42px;
-    font-size: 1.5rem; /* Increased size */
+    font-size: 1.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -135,7 +174,7 @@ h1 {
     transform: translate(-50%, -50%);
     width: 40px;
     height: 40px;
-    border: 2px solid #9cbc0f00;
+    border: 2px solid transparent;
     z-index: 0;
     border-radius: 5px;
 }
@@ -145,7 +184,7 @@ h1 {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 200px; /* Increased height */
+    height: 200px;
 }
 
 .btn {
@@ -155,7 +194,7 @@ h1 {
     border-radius: 50%;
     width: 60px;
     height: 60px;
-    font-size: 1.8rem; /* Increased font size */
+    font-size: 1.8rem;
     cursor: pointer;
     transition: transform 0.1s, background-color 0.2s;
 }
@@ -169,6 +208,7 @@ h1 {
     transform: scale(0.9);
 }
 
+/* Start Button */
 .start-btn {
     background-color: #0f380f;
     color: #9bbc0f;
@@ -191,27 +231,8 @@ h1 {
     transform: scale(0.9);
 }
 
+/* Hidden Canvas for Debugging or Fallback */
 canvas {
     display: none;
     z-index: 1000;
 }
-
-#grid {
-    display: grid;
-    width: 200px; /* 10 cells x 20px */
-    height: 200px; /* 10 cells x 20px */
-    grid-template-columns: repeat(10, 1fr);
-    grid-template-rows: repeat(10, 1fr);
-    display: none;
-}
-
-.cell {
-    border: 1px solid purple;
-    width: 20px;
-    height: 20px;
-    background-color: white;
-}
-
-.row {
-    display: contents; /* For proper grid layout */
-}