From 78795c5be3da27dae4256c2b95fbd0cd6c30971a Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Sun, 5 Jan 2025 03:20:42 +0100 Subject: [PATCH] help --- secret/snake/game.js | 41 +++++++++++++++++--------- secret/snake/index.html | 7 +++-- secret/snake/styles.css | 65 ++++++++++++++++++++++++++++++----------- 3 files changed, 79 insertions(+), 34 deletions(-) diff --git a/secret/snake/game.js b/secret/snake/game.js index d300a86..66100a9 100644 --- a/secret/snake/game.js +++ b/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) -}); diff --git a/secret/snake/index.html b/secret/snake/index.html index b860b0f..56f96b5 100644 --- a/secret/snake/index.html +++ b/secret/snake/index.html @@ -11,8 +11,8 @@
-

Snake - Game

-
+

Snake - Game

+

Description

Eat as many apples and grow as much as possible

◀ or A or arrow left = move left

@@ -20,6 +20,7 @@

▲ or W or arrow up = move up

▼ or S or arrow down = move down

+
@@ -34,7 +35,7 @@ - +
diff --git a/secret/snake/styles.css b/secret/snake/styles.css index 6d676d3..fabaede 100644 --- a/secret/snake/styles.css +++ b/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 */ +}