help

secret/snake/game.js

@@ -6,8 +6,7 @@ const downButton = document.getElementById("down");
 const leftButton = document.getElementById("left");
 const rightButton = document.getElementById("right");
 const startButton = document.getElementById("start");
-const aButton = document.getElementById("a");
-const bButton = document.getElementById("b");
+const grid = document.getElementById("grid");
 
 // Game variables
 let snake;
@@ -17,10 +16,17 @@ let isGameRunning = false;
 
 // Initialize the game
 function initGame() {
+    document.getElementById('grid').style.display = 'grid';
+    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();
+    render();
 }
 
 // Game loop
@@ -33,15 +39,14 @@ function gameLoop() {
 // Spawn an apple at a random position
 function spawnApple() {
     return {
-        x: Math.floor(Math.random() * 20),
-        y: Math.floor(Math.random() * 20),
+        x: Math.floor(Math.random() * 10),
+        y: Math.floor(Math.random() * 10),
     };
 }
 
 // Update the snake's position
 function updateSnake() {
     // Logic to move the snake based on direction
-    // This is where you would handle the snake's movement
 }
 
 // Check for collisions with walls, itself, or apple
@@ -54,6 +59,23 @@ 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
+
+    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);
+        }
+        grid.appendChild(row);
+    }
+}
+
 // Button event listeners
 upButton.addEventListener("click", () => {
     // Logic to move the snake up
@@ -76,12 +98,3 @@ startButton.addEventListener("click", () => {
         initGame();
     }
 });
-
-// Additional button functionalities for A and B
-aButton.addEventListener("click", () => {
-    // Logic for A button (e.g., pause or special action)
-});
-
-bButton.addEventListener("click", () => {
-    // Logic for B button (e.g., reset or another action)
-});

secret/snake/index.html

@@ -11,8 +11,8 @@
       <!-- Game Boy Screen -->
       <div class="screen">
         <article class="game">
-          <h1>Snake - Game</h1>
-          <div class="description">
+          <h1 class="title" id="title">Snake - Game</h1>
+          <div class="description" id="description">
             <h2>Description</h2>
             <p>Eat as many apples and grow as much as possible</p>
             <p>◀ or A or arrow left = move left</p>
@@ -20,6 +20,7 @@
             <p>▲ or W or arrow up = move up</p>
             <p>▼ or S or arrow down = move down</p>
           </div>
+          <canvas id="grid"></canvas>
         </article>
       </div>
 
@@ -34,7 +35,7 @@
           <button class="dpad-btn down" id="down">▼</button>
         </div>
 
-        <!-- A, B  and start buttonButtons on the right -->
+        <!-- A, B and start button on the right -->
         <div class="action-buttons">
           <button class="start-btn btn" id="start">Start</button>
           <button class="btn" id="a">A</button>

secret/snake/styles.css

@@ -1,3 +1,4 @@
+/* Base Reset */
 body,
 html {
     margin: 0;
@@ -10,8 +11,9 @@ html {
     height: 100vh;
 }
 
+/* GameBoy Layout */
 .gameboy {
-    background-color: #5900ff;
+    background-color: #5f4c82; /* Game Boy Color purple shell */
     width: 441px;
     height: 735px;
     border-radius: 20px;
@@ -31,8 +33,9 @@ html {
     }
 }
 
+/* Screen */
 .screen {
-    background-color: black;
+    background-color: black; /* Game Boy green screen */
     border: 4px solid #0f380f;
     width: 90%;
     height: 55%;
@@ -45,28 +48,28 @@ html {
     overflow: hidden;
 }
 
+.game {
+    text-align: center;
+    width: 90%;
+}
+
+/* Titles */
 h1 {
-    font-size: 2rem;
+    font-size: 2rem; /* Increased font size */
     margin-bottom: 10px;
     text-transform: uppercase;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
     color: #9bbc0f;
 }
 
 .description,
-.description p,
-.description h1 {
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+.description p {
     font-size: 1.2rem;
     margin: 0 auto;
     padding: 0 auto;
-    color: #ffffff;
+    color: white;
 }
 
+/* Controls Section */
 .controls {
     margin-top: 20px;
     display: flex;
@@ -75,12 +78,14 @@ h1 {
     align-items: center;
 }
 
+/* D-Pad */
 .dpad {
     position: relative;
-    width: 120px;
-    height: 120px;
+    width: 120px; /* Increased size */
+    height: 120px; /* Increased size */
 }
 
+/* Base Styling for D-Pad Buttons */
 .dpad-btn {
     background-color: #0f380f;
     color: #9bbc0f;
@@ -89,7 +94,7 @@ h1 {
     position: absolute;
     width: 42px;
     height: 42px;
-    font-size: 1.5rem;
+    font-size: 1.5rem; /* Increased size */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -121,6 +126,7 @@ h1 {
     transform: translateY(-50%);
 }
 
+/* D-Pad Center to Connect Buttons */
 .dpad-center {
     background-color: #0f380f;
     position: absolute;
@@ -134,11 +140,12 @@ h1 {
     border-radius: 5px;
 }
 
+/* A and B Buttons */
 .action-buttons {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: 200px;
+    height: 200px; /* Increased height */
 }
 
 .btn {
@@ -148,7 +155,7 @@ h1 {
     border-radius: 50%;
     width: 60px;
     height: 60px;
-    font-size: 1.8rem;
+    font-size: 1.8rem; /* Increased font size */
     cursor: pointer;
     transition: transform 0.1s, background-color 0.2s;
 }
@@ -183,3 +190,27 @@ h1 {
 .start-btn:active {
     transform: scale(0.9);
 }
+
+canvas {
+    display: none;
+}
+
+#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 */
+}