Skip to content

游戏完善

本节目标

让贪吃蛇从"能玩"变成"好玩":加上计分、速度递增、游戏结束界面和重新开始功能。

加上计分系统

在聊天面板中输入:

给贪吃蛇加上计分功能。每吃一个食物得 10 分,分数显示在游戏区域上方。

输入计分功能的 prompt

接受更改后,你应该能看到游戏上方出现了分数显示。

速度递增

现在蛇的速度是固定的,吃了 10 个食物和吃了 1 个食物一样快。让游戏更有挑战性:

随着分数增加,蛇的移动速度逐渐变快。每吃 5 个食物,速度提升一级。

游戏结束与重新开始

目前游戏结束时可能只是弹了个提示就卡住了。让它更完善:

游戏结束时,在游戏区域中央显示"Game Over"和最终分数,下面有一个"再来一局"按钮。点击按钮或按空格键可以重新开始。

游戏结束界面,显示分数和重新开始按钮

加上最高分记录

在页面上显示历史最高分。每次游戏结束时,如果当前分数超过最高分,就更新最高分。最高分在刷新页面后仍然保留。

AI 会使用浏览器的本地存储(localStorage)来保存最高分。你不需要理解这个技术,只需要知道刷新页面后最高分不会消失。

一次性说多个需求

你可能注意到了,上面我们是一个功能一个功能地加。其实你也可以一次性把多个需求说完:

给贪吃蛇加上以下功能:

  1. 计分系统,每个食物 10 分,显示在上方
  2. 速度递增,每 5 个食物加速一次
  3. 游戏结束界面,显示分数和重新开始按钮
  4. 历史最高分记录,刷新不消失

这两种方式都可以。一次性说的好处是效率高,逐个说的好处是每一步都能验证。选择你觉得舒服的方式

常见问题

速度增加太快,变得不可控

告诉 AI:

速度增加太快了,到后面根本没法玩。请让速度增长更平缓一些,而且设一个最大速度上限

重新开始后分数没有清零

告诉 AI:

重新开始游戏后分数没有归零,还是上一局的分数,请修复

最高分没有保存

告诉 AI:

刷新页面后最高分变回 0 了,请确保用 localStorage 保存

下一步

游戏已经很完善了。接下来我们要学一个新东西——MCP。它能让 AI 直接连接外部服务,比如存储在线排行榜。