Untitled
unknown
plain_text
a year ago
3.6 kB
5
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake and Apple Game</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } canvas { border: 1px solid black; background-color: #eee; } .score { position: absolute; top: 200px; left: 200px; font-size: 18px; font-weight: bold; } </style> </head> <body> <div class="game-container"> <canvas id="gameCanvas" width="400" height="400"></canvas> <div class="score">Score: <span id="score">0</span></div> </div> <script> const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const blockSize = 20; const canvasSize = canvas.width / blockSize; let snake = [{ x: 5, y: 5 }]; let apple = { x: 5, y: 5 }; let dx = 0; let dy = 0; let score = 0; function drawSnake() { snake.forEach(segment => { ctx.fillStyle = "green"; ctx.fillRect(segment.x * blockSize, segment.y * blockSize, blockSize, blockSize); }); } function drawApple() { ctx.fillStyle = "red"; ctx.fillRect(apple.x * blockSize, apple.y * blockSize, blockSize, blockSize); } function moveSnake() { const head = { x: snake[0].x + dx, y: snake[0].y + dy }; snake.unshift(head); if (head.x === apple.x && head.y === apple.y) { score += 10; document.getElementById("score").textContent = score; createApple(); } else { snake.pop(); } } function createApple() { apple.x = Math.floor(Math.random() * canvasSize); apple.y = Math.floor(Math.random() * canvasSize); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function draw() { clearCanvas(); drawSnake(); drawApple(); } function update() { moveSnake(); draw(); } function main() { setInterval(update, 100); } main(); document.addEventListener("keydown", event => { switch (event.key) { case "ArrowUp": if (dy === 0) { dx = 0; dy = -1; } break; case "ArrowDown": if (dy === 0) { dx = 0; dy = 1; } break; case "ArrowLeft": if (dx === 0) { dx = -1; dy = 0; } break; case "ArrowRight": if (dx === 0) { dx = 1; dy = 0; } break; } }); </script> </body> </html>
Editor is loading...
Leave a Comment