132 lines
3.6 KiB
JavaScript
132 lines
3.6 KiB
JavaScript
'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
|
|
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;
|
|
|
|
// 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.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),
|
|
};
|
|
}
|
|
|
|
// Update Snake's Position
|
|
function updateSnake() {
|
|
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
|
|
}
|
|
}
|
|
|
|
// Render Game State
|
|
function render() {
|
|
|
|
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");
|
|
}
|
|
|
|
grid.appendChild(cell);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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 });
|
|
startButton.addEventListener('click', () => {
|
|
if (!isGameRunning) initGame();
|
|
});
|