<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } #game-container { text-align: center;
这是一个基础的贪吃蛇游戏实现，代码结构清晰。以下是完整的游戏代码和优化建议： ```javascript // 游戏初始化部分保持不变... // 生成食物位置 function generateFood() { const foodX = Math.floor(Math.random() * (canvas.width / boxSize)) * boxSize; const foodY = Math.floor(Math.random() * (canvas.height / boxSize)) * boxSize; // 确保食物不会出现在蛇身上 const onSnake = snake.some(segment => segment.x === foodX && segment.y === foodY); return onSnake ? generateFood() : { x: foodX, y: foodY }; } // 绘制食物 function drawFood() { ctx.fillStyle = "red"; ctx.fillRect(food.x, food.y, boxSize, boxSize); } // 移动蛇 function moveSnake() { const head = { ...snake[0] }; switch (direction) { case "UP": head.y -= boxSize; break; case "DOWN": head.y += boxSize; break; case "LEFT": head.x -= boxSize; break; case "RIGHT": head.x += boxSize; break; } snake.unshift(head); // 检查是否吃到食物 if (head.x === food.x && head.y === food.y) { score += 10; scoreElement.textContent = `分数: ${score}`; food = generateFood(); } else { snake.pop(); // 没吃到食物则移除尾部 } } // 绘制蛇 function drawSnake() { snake.forEach((segment, index) => { ctx.fillStyle = index === 0 ? "#4CAF50" : "#8BC34A"; ctx.fillRect(segment.x, segment.y, boxSize, boxSize); }); } // 碰撞检测 function checkCollision() { const head = snake[0]; // 撞墙检测 if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) { gameOver(); } // 撞自身检测（从第1节开始检查） for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { gameOver(); } } } // 游戏结束 function gameOver() { gameRunning = false; ctx.fillStyle = "white"; ctx.font = "30px Arial"; ctx.textAlign = "center"; ctx.fillText("游戏结束!", canvas.width/2, canvas.height/2); } // 改变方向 function changeDirection(event) { const key = event.keyCode; const goingUp = direction === "UP"; const goingDown = direction === "DOWN"; const goingLeft = direction === "LEFT"; const goingRight = direction === "RIGHT"; if (key === 37 && !goingRight) direction = "LEFT"; if (key === 38 && !goingDown) direction = "UP"; if (key === 39 && !goingLeft) direction = "RIGHT"; if (key === 40 && !goingUp) direction = "DOWN"; } // 重新开始游戏 function restartGame() { snake = [{ x: 9 * boxSize, y: 10 * boxSize }]; direction = "RIGHT"; food = generateFood(); score = 0; scoreElement.textContent = `分数: ${score}`; gameRunning = true; clearCanvas(); gameLoop(); } // 开始游戏 gameLoop(); ``` 优化建议： 1. 食物生成函数使用递归确保不会出现在蛇身上 2. 蛇头使用不同颜分 3. 方向控制加入防止180度转弯的逻辑 需要注意的逻辑点： 1. 蛇移动时先创建新头部再检查是否吃到食物 2. 碰撞检测需要区分墙壁和自身碰撞 3. 游戏循环使用setTimeout而非requestAnimationFrame，适合这种基于网格的游戏 [2025-05-03 22:07:44 | AI写代码神器 | 891点数解答]
- ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可以成为千一的恋人吗？</title> <style> body { display: flex; justify-content: center; align-items: center; height:100vh; margin: 0; background-color: #ACDEFF; font-family: 'Arial', sans-serif; text-align: center; transition: background-color 0.5s; } .container { background-color: #F9FFFF; padding: 30px; border-radius: 15px; box-shadow: 0 4px8px rgba(0,0,0, 0.1（1271点数解答 | 2025-07-26 08:49:50）101
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } #game-container { text-align: center; （891点数解答 | 2025-05-03 22:07:44）118
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>牛逼美女</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { text-align: center; font-family: 'Arial', sans-serif; } （180点数解答 | 2025-02-20 10:37:44）138
- <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <style> body{display:flex;justify-content:center; margin-top:200px;background-color:#171715;} #container{ display: flex; justify-content: center; align-items: flex-start; height: 500px; } #canvas3d{ width: 500px; height: 500px; } </style> <body> <div id='container'> <canvas i（35点数解答 | 2024-11-09 10:44:18）179
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击名字触发动画</title> <style> body { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .name-bu（180点数解答 | 2025-03-15 19:49:13）127
- html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>腹肌锻炼打卡</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #fff; padding: 20px; border-radius: 5px; box-shadow（189点数解答 | 2025-03-05 21:41:57）183
- ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小女孩换装游戏</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5e6ff; font-family: Arial, sans-serif; } .game-container（1276点数解答 | 2025-06-12 20:44:34）73
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节约粮食，珍惜粮食 - 创意海报</title> <style> body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { （766点数解答 | 2025-09-14 08:37:51）36
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>幸运大转盘</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; background-color: #f0f0f0; } .wheel-container { position: relative; width: 300px; （389点数解答 | 2025-05-01 16:32:00）163
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>股权结构可视化</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .chart-container { w（163点数解答 | 2025-05-17 14:03:20）117
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>笋鱼输入效果</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #inputBox { padding: 10px; fon（159点数解答 | 2025-03-19 23:40:53）116
- <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>哪吒红包封面</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: 'Arial', sans-serif; } .red-packet { position: relative; width: 300px; （455点数解答 | 2025-02-18 20:00:42）117