Learn web development

向“弹跳球”演示程序添加新功能

在此次评估中, 你需要将前面文章中的“弹跳球”演示程序作为模板,添加一些新的有趣的功能。

前提: 在尝试此评估前,你应该已经学习了本模块的所有文章。
目的: 测试你对 JavaScript对象和面向对象结构的理解。

起点

为了开始本评估,需要你将最后一篇文章中的  index-finished.html, style.cssmain-finished.js复制下来,保存到你本地的电脑中。

注意:  你也可以使用像 JSBinThimble这样的网站来进行你的评估。 你可以将HTML,CSS和JavaScript粘贴到它们之一的在线编辑器中。 如果您正在使用的在线编辑器没有单独的JavaScript / CSS板块,请随意将它们嵌入HTML页面内的<script>/<style> 元素。

项目简介

我们的“弹跳球”演示程序很有趣, 但是现在我们想通过添加一个由玩家控制的恶魔圈来使它更具有互动性,恶魔圈会吃掉套住的弹跳球。我们也想通过创建一个可让我们的弹跳球和恶魔圈继承的通用的Shape() 对象来测试你的创建对象的能力。最后,我们要添加一个分数计数器来记录剩下的球数。

下面的截图能让你知道完成的程序应该是什么样的:

为了给你更多的想法,可以看看完成的例子 finished example(不要偷看源代码!)

步骤

以下各节介绍你需要完成的步骤。

创建我们的新对象

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

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

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

你还需要为new Ball() ( ... ) 的构造方法 添加第五个参数— exists 参数, 且值为 true.

到这里, 尝试重新加载代码(运行程序) — 程序(和我们重新创建的对象)应该像之前那样工作。

定义恶魔圈的方法EvilCircle()

现在是时候来看看那个坏蛋了— 恶魔圈EvilCircle()! 我们的游戏中只会有一个恶魔圈,但我们仍然要使用继承自 Shape() 的构造器来定义它,这是为让你得到锻炼。 之后你可能会想再添加一个由另一个玩家控制的恶魔圈到程序中,或者有几个电脑控制的恶魔圈。你可没法通过一个恶魔圈来掌管程序中的这个世界,但这个评估中就先只这么做吧。

EvilCircle() 构造器应该从Shape() 继承 x, y, 和 exists 。

它还应该定义自己的一些属性,如:

  • color'white'
  • size10
  • velX20
  • velY20

再次记得给你的 EvilCircle() 构造器的传递的参数中定义你继承的属性,并且给prototypeconstructor 属性设置适当的值。

定义EvilCircle()的方法

EvilCircle() 应该有四个方法,如下:

draw()

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

  • 我们不想让恶魔圈是实心的,而是一个圈或者说是环。你可以通过将fillStylefill() 修改为 strokeStyle 和 stroke()而实现这个效果。
  • 我们还想让这个圈更厚一点, 从而使你能更好地辨认它。 可以在调用beginPath()的后面给 lineWidth 赋值实现这个效果。(赋值为3就可以了)

checkBounds()

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

  • 删除最后两行 — 我们不想要在每一帧中自动的更新恶魔圈的位置,因为我们会以下面所述的方式移动它。
  • if() 语句中,如果检测为真(即小恶魔圈超出边界),我们不需要更新 velX/velY;取而代之的是,我们想要修改 x/y 的值,使恶魔圈稍微地弹回屏幕。增加或减去 (根据实际判断)恶魔圈 size 的值即可实现。

setControls()

这个方法将会一个 onkeydown 的事件监听器给 window 对象,这样当特定的键盘按键按下的时候,我们就可以移动恶魔圈。下面的代码块应该放在方法的定义里:

var _this = this;
window.onkeydown = function(e) {
    if (e.keyCode === 65) {
      _this.x -= _this.velX;
    } else if (e.keyCode === 68) {
      _this.x += _this.velX;
    } else if (e.keyCode === 87) {
      _this.y -= _this.velY;
    } else if (e.keyCode === 83) {
      _this.y += _this.velY;
    }
  }

所以当一个按键按下时, 事件对象的 keyCode 属性 就可以请求到按下的按键值。如果是代码中那四个指定的键值之一, 那么恶魔圈将会左右上下的移动。

  • 额外的要点,让我们去了解一下那四个指定的键值映射的哪些按键。
  • 另一个额外的要点, 你能告诉我们为什么要在代码中设 var _this = this; 吗?这和函数的范围有关。

collisionDetect()

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

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

把恶魔圈带到程序中

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

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

计算得分

为了计算得分,需按照以下步骤:

  1. 在你的HTML文件中添加一个<p> 元素到 <h1> 元素的下面,其中包含文本 "Ball count: "。
  2. 在你的CSS文件中,添加下面的代码到底部:
    p {
      position: absolute;
      margin: 0;
      top: 35px;
      right: 5px;
      color: #aaa;
    }
  3. 在你的JavaScript文件中,做下列的修改:
    • 创建一个变量存储段落的引用。
    • 以同样的方式在屏幕上显示小球的数量。
    • 增加球数并在每次将球添加到屏幕里时显示更新的球数量。
    • 减少球数并在每次恶魔吃球时显示更新的球数(因为被吃掉的球不存在了)

提示

  • 这个评估非常具有挑战性。请仔细按照步骤慢慢来。
  • 每完成一个阶段时,你可以保留程序的副本,这是一种有用的方式。这样当你发现你程序出了问题,你可以参考之前的代码。

评定

如果你将此评估作为有组织的课程的一部分,你可以将你的成果交给您的老师/导师进行评分。 如果你是自学的,通过在 Learning Area Discourse thread, 或者在 Mozilla IRC的 #mdn IRC 频道上申请,你可以十分容易地得到评分指南。首先先尝试这个练习,作弊不会有任何收获。

文档标签和贡献者

 此页面的贡献者: bluekeroro
 最后编辑者: bluekeroro,