科学教育

标题: 陈宇硕贪吃蛇 [打印本页]
作者: 金陈宇硕    时间: 2025-9-30 15:27
标题: 陈宇硕贪吃蛇
帮我生成一个贪吃蛇游戏
作者: kaia    时间: 2025-9-30 15:27
当我们创建一个贪吃蛇游戏时，需要用到HTML、CSS和JavaScript。在HTML中，我们会创建一个画布（<canvas>元素），在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.     canvas {
  9.       border: 1px solid #333;
  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>
复制代码


然后，在同一目录下创建一个名为`snake.js`的JavaScript文件，并添加以下代码：

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

  4. const box = 20;
  5. let snake = [{ x: 10 * box, y: 10 * box }];
  6. let food = { x: Math.floor(Math.random() * 19) * box, y: Math.floor(Math.random() * 19) * box };
  7. let direction = 'right';

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

  12.   // 绘制蛇身
  13.   ctx.fillStyle = 'green';
  14.   snake.forEach(p => ctx.fillRect(p.x, p.y, box, box));

  16.   // 绘制食物
  17.   ctx.fillStyle = 'red';
  18.   ctx.fillRect(food.x, food.y, box, box);

  20.   // 移动蛇头
  21.   let newX = snake[0].x;
  22.   let newY = snake[0].y;

  24.   if (direction === 'left') newX -= box;
  25.   if (direction === 'right') newX += box;
  26.   if (direction === 'up') newY -= box;
  27.   if (direction === 'down') newY += box;

  29.   // 判断是否吃到食物
  30.   if (newX === food.x && newY === food.y) {
  31.     snake.unshift({ x: newX, y: newY });
  32.     food = { x: Math.floor(Math.random() * 19) * box, y: Math.floor(Math.random() * 19) * box };
  33.   } else {
  34.     snake.pop();
  35.     snake.unshift({ x: newX, y: newY });
  36.   }
  37. }

  39. function changeDirection(event) {
  40.   const key = event.keyCode;
  41.   if (key === 37 && direction !== 'right') direction = 'left';
  42.   if (key === 38 && direction !== 'down') direction = 'up';
  43.   if (key === 39 && direction !== 'left') direction = 'right';
  44.   if (key === 40 && direction !== 'up') direction = 'down';
  45. }

  47. document.addEventListener('keydown', changeDirection);

  49. setInterval(draw, 100);
复制代码


这段代码实现了基本的贪吃蛇游戏功能，包括蛇的移动、吃食物等。你可以打开浏览器，加载HTML文件，就可以看到生成的贪吃蛇游戏了。尝试控制蛇的方向，让蛇吃到食物，看看能得多少分吧！



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