バウンスボールに機能を追加する

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

出発点

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

プロジェクト概要

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

次のスクリーンショットでは、完成したプログラムがどのように見えるかのイメージを掴めるでしょう： 

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

完成までの手順

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

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

まず初めに、既存の ball () コンストラクターを shape () コンストラクターに変更し、新しい ball () コンストラクターを追加します：

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

ボールの draw ()、update ()、と collisionDetect () メソッドの定義は、まったく前と同じままである必要があります。

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

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

EvilCircle () の定義

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

EvilCircle () コンストラクターは、x, y, velX, velY, と exists を Shape () から継承しますが velX と velY は常に20です。

これは Shape.call(this, x, y, 20, 20, exists);のように呼び出します。

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

• color — 'white'
• size — 10

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

EvilCircle () のメソッドの定義

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

draw()

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

• 私たちは、「悪のサークル」を埋めるのではなく、むしろ外線（ストローク）を持たせたい。これを達成するには、fillStyle と fill() を strokeStyle と stroke() に更新します。
• またストロークを少し太くすれば、あなたは「邪悪なサークル」をもう少し楽に見ることができます。これは、beginPath() 呼び出しの後のどこかで lineWidth の値を設定することで実現できます (３を設定します)。

checkBounds()

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

• 最後の 2行を取り除き、すべてのフレームで「悪のサークル」の位置を自動的に更新する必要はありませんが、我々は何か他の方法でそれを動かすので、以下で見られるでしょう。
• if() ステートメントの内部では、テストが true を返す場合、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 プロパティを調べて、どのキーが押されているかを確認します。指定されたキーコードによって表される 4 つのうちの 1 つである場合、「悪のサークル」は左/右/上/下に移動します。

• ボーナスポイントの場合、指定されたキーコードがどのキーにマップされているかをお知らせください。
• 別のボーナスポイントについては、なぜ、そこにいるポジションに var _this = this;を設定しなければならなかったのでしょうか？それは関数スコープと関係があります。

collisionDetect()

このメソッドは Ball()の collisionDetect()メソッドと非常によく似た方法で動作しますが、この新しいメソッドの基礎として、そのコピーを使用することができます。しかし、いくつかの違いがあります。

• 外側の if ステートメントでは、反復中のボールが、チェックを行っているボールと同じであるかをチェックする必要はなくなりました。代わりに、もはやボールではないので、それは「悪のサークル」です！ チェックされているボールが存在するかどうかを確認するテストを行う必要があります（どのプロパティでこれを行うことができますか？）。それが存在しなければ、それは既に「邪悪なサークル」によって食べられているので、再度チェックする必要はありません。
• 内部の if ステートメントでは、衝突が検出されたときにオブジェクトの色を変更する必要がなくなりました。代わりに、「悪のサークル」と衝突するボールをもう存在しないように設定したくなります（もう一度、あなたはそれをどうやって実行すると思いますか？）。

プログラムに「悪の円」を持ち込む

今、「悪のサークル」を定義しました。実際にそれをシーンに表示させる必要があります。これを行うには、loop() 関数をいくつか変更する必要があります。

• まず、（必要なパラメーターを指定して）新しい悪のサークルオブジェクトインスタンスを作成し、その setControls() メソッドを呼び出します。ループの各繰り返しではなく、これらの 2 つのことを一度だけ実行する必要があります。
• すべてのボールをループして draw()、update()、それぞれの collisionDetect()関数は、現在のボールが存在する場合にのみこれらの関数が呼び出されるようにします。
• ループの各繰り返しで、「悪のボール」インスタンスの draw()、checkBounds()、および collisionDetect()メソッドを呼び出します。

スコアカウンターの実装

スコアカウンターを実装するには、次の手順に従います。

1. HTML ファイルに「Ball count：」というテキストを含む<h1>要素の直下に<p>要素を追加します。
2. あなたの CSS ファイルに、次のスタイルを追加します：

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

3. JavaScript では、次の更新を行います：
   • 段落への参照を格納する変数を作成します。
   • 何らかの方法で画面上のボールの数をカウントしてください。
   • ボールをシーンに追加するたびにカウントを増加させ、更新されたボールの数を表示します。
   • 「邪悪なサークル」がボールを食べるたびにカウントを減らし、更新されたボールの数を表示します（存在しないようにします）。

ヒントと tips

• この評価は非常に困難です。各ステップをゆっくりと注意深く行います。
• それぞれのステージを作業した後、別々のデモ版を保管しておくことも考えられ、後であなたが困っているときにそれを参照することができます。

評価

組織されたコースの一環としてこの評価に従っている場合は、あなたはマーキングのためにあなたの教師/メンターにあなたの仕事を与えることができるはずです。あなたが自己学習している場合は、マーケティングガイドを簡単に入手するには、この演習のディスカッションスレッドで質問するか、または Mozilla IRC の#mdn IRC チャンネルにあります。まず運動をしてみてください。不正行為によって得られるものは何もありません！

このモジュール

• JavaScript オブジェクトの基本
• 初心者のためのオブジェクト指向 JavaScript
• Object のプロトタイプ
• JavaScript での継承
• JSON データの操作
• オブジェクト作成の練習
• バウンスボールに機能を追加する