腾讯云AI代码助手实战：HTML5版本贪吃蛇小游戏

原创

喵喵侠

发布于 2024-08-25 20:44:02

1480

发布于 2024-08-25 20:44:02

前言

你好，我是喵喵侠。市面上有很多AI编程助手，可以帮你提升开发效率。最近我发现了一款很好用的国产AI编程助手，那就是——腾讯云AI代码助手。我想用它来开发一款小游戏，正好贪吃蛇这款游戏简单易懂，也富有挑战性，就选它了。我会在这篇文章中，讲述我是如何用它来指导我开发HTML5版本贪吃蛇小游戏的。我将从项目需求分析开始，到具体实现步骤，再到总结，带你一步步实现这个经典游戏。

需求分析

在开始开发之前，我们首先要明确游戏的基本需求：

游戏界面：需要一个固定大小的画布（canvas）来显示游戏。
蛇的移动：玩家通过键盘方向键控制蛇的移动方向。
食物生成：随机生成食物，蛇吃到食物后，长度增加并得分。
碰撞检测：蛇撞到墙壁或自己的身体时，游戏结束。

上面就是核心的功能，但是我们还需要细化一下。

AI助手开发步骤

对于这样游戏开发需求，我给出了如下的Prompt，输入到了腾讯云AI代码助手。

请帮我开发一款贪吃蛇小游戏，技术使用html5+canvas。
具体的实现细节如下：
1. 第一次进入页面，出现开始游戏按钮；
2. 点击开始游戏，小蛇移动；
3. 小蛇移动的方向，可以通过键盘上的上下左右来改变；
4. 小蛇1秒钟只能移动一个格子；
5. 画布上一开始会随机生成一个食物，小蛇每吃一个食物，尾巴长度加1；
6. 小蛇每次吃到一个食物后，这个食物会消失，随机画布上随机位置出现新的食物，新出现的食物不能与小蛇占据面积重叠；
7. 小蛇撞到边界后，游戏结束，记录总分。
---
以上这些是我想到的逻辑，不完善的你要补全，功能要全，能够完整体验。你要写一个完整的游戏。

然后很快就得到了对应的实现代码：

具体的实现代码如下：

<!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;
    }

    canvas {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    const box = 20; // 定义蛇和食物的大小
    let snake = []; // 定义蛇的初始位置
    snake[0] = { x: 9 * box, y: 10 * box };

    let food = {
      x: Math.floor(Math.random() * 19 + 1) * box,
      y: Math.floor(Math.random() * 19 + 1) * box
    };

    let score = 0;
    let direction;

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

      // 绘制蛇
      for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? 'green' : 'white'; // 蛇头和身体颜色不同
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
        ctx.strokeStyle = 'red';
        ctx.strokeRect(snake[i].x, snake[i].y, box, box);
      }

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

      // 显示分数
      ctx.fillStyle = 'black';
      ctx.font = '20px Arial';
      ctx.fillText('Score: ' + score, box, box);

      // 移动蛇
      let snakeX = snake[0].x;
      let snakeY = snake[0].y;

      if (direction === 'LEFT') snakeX -= box;
      if (direction === 'UP') snakeY -= box;
      if (direction === 'RIGHT') snakeX += box;
      if (direction === 'DOWN') snakeY += box;

      // 如果蛇吃到食物
      if (snakeX === food.x && snakeY === food.y) {
        score++;
        food = {
          x: Math.floor(Math.random() * 19 + 1) * box,
          y: Math.floor(Math.random() * 19 + 1) * box
        };
      } else {
        snake.pop(); // 移除蛇的尾巴
      }

      // 新蛇头
      let newHead = {
        x: snakeX,
        y: snakeY
      };

      // 检查碰撞
      if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
        clearInterval(game);
        alert('游戏结束');
      }

      snake.unshift(newHead);
    }

    function collision(head, array) {
      for (let i = 0; i < array.length; i++) {
        if (head.x === array[i].x && head.y === array[i].y) {
          return true;
        }
      }
      return false;
    }

    document.addEventListener('keydown', (event) => {
      if (event.keyCode === 37 && direction !== 'RIGHT') {
        direction = 'LEFT';
      } else if (event.keyCode === 38 && direction !== 'DOWN') {
        direction = 'UP';
      } else if (event.keyCode === 39 && direction !== 'LEFT') {
        direction = 'RIGHT';
      } else if (event.keyCode === 40 && direction !== 'UP') {
        direction = 'DOWN';
      }
    });

    let game = setInterval(draw, 100);

  </script>
</body>

</html>

游戏的界面如下，按下方向键就可以开始移动小蛇了，撞墙显示游戏结束。