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

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

项目简介

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

程序最终会像这样：

代码实现

创建我们的新对象

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

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

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

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

定义恶魔圈 EvilCircle()

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

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

定义 `EvilCircle()` 的方法

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

draw()

这个方法和 Ball()'s draw() 方法有着相同的目的：它们把都是对象的实例画在画布上（canvas）。它们实现的方式差不多，所以你可以先复制 Ball.prototype.draw 的定义。然后你需要做下面的修改：
我们不想让恶魔圈是实心的，而是一个圈或者说是环。你可以通过将 fillStyle 和 fill() 修改为 strokeStyle 和 stroke()而实现这个效果。
我们还想让这个圈更厚一点，从而使你能更好地辨认它。可以在调用 beginPath() 的后面给 lineWidth 赋值实现这个效果。（赋值为 3 就可以了）

checkBounds()

这个方法和 Ball() 的 update() 函数做相同的事情—— 查看恶魔圈是否将要超出屏幕的边界，并且禁止它超出。同样，你可以直接复制 Ball.prototype.update 的定义，但是你需要做一些修改：
我们不想要在每一帧中自动的更新恶魔圈的位置，因为我们会用键盘来控制它的移动。
在 if() 语句中，如果检测为真（即小恶魔圈超出边界），我们不需要更新 velX/velY；取而代之的是，我们想要修改 x/y 的值，使恶魔圈稍微地弹回屏幕。增加或减去（根据实际判断）恶魔圈 size 的值即可实现。

setControls()

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

collisionDetect()

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

在外层的 if 语句中，你不需要再检验循环到的小球是否是当前 collisionDetect() 所在的对象 — 因为它不再是一个小球了，它是恶魔圈！而是检查小球是否存在（你可以通过哪个属性实现这个呢？）。如果小球不存在，说明它已经被恶魔圈吃掉了，那么就不需要再检测它是否与恶魔圈碰撞了。
在里层的 if 语句中，你不再需要在碰撞被检测到时去改变对象的颜色 — 而是需要将与恶魔圈发生碰撞的小球设置为不存在.

把恶魔圈带到程序中

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

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

字节青训营前端实践02