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

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

出発点

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

Note: また、あなたの評価を行うために、JSBinThimbleを使うことが出来ます。これらのオンラインエディターに HTML、CSS や JavaScript を貼り付けることが出来ます。もしあなたが使用しているオンラインエディタが、別々の JavaScript/CSS のパネルを持っていない場合は、HTML内の<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によってコピーを開始することができます。次に、以下の変更を行います。

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

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チャンネルにあります。 まず運動をしてみてください。不正行為によって得られるものは何もありません!

 

このモジュールの内容

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

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