<!DOCTYPE html>
<!-- saved from url=(0060)https://test.creative-crafter.de/programmieren/spiele/Snake/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; 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" style="display: block;"><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>