From 88081645cb24fc29fa0113984b2a6397da37a919 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 6 Jan 2025 11:56:05 +0100 Subject: [PATCH] Board is now being displayed --- secret/snake/game.js | 164 ++++++++++++++++++++++++---------------- secret/snake/styles.css | 77 ++++++++++++------- 2 files changed, 147 insertions(+), 94 deletions(-) diff --git a/secret/snake/game.js b/secret/snake/game.js index 66100a9..7a10533 100644 --- a/secret/snake/game.js +++ b/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(); }); diff --git a/secret/snake/styles.css b/secret/snake/styles.css index 5be07c5..556a94a 100644 --- a/secret/snake/styles.css +++ b/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 */ - height: 120px; /* Increased size */ + width: 120px; + 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 */ -}