科学教育

标题: 汪义博贪吃蛇 [打印本页]
作者: 汪义博    时间: 2025-10-14 13:59
标题: 汪义博贪吃蛇
帮我生成一个贪吃蛇网页代码
作者: kaia    时间: 2025-10-14 13:59
当你玩贪吃蛇游戏时，其实是一个小蛇在地图上不断移动，吃食物，长大。我们可以使用HTML、CSS和JavaScript来创建一个简单的贪吃蛇游戏。

首先，在HTML中创建一个画布：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>贪吃蛇游戏</title>
  7. <style>
  8.     #gameCanvas {
  9.         border: 1px solid black;
  10.     }
  11. </style>
  12. </head>
  13. <body>
  14.     <canvas id="gameCanvas" width="400" height="400"></canvas>
  15.     <script src="snake.js"></script>
  16. </body>
  17. </html>
复制代码


接下来，创建一个JavaScript文件`snake.js`，在里面编写贪吃蛇的游戏逻辑：

  1. const canvas = document.getElementById("gameCanvas");
  2. const ctx = canvas.getContext("2d");

  4. const box = 20;
  5. let snake = [{x: 10, y: 10}];
  6. let food = {x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box};
  7. let score = 0;
  8. let dir = "right";

  10. function draw() {
  11.     ctx.clearRect(0, 0, canvas.width, canvas.height);

  13.     // 绘制蛇
  14.     snake.forEach(segment => {
  15.         ctx.fillStyle = "green";
  16.         ctx.fillRect(segment.x, segment.y, box, box);
  17.     });

  19.     // 绘制食物
  20.     ctx.fillStyle = "red";
  21.     ctx.fillRect(food.x, food.y, box, box);

  23.     // 绘制得分
  24.     ctx.fillStyle = "black";
  25.     ctx.font = "20px Arial";
  26.     ctx.fillText("Score: " + score, 10, 30);
  27. }

  29. function moveSnake() {
  30.     const head = {x: snake[0].x, y: snake[0].y};

  32.     // 根据方向移动蛇头
  33.     if (dir === "up") head.y -= box;
  34.     if (dir === "down") head.y += box;
  35.     if (dir === "left") head.x -= box;
  36.     if (dir === "right") head.x += box;

  38.     // 检查是否吃到食物
  39.     if (head.x === food.x && head.y === food.y) {
  40.         score++;
  41.         food = {x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box};
  42.     } else {
  43.         snake.pop(); // 移除蛇尾
  44.     }

  46.     // 添加新的蛇头
  47.     snake.unshift(head);

  49.     // 检查游戏结束条件
  50.     if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || checkCollision()) {
  51.         clearInterval(game);
  52.         alert("Game Over! Your score: " + score);
  53.     }
  54. }

  56. function checkCollision() {
  57.     return snake.slice(1).some(segment => segment.x === snake[0].x && segment.y === snake[0].y);
  58. }

  60. document.addEventListener("keydown", event => {
  61.     const key = event.keyCode;
  62.     if (key === 37 && dir !== "right") dir = "left";
  63.     if (key === 38 && dir !== "down") dir = "up";
  64.     if (key === 39 && dir !== "left") dir = "right";
  65.     if (key === 40 && dir !== "up") dir = "down";
  66. });

  68. let game = setInterval(() => {
  69.     moveSnake();
  70.     draw();
  71. }, 100);
复制代码


以上代码实现了一个简单的贪吃蛇游戏，游戏会不断运行，玩家可以使用键盘上的方向键来控制蛇的移动方向，吃到食物后蛇会变长，当蛇头碰到墙壁或自身时，游戏结束并弹出得分提示。

你可以将这段代码保存为`index.html`和`snake.js`文件，然后用浏览器打开`index.html`文件，就可以开始玩自己生成的贪吃蛇游戏啦！希望你玩得开心！如果有什么问题，再来问我哦！



欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2