この翻訳は不完全です。英語から この記事を翻訳 してください。

この評価によると, あなたは、前の記事を出発点として、このバウンスボールデモが使えるようになることが期待されます。さらにいくつかの新機能や面白い機能を追加します。

条件: この評価を試みる前に、このモジュールのすべての記事を既に使用していること。
目的・目標 JavaScript オブジェクトとオブジェクト指向の構成要素の理解しているか。

出発点

この評価をスタートするためには、私たちの最新記事からローカルPCの新ディレクトリに index-finished.html, style.css, main-finshed.jsをコピーします。

Note: また、あなたは、あなたの評価を行うために、JSBinやThimbleを使うことが出来ます。あなたは、これらのオンラインエディターに HTML、CSS や JavaScript を貼り付けることが出来ます。もしあなたが使用しているオンラインエディタが、別々の JavaScript/CSS のパネルを持っていない場合は、<script> / <style>エレメントを使って、インラインで書くことが出来ます。

プロジェクト概要

このスーパーボール・デモは楽しい。ここでは、もう少しインタラクティブな機能としてユーザー制御された「邪悪な円」がスーパーボールを捕まえて食べているように機能を追加します。また、スーパーボールと邪悪な円から受け継ぐことができる一般的なShape()オブジェクトを使って、あなたのオブジェクト構築スキルも試してみましょう。最終的には、残ったボールが数えられるスコアカウンターを追加しましょう。

次のスクリーンショットでは、あなたに完成したプログラムのアイデアを与えるでしょう: 

さらにヒントを差し上げます。完成デモを見てみましょう。(ソースコードをチラ見しないように!)

完成までの手順

次のセクションでは、必要な操作について説明します。

新しいオブジェクトを作る

最初です。既存のball () コンストラクタをshape () コンストラクタに変更し、新しいball () コンストラクタを追加します:

  1.  Shape () コンストラクターは、xyvelX、および velY プロパティを、ball () コンストラクターが最初に行ったのと同じ方法で定義する必要がありますが、色とサイズのプロパティは指定しません。
  2. また、新しいプロパティは、ボールがプログラムに存在するかどうかを追跡するために使用されるexistsを新しく定義する必要があります(邪悪な円に食べられていない)。 これはブール値 (true/false) である必要があります。
  3. ball () コンストラクタは、xyvelXvelY、および exists プロパティを Shape () コンストラクタから継承する必要があります。
  4. また、元のball () コンストラクタのように、colorsizeプロパティを定義する必要があります。
  5. ball () コンストラクタのprototypeconstructorを適切に設定してください。

ボールのdraw ()update ()、と collisionDetect () メソッドの定義は、前と同じように正確に維持できる必要があります。

また、new Ball () ( ... )コンストラクタの呼び出しに新しいパラメータを追加する必要があります。-existsパラメータは5番目のパラメータにする必要があり、trueの値を指定する必要があります。

この時点で、コードをリロードしてみてください。それは私たちの再設計されたオブジェクトで、それは前と同じだけで動作するはずです。

EvilCircle () の定義

今、悪者が満ちる時間です!ーEvilCircle ()  私たちのゲームは、1つの邪悪な円に含まれるようになりますが、しかし、私たちはあなたにいくつかの実践を与えるため、Shape () から継承するコンストラクタを使用して定義します。他のプレイヤーによって制御される、もしくは複数のコンピュータ制御の「邪悪な円」を有することが可能なので、後からアプリケーションに別の円を加えたいと思うかもしれません。あなたはおそらく、単一の「邪悪な円」の世界を引き継ぐつもりはないでしょうが、今回の評価のために行いましょう。

EvilCircle () コンストラクタは、x, yexistsShape () から継承します。

次のように、独自のプロパティも定義する必要があります:

  • color'white'
  • size10
  • velX20
  • velY20

ここでも、継承したプロパティをコンストラクタのパラメータとして定義し、prototypeconstractorのプロパティを正しく設定することを忘れないでください。

EvilCircle () のメソッドの定義

EvilCircle () には、以下に示す4つの方法があります。

draw()

このメソッドは、ball () draw () メソッドと同じ目的です:キャンバス上にオブジェクトインスタンスを描画します。それはすごくよく似た方法で動作します、Ball.prototype.drawによってコピーを開始することができます。次に、以下の変更を行います。

  • 私たちは、「邪悪な円」に記入されないようにしたいのではなく、単に外側の行 (ストローク) があります。これを達成するには、fillStyle () fill ()を更新し、strokeStylestroke () を塗りつぶします。
  • またストロークを少し太くすれば、あなたは「邪悪な円」をもう少し楽に見ることが出来ます。これは、beginPath()呼び出しの後のどこかに lineWidth の値を設定することで実現できます (3が実行します)。

checkBounds()

このメソッドは、Ball()update() 関数の最初の部分と同じことを行います —「邪悪な円」が画面の端から出て行くかどうかを見てください、そして、 出ないようにしてください。そして、ほとんどの場合、Ball.prototype.update 定義をコピーすることができますが、いくつか変更する必要があります:

  • 最初の2行を取り除き、— 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()

This method will add an onkeydown event listener to the window object so that when certain keyboard keys are pressed, we can move the evil circle around. The following code block should be put inside the method definition:

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

So when a key is pressed, the event object's keyCode property is consulted to see which key is pressed. If it is one of the four represented by the specified keycodes, then the evil circle will move left/right/up/down.

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

This method will act in a very similar way to Ball()'s collisionDetect() method, so you can use a copy of that as the basis of this new method. But there are a couple of differences:

  • 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 no 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?).

Bringing the evil circle into the program

Now we've defined the evil circle, we need to actually make it appear in our scene. To do this, you need to make some changes to the loop() function.

  • First of all, create a new evil circle object instance (specifying the necessary parameters), 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.

Implementing the score counter

To implement the score counter, follow the following steps:

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

Hints and tips

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

Assessment

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

 

In this module

ソースコードのピークなし次のセクションでは、必要な操作について説明します。stroke

ドキュメントのタグと貢献者

 このページの貢献者: mochan3
 最終更新者: mochan3,