为“弹球”示例添加新功能

在上一篇文章字节青训营前端实践01里我们构建了一个弹球程序，接下来我们继续给它添加一些有趣的功能。

项目简介

我们的弹球 demo 很有趣，但是现在我们想让它更具有互动性，我们为它添加一个由玩家控制的“恶魔圈”，如果恶魔圈抓到弹球会把它会吃掉。我们还想测验你面向对象的水平，首先创建一个通用 Shape() 对象，然后由它派生出弹球和恶魔圈。最后，我们为 demo 添加一个计分器来记录剩下的球数。

程序最终会像这样：ballWithEvil

代码实现

创建我们的新对象

首先，改变你现有的构造器 Ball() 使其成为构造器 Shape() 并添加一个新的构造器 Ball() ：

  1. 构造器 Shape() 应该像构造器 Ball() 那样的方式定义 x, y, velX, 和 velY 属性，但不包括 color 和 size 。
  2. 还应该定义一个叫 exists 的新属性，用来标记球是否存在于程序中（没有被恶魔圈吃掉）。这应该是一个布尔型（(true/false）。
  3. 构造器 Ball() 应该从构造器 Shape() 继承 x, y, velX, velY,和 exists 属性。
  4. 构造器 Ball() 还应该像最初的构造器 Ball() 那样定义一个 color 和一个size 属性。

draw(), update(), 和collisionDetect() 方法定义应保持不变。

你还需要为 new Ball() { … } 构造器添加第五个参数—— exists，且值为 true。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Shape(x, y, velX, velY, exists) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.exists = exists;
}

// 定义 Ball 构造器

function Ball(x, y, velX, velY, color, size) {
  Shape.call(this, x, y, velX, velY, true);
  this.color = color;
  this.size = size;
}

定义恶魔圈 EvilCircle()

现在是时候来看看那个坏蛋了——恶魔圈 EvilCircle()！
EvilCircle() 构造器应该从Shape() 继承 x, y, 和 exists ，velX 和 velY 要恒为 20。

它还应该定义自己的一些属性，如：
color —— ‘white’
size —— 10

1
2
3
4
5
function EvilCircle() {
  Shape.call(this, Math.floor(width / 2), Math.floor(height / 2), 40, 40, true);
  this.color = 'white';
  this.size = 50;
};

定义 EvilCircle() 的方法

EvilCircle() 应该有以下四个方法：

draw()

  1. 这个方法和 Ball()'s draw() 方法有着相同的目的：它们把都是对象的实例画在画布上（canvas） 。它们实现的方式差不多，所以你可以先复制 Ball.prototype.draw 的定义。然后你需要做下面的修改：

  2. 我们不想让恶魔圈是实心的，而是一个圈或者说是环。你可以通过将 fillStyle 和 fill() 修改为 strokeStyle 和 stroke()而实现这个效果。

  3. 我们还想让这个圈更厚一点，从而使你能更好地辨认它。可以在调用 beginPath() 的后面给 lineWidth 赋值实现这个效果。（赋值为 3 就可以了）

1
2
3
4
5
6
7
EvilCircle.prototype.draw = function () {
  ctx.beginPath();
  ctx.lineWidth = 3;
  ctx.strokeStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.stroke();
};
checkBounds()

  1. 这个方法和 Ball() 的 update() 函数做相同的事情—— 查看恶魔圈是否将要超出屏幕的边界，并且禁止它超出。同样，你可以直接复制 Ball.prototype.update 的定义，但是你需要做一些修改：

  2. 我们不想要在每一帧中自动的更新恶魔圈的位置，因为我们会用键盘来控制它的移动。

  3. 在 if() 语句中，如果检测为真（即小恶魔圈超出边界），我们不需要更新 velX/velY；取而代之的是，我们想要修改 x/y 的值，使恶魔圈稍微地弹回屏幕。增加或减去（根据实际判断）恶魔圈 size 的值即可实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
EvilCircle.prototype.checkBounds = function () {
  if ((this.x + this.size) >= width) {
    this.x -= this.size;
  }

  if ((this.x - this.size) <= 0) {
    this.x += this.size;
  }

  if ((this.y + this.size) >= height) {
    this.y -= this.size;
  }

  if ((this.y - this.size) <= 0) {
    this.y += this.size;
  }

};
setControls()

这个方法将会一个 onkeydown 的事件监听器给 window 对象，这样当特定的键盘按键按下的时候，我们就可以移动恶魔圈。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
EvilCircle.prototype.setControls = function () {
  window.onkeydown = (e) => {
    switch (e.key) {
      case "a":
        this.x -= this.velX;
        break;
      case "ArrowLeft":
        this.x -= this.velX;
        break;
      case "d":
        this.x += this.velX;
        break;
      case "ArrowRight":
        this.x += this.velX;
        break;
      case "w":
        this.y -= this.velY;
        break;
      case "ArrowUp":
        this.y -= this.velY;
        break;
      case "s":
        this.y += this.velY;
        break;
      case "ArrowDown":
        this.y += this.velY;
        break;
    }
  };
};
collisionDetect()

这个方法和 Ball()’s collisionDetect() 方法很相似，所以你可以从它那里复制过来作为新方法的基础。但有一些不同之处：

  • 在外层的 if 语句中，你不需要再检验循环到的小球是否是当前 collisionDetect() 所在的对象 — 因为它不再是一个小球了，它是恶魔圈！而是检查小球是否存在（你可以通过哪个属性实现这个呢？）。如果小球不存在，说明它已经被恶魔圈吃掉了，那么就不需要再检测它是否与恶魔圈碰撞了。
  • 在里层的 if 语句中，你不再需要在碰撞被检测到时去改变对象的颜色 — 而是需要将与恶魔圈发生碰撞的小球设置为不存在.
1
2
3
4
5
6
7
8
9
10
11
12
13
Ball.prototype.collisionDetect = function () {
  for (let j = 0; j < balls.length; j++) {
    if (this !== balls[j] && balls[j] === true) {
      const dx = this.x - balls[j].x;
      const dy = this.y - balls[j].y;
      const distance = Math.sqrt(dx * dx + dy * dy);

      if (distance < this.size + balls[j].size) {
        balls[j].color = this.color = randomColor();
      }
    }
  }
};
把恶魔圈带到程序中

现在我们已经定义了恶魔圈，我们需要让它显示到我们的屏幕中。为了做这件事，你需要修改一下 loop() 函数：

首先，创建一个新的恶魔圈的对象实例（指定必需的参数），然后调用它的 setControls() 方法。这两件事你只需要做一次，不需要放在 loop 的循环中。
在你每一次遍历小球并调用 draw(), update(), 和 collisionDetect() 函数的地方进行修改，使这些函数只会在小球存在时被调用。
在每个 loop 的循环中调用恶魔圈实例的方法 draw(), checkBounds(), 和collisionDetect() 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const evilCircle = new EvilCircle();
evilCircle.setControls();

// 定义一个循环来不停地播放

function loop() {
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  ctx.fillRect(0, 0, width, height);

  evilCircle.draw();
  evilCircle.checkBounds();
  evilCircle.collisionDetect();

  let res = 0;
  for (let i = 0; i < balls.length; i++) {
    if (balls[i].exists === true) {
      balls[i].draw();
      balls[i].update();
      balls[i].collisionDetect();
      res++;
    }
  }

  ballLeft.textContent = "还剩" + res + "个球";
  if (res == 0) {
    alert("游戏结束了")
    return;
  }

  requestAnimationFrame(loop);
}

loop();