diff --git a/secret/snake/game.js b/secret/snake/game.js index 7a10533..a9f50a8 100644 --- a/secret/snake/game.js +++ b/secret/snake/game.js @@ -1,64 +1,62 @@ 'use strict'; -// 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 +const grid = document.createElement('div'); grid.id = 'grid'; document.querySelector('.game').appendChild(grid); -// 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; +const gridSize = 10; -// Initialize Game function initGame() { - console.log('Game initialized!'); grid.style.display = 'grid'; - grid.style.gridTemplateColumns = 'repeat(10, 1fr)'; - grid.style.gridTemplateRows = 'repeat(10, 1fr)'; + grid.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`; + grid.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`; grid.style.width = '350px'; grid.style.height = '350px'; document.getElementById('title').style.display = 'none'; document.getElementById('description').style.display = 'none'; + isGameRunning = true; snake = [{ x: 5, y: 5 }]; apple = spawnApple(); direction = { x: 0, y: 0 }; + clearInterval(gameInterval); gameInterval = setInterval(gameLoop, 200); render(); } -// Spawn an Apple function spawnApple() { - return { - x: Math.floor(Math.random() * 10), - y: Math.floor(Math.random() * 10), - }; + let newApple; + do { + newApple = { + x: Math.floor(Math.random() * gridSize), + y: Math.floor(Math.random() * gridSize) + }; + } while (snake.some(segment => segment.x === newApple.x && segment.y === newApple.y)); + return newApple; } -// Update Snake's Position function updateSnake() { const newHead = { x: snake[0].x + direction.x, - y: snake[0].y + direction.y, + 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; + if (newHead.x < 0) newHead.x = gridSize - 1; + if (newHead.y < 0) newHead.y = gridSize - 1; + if (newHead.x >= gridSize) newHead.x = 0; + if (newHead.y >= gridSize) newHead.y = 0; - // Check collision with itself if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) { gameOver(); return; @@ -66,39 +64,31 @@ function updateSnake() { snake.unshift(newHead); - // Check collision with apple if (newHead.x === apple.x && newHead.y === apple.y) { apple = spawnApple(); } else { - snake.pop(); // Remove tail + snake.pop(); } } -// Render Game State function render() { + grid.innerHTML = ""; - const grid = document.getElementById("grid"); - grid.innerHTML = ""; // Clear the grid - - // Generate the grid for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { 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"); } @@ -108,25 +98,47 @@ function render() { } } -// Game Loop function gameLoop() { if (!isGameRunning) return; updateSnake(); render(); } -// 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 }); +function handleDirectionInput(key) { + switch (key) { + case 'ArrowUp': + case 'w': + if (direction.y === 0) direction = { x: 0, y: -1 }; + break; + case 'ArrowDown': + case 's': + if (direction.y === 0) direction = { x: 0, y: 1 }; + break; + case 'ArrowLeft': + case 'a': + if (direction.x === 0) direction = { x: -1, y: 0 }; + break; + case 'ArrowRight': + case 'd': + if (direction.x === 0) direction = { x: 1, y: 0 }; + break; + } +} + +upButton.addEventListener('click', () => handleDirectionInput('ArrowUp')); +downButton.addEventListener('click', () => handleDirectionInput('ArrowDown')); +leftButton.addEventListener('click', () => handleDirectionInput('ArrowLeft')); +rightButton.addEventListener('click', () => handleDirectionInput('ArrowRight')); startButton.addEventListener('click', () => { if (!isGameRunning) initGame(); }); + +document.addEventListener('keydown', (event) => { + handleDirectionInput(event.key); +});