贪吃蛇游戏

创作时间:

作者:

@小白创作中心

贪吃蛇游戏

引用

来源

https://cloud.tencent.com/developer/article/2447634?policyId=1003

本文将介绍如何使用腾讯云AI代码助手开发一个简单的HTML5贪吃蛇小游戏。通过这个项目实践，你将了解如何利用AI工具加速开发过程，并掌握H5游戏开发的基本技巧。

前言

市面上有很多AI编程助手，可以帮你提升开发效率。最近发现了一款很好用的国产AI编程助手，那就是——腾讯云AI代码助手。本文将介绍如何使用它来开发一款HTML5版本的贪吃蛇小游戏。从项目需求分析开始，到具体实现步骤，再到总结，带你一步步实现这个经典游戏。

需求分析

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

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

AI助手开发步骤

对于这样游戏开发需求，可以给出如下的Prompt：

请帮我开发一款贪吃蛇小游戏，技术使用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>

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