Adding features to our bouncing balls demo

初始點(diǎn)

要開(kāi)始進(jìn)行此評(píng)估，請(qǐng)制作本地副本 "external"> index-finished.html ， ="external"> style.css 和 main-finished.js 從我們上一篇文章在您的本地計(jì)算機(jī)的新目錄。

工程概要

我們的彈性球演示是有趣的，但現(xiàn)在我們想通過(guò)添加一個(gè)用戶(hù)控制的邪惡的圈子，它會(huì)吃球，如果它捕捉到一個(gè)更多的互動(dòng)。 我們還想通過(guò)創(chuàng)建一個(gè)通用的 Shape()對(duì)象來(lái)測(cè)試你的對(duì)象構(gòu)建技能，我們的球和邪惡的圈子可以繼承。 最后，我們要添加一個(gè)分?jǐn)?shù)計(jì)數(shù)器來(lái)跟蹤要捕獲的球數(shù)。

下面的截圖給出了一個(gè)完成的程序應(yīng)該是什么樣子的想法:

為了給您更多想法，請(qǐng)查看完成的示例 >(沒(méi)有偷看源代碼！)

步驟完成

以下部分描述了您需要做什么。

創(chuàng)建我們的新對(duì)象

首先，改變你現(xiàn)有的 Ball()構(gòu)造函數(shù)，使它成為一個(gè) Shape()構(gòu)造函數(shù)和一個(gè)新的 Ball

1. The Shape() constructor should define the x, y, velX, and velY properties in the same way as the Ball() constructor did originally.
2. It should also define a new property called exists, which is used to track whether the balls exist in the program (have not been eaten by the evil circle). This should be a boolean, with an initial value of true.
3. The Ball() constructor should inherit x, y, velX, velY, and exists from the Shape() constructor. Remember that you'll need to define them as parameters as well as calling them.
4. It should also define a color and a size property, which should both be initialized to the same random values as they were in the original Ball() constructor.
5. Remember to set the Ball() constructor's prototype and constructor appropriately.

球 draw()， update()和碰撞檢測(cè)()方法定義應(yīng)該能夠保持完全一樣， 。

在這一點(diǎn)上，嘗試重新加載代碼 - 它應(yīng)該像以前一樣工作，與我們重新設(shè)計(jì)的對(duì)象。

定義EvilCircle()

現(xiàn)在是時(shí)候遇到壞人 - EvilCircle()！ 我們的游戲只涉及一個(gè)邪惡的圈子，但我們?nèi)匀灰褂美^承自 Shape()的構(gòu)造函數(shù)來(lái)定義它，給你一些練習(xí)。 您可能想在以后添加另一個(gè)圈子，可以由另一個(gè)玩家控制，或有幾個(gè)計(jì)算機(jī)控制的邪惡的圈子。 你可能不會(huì)用一個(gè)邪惡的圈子接管世界，但它會(huì)做這個(gè)評(píng)估。

EvilCircle()構(gòu)造函數(shù)應(yīng)該從 Shape()中繼承 x ， y 代碼>。

它還應(yīng)該定義自己的屬性，如下所示:

• color — 'white'
• size — 10
• velX — 20
• velY — 20

同樣，請(qǐng)記住在構(gòu)造函數(shù)中將繼承的屬性定義為參數(shù)，并正確設(shè)置 prototype 和構(gòu)造函數(shù)屬性。

定義EvilCircle()的方法

EvilCircle()應(yīng)該有四個(gè)方法，如下所述。

draw()

此方法與 Ball()的 draw()方法具有相同的目的:它在畫(huà)布上繪制對(duì)象實(shí)例。 它將以非常類(lèi)似的方式工作，因此您可以從復(fù)制 Ball.prototype.draw 定義開(kāi)始。 然后，您應(yīng)該進(jìn)行以下更改:

• We want the evil circle to not be filled in, but rather just have an outer line (stroke). You can achieve this by updating fillStyle and fill() to strokeStyle and stroke().
• We also want to make the stroke a bit thicker, so you can see the evil circle a bit more easily. This can be achieved by setting a value for lineWidth somewhere after the beginPath() call (3 will do).

checkBounds()

這個(gè)方法將做與 Ball()的 update()函數(shù)的第一部分相同的事情 - 看看邪惡的圓圈是否會(huì)離開(kāi)邊緣 的屏幕，并停止這樣做。 同樣，你可以大多只是復(fù)制 Ball.prototype.update 的定義，但有一些修改你應(yīng)該做:

• Get rid of the last two lines — we don't want to automatically update the evil circle's position on every frame, because we will be moving it in some other way, as you'll see below.
• Inside the if() statements, if the tests return true we don't want to update velX/velY; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. Adding or subtracting?(as appropriate) the evil circle's size property would make sense.

setControls()

此方法將向 window 對(duì)象添加一個(gè) onkeydown 事件偵聽(tīng)器，以便當(dāng)按下某些鍵盤(pán)鍵時(shí)，我們可以移動(dòng)邪惡的圓圈。 以下代碼塊應(yīng)該放在方法定義中:

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;
    }
  }

因此，當(dāng)按下某個(gè)鍵時(shí)，會(huì)查看事件對(duì)象的 keyCode 屬性，以查看 按下該鍵。 如果它是由指定的鍵盤(pán)代表的四個(gè)之一，那么邪惡的圓圈將左/右/上/下移動(dòng)。

• For a bonus point, let us know which keys the specified keycodes map to.
• For another bonus point, can you tell us why we've had to set var _this = this; in the position it is in? It is something to do with function scope.

collisionDetect()

此方法將以非常類(lèi)似于 Ball()的 collisionDetect()方法的方式運(yùn)行，因此您可以使用該方法的副本作為此新方法的基礎(chǔ)。 但有幾個(gè)區(qū)別:

• In the outer if statement, you no longer need to check whether the current ball in the iteration is the same as the ball that is doing the checking — because it is not longer a ball, it is the evil circle! Instead, you need to do a test to see if the ball being checked exists (with which property could you do this with?). If it doesn't exist, it has already been eaten by the evil circle, so there is no need to check it again.
• In the inner if statement, you no longer want to make the objects change color when a collision is detected — instead, you want to set any balls that collide with the evil circle to not exist any more (again, how do you think you'd do that?).

把邪惡的圓帶進(jìn)程序

現(xiàn)在我們已經(jīng)定義了邪惡的圈子，我們需要讓它出現(xiàn)在我們的場(chǎng)景中。 為此，您需要對(duì) loop()函數(shù)進(jìn)行一些更改。

• First of all, create a new evil circle object instance, then call its setControls() method. You only need to do these two things once, not on every iteration of the loop.
• At the point where you loop through every ball and call the draw(), update(), and collisionDetect() functions for each one, make it so that these functions are only called if the current ball exists.
• Call the evil ball instance's draw(), checkBounds(), and collisionDetect() methods on every iteration of the loop.

實(shí)現(xiàn)分?jǐn)?shù)計(jì)數(shù)器

要實(shí)施分?jǐn)?shù)計(jì)數(shù)器，請(qǐng)按照以下步驟操作:

1. In your HTML file, add a <p> element just below the <h1> element containing the text "Ball count: ".
2. In your CSS file, add the following rule at the bottom:

   p {
     position: absolute;
     margin: 0;
     top: 35px;
     right: 5px;
     color: #aaa;
   }

3. In your JavaScript, make the following updates:
   • Create a variable that stores a reference to the paragraph.
   • Keep a count of the number of balls on screen in some way.
   • Increment the count and display the updated number of balls each time a ball is added to the scene.
   • Decrement the count and display the updated number of balls each time the evil circle eats a ball (causes it not to exist).

提示和提示

• This assessment is quite challenging. Take each step slowly and carefully.
• It might be an idea to keep a separate copy of the demo after you get each stage working, so you can refer back to it if you find yourself in trouble later on.

評(píng)定

如果您作為有組織課程的一部分參加此評(píng)估，您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進(jìn)行標(biāo)記。 如果您是自學(xué)習(xí)的，那么您可以輕松地通過(guò) dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒(méi)有什么可以通過(guò)作弊獲得！