6.8 KiB

Raw Permalink Blame History Unescape Escape

构建太空游戏第五部分：得分和生命

课前测验

在本课中，你将学习如何为游戏添加得分功能以及计算生命值。

在屏幕上绘制文本

为了能够在屏幕上显示游戏得分，你需要知道如何在屏幕上放置文本。答案是使用画布对象的 fillText() 方法。你还可以控制其他方面，比如使用什么字体、文本的颜色，甚至文本的对齐方式（左对齐、右对齐、居中）。下面是一些代码示例，用于在屏幕上绘制文本。

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ 阅读更多关于如何在画布上添加文本的信息，并随意让你的文本看起来更有趣！

生命值，作为游戏概念

在游戏中，生命值的概念只是一个数字。在太空游戏的背景下，通常会分配一组生命值，当你的飞船受到伤害时，生命值会逐个减少。如果能用图形化的方式展示生命值，比如小型飞船或心形图标，而不是简单的数字，会更直观。

要构建的内容

让我们为你的游戏添加以下内容：

游戏得分：每摧毁一艘敌方飞船，英雄应该获得一些分数，我们建议每艘飞船奖励100分。游戏得分应显示在屏幕左下角。
生命值：你的飞船有三条生命。每当敌方飞船与你碰撞时，你会失去一条生命。生命值应显示在屏幕右下角，并由以下图形表示。

推荐步骤

找到在 your-work 子文件夹中为你创建的文件。它应该包含以下内容：

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

通过输入以下命令启动你的项目：

cd your-work
npm start

上述命令将在地址 http://localhost:5000 上启动一个 HTTP 服务器。打开浏览器并输入该地址，现在它应该渲染英雄和所有敌人，并且当你按下左右箭头时，英雄会移动并可以击落敌人。

添加代码

复制所需资源 从 solution/assets/ 文件夹复制到 your-work 文件夹；你需要添加一个 life.png 资源。在 window.onload 函数中添加 lifeImg：
```
lifeImg = await loadTexture("assets/life.png");
```

将 lifeImg 添加到资源列表中：

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

添加变量。添加代码以表示你的总得分（初始为0）和剩余生命值（初始为3），并在屏幕上显示这些分数。

扩展 updateGameObjects() 函数。扩展 updateGameObjects() 函数以处理敌人碰撞：

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

添加生命值和得分。

初始化变量。在 Hero 类中的 this.cooldown = 0 下设置生命值和得分：
```
this.life = 3;
this.points = 0;
```

在屏幕上绘制变量。将这些值绘制到屏幕上：

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

将方法添加到游戏循环中。确保在 window.onload 函数中将这些函数添加到 updateGameObjects() 下：
```
drawPoints();
drawLife();
```

实现游戏规则。实现以下游戏规则：

每次英雄与敌人碰撞，扣除一条生命。

扩展 Hero 类以实现生命值扣除：

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

每次激光击中敌人，游戏得分增加100分。

扩展 Hero 类以实现得分增加：

  incrementPoints() {
    this.points += 100;
  }

将这些函数添加到碰撞事件发射器中：

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ 进行一些研究，了解其他使用 JavaScript/Canvas 创建的游戏。它们有哪些共同特点？

完成这部分工作后，你应该能在屏幕右下角看到小型“生命”飞船，左下角看到得分，并且当你与敌人碰撞时生命值会减少，当你击中敌人时得分会增加。干得好！你的游戏已经接近完成。

🚀 挑战

你的代码几乎完成了。你能想象下一步该做什么吗？

课后测验

复习与自学

研究一些可以增加和减少游戏得分和生命值的方法。有一些有趣的游戏引擎，比如 PlayFab。使用这些引擎如何提升你的游戏？

作业

构建一个得分游戏

免责声明：
本文档使用AI翻译服务Co-op Translator进行翻译。尽管我们努力确保准确性，但请注意，自动翻译可能包含错误或不准确之处。应以原始语言的文档作为权威来源。对于关键信息，建议使用专业人工翻译。因使用本翻译而引起的任何误解或误读，我们概不负责。

6.8 KiB Raw Permalink Blame History Unescape Escape