借助 AI 写游戏：使用 ChatGPT 生成的 Cocos Creator 代码创建回合制文字 RPG 游戏（二）

前端

2024-02-15 05:40:38

在上一节中，我们已经通过 ChatGPT 生成了 Cocos Creator 代码并构建了回合制文字 RPG 游戏的基本框架。现在，我们将继续完善游戏，添加 UI 布局并编写点击事件。

简略的 UI 布局

首先，我们需要创建一个简单的 UI 布局，以便玩家可以与游戏进行交互。我们将使用 Cocos Creator 的 UI 系统来创建 UI 布局。

在 Hierarchy 面板中，右键单击 Canvas 节点，然后选择 Create > UI > Button 。这将在场景中创建一个按钮节点。

双击按钮节点以打开其属性面板。在 Inspector 面板中，将 Text 属性设置为 "攻击"。

接下来，我们将创建一个文本标签节点来显示玩家和怪物的血量。在 Hierarchy 面板中，右键单击 Canvas 节点，然后选择 Create > UI > Label 。这将在场景中创建一个标签节点。

双击标签节点以打开其属性面板。在 Inspector 面板中，将 Text 属性设置为 "玩家血量：100"。

复制标签节点并将其粘贴到场景中。将第二个标签节点的 Text 属性设置为 "怪物血量：100"。

现在，我们已经创建了一个简单的 UI 布局，以便玩家可以与游戏进行交互。

给按钮挂上点击事件

接下来，我们需要给按钮挂上点击事件，以便玩家可以点击按钮来攻击怪物。

在 Hierarchy 面板中，单击按钮节点。在 Inspector 面板中，单击 Add Component 按钮，然后选择 Event Handler > Button 。这将在按钮节点上添加一个按钮事件处理组件。

在 Button Events 部分，单击 On Click 事件。这将打开一个脚本编辑器。

在脚本编辑器中，添加以下代码：

function onAttackButtonClick() {
  // 获取玩家和怪物的血量
  var playerHp = parseInt(cc.find("Canvas/PlayerHpLabel").getComponent(cc.Label).string.split(":")[1]);
  var monsterHp = parseInt(cc.find("Canvas/MonsterHpLabel").getComponent(cc.Label).string.split(":")[1]);

  // 玩家攻击怪物
  monsterHp -= 10;

  // 更新怪物的血量
  cc.find("Canvas/MonsterHpLabel").getComponent(cc.Label).string = "怪物血量：" + monsterHp;

  // 怪物攻击玩家
  playerHp -= 10;

  // 更新玩家的血量
  cc.find("Canvas/PlayerHpLabel").getComponent(cc.Label).string = "玩家血量：" + playerHp;
}

这段代码的功能是：

获取玩家和怪物的血量。
玩家攻击怪物，怪物的血量减少 10 点。
更新怪物的血量。
怪物攻击玩家，玩家的血量减少 10 点。
更新玩家的血量。

现在，运行游戏，点击按钮，你会发现玩家和怪物同时扣血了。

让怪物先扣血

我们希望怪物在战斗中先扣血。为了实现这一点，我们需要修改代码。

function onAttackButtonClick() {
  // 获取玩家和怪物的血量
  var playerHp = parseInt(cc.find("Canvas/PlayerHpLabel").getComponent(cc.Label).string.split(":")[1]);
  var monsterHp = parseInt(cc.find("Canvas/MonsterHpLabel").getComponent(cc.Label).string.split(":")[1]);

  // 怪物攻击玩家
  playerHp -= 10;

  // 更新玩家的血量
  cc.find("Canvas/PlayerHpLabel").getComponent(cc.Label).string = "玩家血量：" + playerHp;

  // 玩家攻击怪物
  monsterHp -= 10;

  // 更新怪物的血量
  cc.find("Canvas/MonsterHpLabel").getComponent(cc.Label).string = "怪物血量：" + monsterHp;
}