144 lines
3.9 KiB
JavaScript
144 lines
3.9 KiB
JavaScript
'use strict';
|
|
|
|
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');
|
|
grid.id = 'grid';
|
|
document.querySelector('.game').appendChild(grid);
|
|
|
|
let snake = [{ x: 5, y: 5 }];
|
|
let apple = { x: 8, y: 5 };
|
|
let direction = { x: 0, y: 0 };
|
|
let gameInterval = null;
|
|
let isGameRunning = false;
|
|
const gridSize = 10;
|
|
|
|
function initGame() {
|
|
grid.style.display = 'grid';
|
|
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();
|
|
}
|
|
|
|
function spawnApple() {
|
|
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;
|
|
}
|
|
|
|
function updateSnake() {
|
|
const newHead = {
|
|
x: snake[0].x + direction.x,
|
|
y: snake[0].y + direction.y
|
|
};
|
|
|
|
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;
|
|
|
|
if (snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
|
|
gameOver();
|
|
return;
|
|
}
|
|
|
|
snake.unshift(newHead);
|
|
|
|
if (newHead.x === apple.x && newHead.y === apple.y) {
|
|
apple = spawnApple();
|
|
} else {
|
|
snake.pop();
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
grid.innerHTML = "";
|
|
|
|
for (let y = 0; y < gridSize; y++) {
|
|
for (let x = 0; x < gridSize; x++) {
|
|
const cell = document.createElement("div");
|
|
cell.classList.add("cell");
|
|
|
|
if ((x + y) % 2 === 0) {
|
|
cell.classList.add("light-green");
|
|
} else {
|
|
cell.classList.add("dark-green");
|
|
}
|
|
|
|
if (snake.some(segment => segment.x === x && segment.y === y)) {
|
|
cell.classList.add("snake");
|
|
}
|
|
|
|
if (apple.x === x && apple.y === y) {
|
|
cell.classList.add("apple");
|
|
}
|
|
|
|
grid.appendChild(cell);
|
|
}
|
|
}
|
|
}
|
|
|
|
function gameLoop() {
|
|
if (!isGameRunning) return;
|
|
updateSnake();
|
|
render();
|
|
}
|
|
|
|
function gameOver() {
|
|
alert('Game Over!');
|
|
clearInterval(gameInterval);
|
|
isGameRunning = false;
|
|
}
|
|
|
|
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);
|
|
});
|