Adding features to our bouncing balls demo

初始點

要開始進行此評估，請制作本地副本 "external"> index-finished.html ， ="external"> style.css 和 main-finished.js 從我們上一篇文章在您的本地計算機的新目錄。

工程概要

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

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

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

步驟完成

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

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

首先，改變你現(xiàn)有的 Ball()構(gòu)造函數(shù)，使它成為一個 Shape()構(gòu)造函數(shù)和一個新的 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()和碰撞檢測()方法定義應(yīng)該能夠保持完全一樣， 。

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

定義EvilCircle()

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

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

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

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

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

定義EvilCircle()的方法

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

draw()

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

• 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()

這個方法將做與 Ball()的 update()函數(shù)的第一部分相同的事情 - 看看邪惡的圓圈是否會離開邊緣 的屏幕，并停止這樣做。 同樣，你可以大多只是復(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 對象添加一個 onkeydown 事件偵聽器，以便當(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)按下某個鍵時，會查看事件對象的 keyCode 屬性，以查看 按下該鍵。 如果它是由指定的鍵盤代表的四個之一，那么邪惡的圓圈將左/右/上/下移動。

• 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()

此方法將以非常類似于 Ball()的 collisionDetect()方法的方式運行，因此您可以使用該方法的副本作為此新方法的基礎(chǔ)。 但有幾個區(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?).

把邪惡的圓帶進程序

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

• 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.

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

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

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.

評定

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