snake

!DOCTYPE htmlhtml langzh-CNheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title贪吃蛇/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 100vh;background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;}h1 {color: #00ff88;margin-bottom: 10px;text-shadow: 0 0 10px #00ff88;}#score {color: #fff;font-size: 24px;margin-bottom: 20px;}#game {border: 3px solid #00ff88;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);}.controls {margin-top: 20px;color: #888;text-align: center;}.btn {margin-top: 15px;padding: 10px 30px;font-size: 18px;background: #00ff88;border: none;border-radius: 5px;color: #1a1a2e;cursor: pointer;font-weight: bold;}.btn:hover {background: #00cc6a;}/style/headbodyh1 贪吃蛇/h1div idscore得分0/divcanvas idgame width400 height400/canvasdiv classcontrolsp使用 ↑ ↓ ← → 或 WASD 控制方向/pp空格键暂停/pbutton classbtn onclickresetGame()重新开始/button/divscriptconst canvas document.getElementById(game);const ctx canvas.getContext(2d);const scoreEl document.getElementById(score);const gridSize 20;const tileCount canvas.width / gridSize;let snake [];let food {};let direction { x: 1, y: 0 };let nextDirection { x: 1, y: 0 };let score 0;let gameLoop null;let isPaused false;let gameSpeed 100;function initGame() {snake [{ x: 5, y: 10 },{ x: 4, y: 10 },{ x: 3, y: 10 }];direction { x: 1, y: 0 };nextDirection { x: 1, y: 0 };score 0;isPaused false;spawnFood();updateScore();}function spawnFood() {do {food {x: Math.floor(Math.random() * tileCount),y: Math.floor(Math.random() * tileCount)};} while (snake.some(seg seg.x food.x seg.y food.y));}function update() {direction { ...nextDirection };const head {x: snake[0].x direction.x,y: snake[0].y direction.y};if (head.x 0 || head.x tileCount || head.y 0 || head.y tileCount) {gameOver();return;}if (snake.some(seg seg.x head.x seg.y head.y)) {gameOver();return;}snake.unshift(head);if (head.x food.x head.y food.y) {score 10;updateScore();spawnFood();if (gameSpeed 50) gameSpeed - 2;} else {snake.pop();}}function draw() {ctx.fillStyle #1a1a2e;ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle #00ff88;snake.forEach((seg, index) {ctx.fillStyle index 0 ? #00ff88 : #00cc6a;ctx.fillRect(seg.x * gridSize, seg.y * gridSize, gridSize - 2, gridSize - 2);});ctx.fillStyle #ff6b6b;ctx.beginPath();ctx.arc(food.x * gridSize gridSize / 2,food.y * gridSize gridSize / 2,gridSize / 2 - 2,0,Math.PI * 2);ctx.fill();if (isPaused) {ctx.fillStyle rgba(0, 0, 0, 0.7);ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle #fff;ctx.font 30px Arial;ctx.textAlign center;ctx.fillText(暂停, canvas.width / 2, canvas.height / 2);}}function gameStep() {if (!isPaused) {update();draw();}}function startGame() {if (gameLoop) clearInterval(gameLoop);gameLoop setInterval(gameStep, gameSpeed);}function gameOver() {clearInterval(gameLoop);gameLoop null;ctx.fillStyle rgba(0, 0, 0, 0.8);ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle #ff6b6b;ctx.font 40px Arial;ctx.textAlign center;ctx.fillText(游戏结束!, canvas.width / 2, canvas.height / 2 - 20);ctx.fillStyle #fff;ctx.font 20px Arial;ctx.fillText(最终得分 score, canvas.width / 2, canvas.height / 2 20);}function updateScore() {scoreEl.textContent 得分 score;}function resetGame() {gameSpeed 100;initGame();draw();startGame();}document.addEventListener(keydown, (e) {const key e.key.toLowerCase();switch (key) {case arrowup:case w:if (direction.y 0) nextDirection { x: 0, y: -1 };break;case arrowdown:case s:if (direction.y 0) nextDirection { x: 0, y: 1 };break;case arrowleft:case a:if (direction.x 0) nextDirection { x: -1, y: 0 };break;case arrowright:case d:if (direction.x 0) nextDirection { x: 1, y: 0 };break;case :isPaused !isPaused;draw();break;}});initGame();draw();startGame();/script/body/html