neu

2025-02-01 21:39:35 +01:00
parent 894a001f4e
commit 675cae838c
2 changed files with 51 additions and 0 deletions
--- a/programmieren/spiele/Snake/Snake
+++ b/programmieren/spiele/Snake/Snake
@ -0,0 +1,51 @@
+<!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>