51 lines
3.1 KiB
HTML
51 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Snake Game</title>
|
|
<style>
|
|
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #000; }
|
|
canvas { border: 1px solid #fff; }
|
|
#startScreen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-align: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="gameCanvas" width="400" height="400"></canvas>
|
|
<div id="startScreen"><h1>Snake Game</h1><p>Press Space to Start</p></div>
|
|
<script>
|
|
const canvas = document.getElementById('gameCanvas'), ctx = canvas.getContext('2d'), startScreen = document.getElementById('startScreen');
|
|
const gridSize = 20; let snake = [{ x: 200, y: 200 }], direction = { x: 0, y: 0 }, food = { x: 0, y: 0 }, gameOver = false, gameStarted = false;
|
|
|
|
const getRandomFoodPosition = () => ({ x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize });
|
|
const drawRect = (x, y, color) => { ctx.fillStyle = color; ctx.fillRect(x, y, gridSize, gridSize); };
|
|
const update = () => {
|
|
if (gameOver) return;
|
|
const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
|
|
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
|
|
gameOver = true;
|
|
location.reload(); // Reload the page when the game is over
|
|
return;
|
|
}
|
|
snake.unshift(head);
|
|
if (head.x === food.x && head.y === food.y) food = getRandomFoodPosition(); else snake.pop();
|
|
};
|
|
const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); snake.forEach(segment => drawRect(segment.x, segment.y, 'lime')); drawRect(food.x, food.y, 'red'); };
|
|
const gameLoop = () => { update(); draw(); if (!gameOver) setTimeout(gameLoop, 100); };
|
|
const resetGame = () => { snake = [{ x: 200, y: 200 }]; direction = { x: 0, y: 0 }; food = getRandomFoodPosition(); gameOver = false; gameLoop(); };
|
|
|
|
window.addEventListener('keydown', e => {
|
|
switch (e.key) {
|
|
case 'ArrowUp': case 'w': if (direction.y === 0) direction = { x: 0, y: -gridSize }; break;
|
|
case 'ArrowDown': case 's': if (direction.y === 0) direction = { x: 0, y: gridSize }; break;
|
|
case 'ArrowLeft': case 'a': if (direction.x === 0) direction = { x: -gridSize, y: 0 }; break;
|
|
case 'ArrowRight': case 'd': if (direction.x === 0) direction = { x: gridSize, y: 0 }; break;
|
|
case ' ': if (gameOver) resetGame(); else if (!gameStarted) { startScreen.style.display = 'none'; gameStarted = true; gameLoop(); } break;
|
|
}
|
|
});
|
|
|
|
food = getRandomFoodPosition();
|
|
startScreen.style.display = 'block';
|
|
</script>
|
|
</body>
|
|
</html> |