ここまでの記事で JavaScript オブジェクトの根幹部に関する理論と文法の詳細についてすべてを見てきて、始めていくのに十分な基礎固めをしました。この記事では実練習を行ない、独自の JavaScript オブジェクトを作っていくための実践をしていきましょう — 楽しくてカラフルなものを。

前提条件: 基礎的なコンピューターの知識、HTML と CSS への基本的な理解、基礎的な JavaScript の理解 (JavaScript の第一歩JavaScript の構成要素を参照) とオブジェクト指向JavaScript の基本 (JavaScript オブジェクトの基本を参照)。
目的: オブジェクトの使い方とオブジェクト指向のテクニックを実世界のコンテストで練習する。

ボールを弾ませよう

この記事では伝統的な「弾むボール」のデモを作ってみて、JavaScript でどれほどオブジェクトが役に立つかお見せしましょう。小さなボールは画面じゅうを跳ねまわり、それぞれがぶつかると色が変わります。完成したものはこんな風に見えることでしょう:

この例では画面にボールを描くのに Canvas API を使い、画面をアニメーションさせるのに requestAnimationFrame を使います — これらの API について事前の知識は不要です。この記事を読み終わる頃にはこれら API についてもっと知りたくなっているだろうと期待してますが。道中では、イカしたオブジェクトを活用して、ボールを壁で弾ませる、それぞれがぶつかった事を判定する(衝突判定という呼び名で知られています)といった上手いテクニックをいくつかお見せしていきます。

始めに

始める前に index.html, style.css, と main.js ファイルのローカルコピーを作成してください。これらにはそれぞれ、以下が含まれています:

  1. とても簡素な HTML文書で、<h1> 要素と、ボールを描画するための <canvas> 要素と、この HTML に CSS と JavaScript を適用するための要素だけからなります。
  2. とても簡単なスタイル、主には<h1>のスタイルとポジションを指定し、スクロールバーやページ端のマージンを消す(素敵にきれいに見せるため)ためのもの。
  3. <canvas>要素を設定し、これから使うことになる汎用の関数を提供する若干の JavaScript。

スクリプトの最初の部分はこんな具合です:

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

このスクリプトでは<canvas>要素への参照を取得し、これに対して getContext() メソッドを使って描画していくためのコンテキストを取得します。得られる変数(ctx)はキャンバスの描画可能領域を直接表現しており、ここに二次元の形状を書き込む事ができます。

次に widthheight 二つの変数をセットし、キャンバス要素の幅と高さ(canvas.widthcanvas.height プロパティで表わされます)をブラウザーのビューポートの幅と高さ(ウェブページが表示される領域です — Window.innerWidthWindow.innerHeight プロパティから取得できます)に等しくします。

変数値をさっと全部同じにするのに、代入が連鎖している事に気付かれたでしょう — これで全く問題ありません。

初期化スクリプトの最後の部分はこんなのです:

function random(min, max) {
  var num = Math.floor(Math.random() * (max - min + 1)) + min;
  return num;
}

この関数は二つの数を引数に取り、二つ数の範囲内の乱数を戻します。

我々のプログラム用のボールを一つモデル化する

 

我々のプログラムではたくさんの画面中を跳ねまわるボールがあります。これらのボールはどれも同じルールで動くので、1つのオブジェクトで表わすのが理に叶っています。まずはコードの最後に以下のコンストラクターを追加するところから始めましょう。

 

function Ball(x, y, velX, velY, color, size) {
  this.x = x;
  this.y = y;
  this.velX = velX;
  this.velY = velY;
  this.color = color;
  this.size = size;
}

ここではいくつかの引数を用意し、我々のプログラムの中で個々のボールが動作するのに必要なプロパティを定義しています:

  • xy座標 — ボールが画面のどこからスタートするか表わす水平と垂直の座標。これは 0(画面左上隅)からブラウザービューポートの幅と高さの(画面右下隅)間の値を取ります。
  • 水平と垂直方向の速度(velXvelY) — 個々のボールには水平と垂直方向の速度が与えられます。実際にはアニメーションが開始されると、これらの値が x/y座標値に定期的に加算され、各フレームでこの値だけ移動していきます。
  • color — 個々のボールには色がつけられます。
  • size — 個々のボールには大きさがあります — ピクセルを単位とする半径で表わします。

これでプロパティがまとまりましたが、メソッドはどうしましょう? プログラムの中では、実際のところボールに何かさせたいわけです。

ボールを描画する

まず以下の draw() メソッドを Ball() のプロトタイプ(prototype)に追加しましょう:

Ball.prototype.draw = function() {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
}

この関数を使って、以前定義した 2D キャンバスコンテキスト(ctx)のメンバーを順に呼び出す方法で、ボール自身が画面に自分を描画する方法を教え込みます。コンテキストは紙のようなもので、ペンを使って何か描くように指示したいわけです:

  • まずは、beginPath() を使って紙に形を描きたいと宣言します。
  • 次に fillStyle を使って形を何色にしたいか宣言します — ここではボールの color プロパティを指定します。
  • 次に arc() メソッドを使って紙に円弧形をなぞります。これの引数は:
    • 円弧の中心座標、xy — ボールの xy プロパティを指定します。
    • 円弧の半径 — ボールの size プロパティで指定します。
    • 最後の二つの引数は円弧の開始点から終了点までの角度を円の中心角で指定します。ここでは 0度から 2 * PI、これはラジアンで表わした 360度に相当します(ややこしいですがラジアンで指定しなければなりません)。これで一周した円を描けます。もし 1 * PI までしか指定しなければ、半円(180度)になるでしょう。
  • 最後の最後に、fill() メソッドを使って、これはおおよそ、"beginPath() から描き始めた線描を終了し、描いた領域を前に fillStyle で指定していた色で塗り潰せ"という指示になります。

これでオブジェクトをテストしてみられるようになりました。

  1. コードを保存し、HTML ファイルをブラウザーで読み込みます。
  2. ブラウザーの JavaScript コンソールを開いて、ページをリフレッシュし、キャンバスのサイズがコンソール分小さくなったビューポート領域に合うようにします。
  3. 次をタイプして、新しいボールのインスタンスを作成します:
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
  4. そのメンバを呼び出して見てください:
    testBall.x
    testBall.size
    testBall.color
    testBall.draw()
  5. 最後の行を入力すると、キャンバスのどこかにボールが表示されたはずです。

ボールのデータを更新する

ボールを座標に表示できるようになりましたが、ボールを実際移動させるには、何らかの更新するための関数が必要です。JavaScript ファイルの最後に以下のコードを追加し、update() メソッドを Ball()prototype に追加します:

Ball.prototype.update = function() {
  if ((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }

  if ((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }

  if ((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }

  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }

  this.x += this.velX;
  this.y += this.velY;
}

関数の頭から 4 つの部分でボールがキャンバスの端に達したかどうかチェックします。もしそうであれば、関連する速度の向きを反転してボールが反対の向きに移動するようにします。つまり例えば、ボールが上方向に移動していたならば(velY が正)、垂直方向の速度をボールが下方向に移動するように変更します(velY を負に)。(訳注: 左上が原点、右下が座標の正方向ならば、ボールが上に移動する時の velY は負のはずだけど…)

4 つの場合にやっているのは:

  • x座標がキャンバスの幅より大きいかチェック(ボールは右端から飛び出そうとしている)
  • x座標が 0 より小さいかチェック(ボールは左端から飛び出そうとしている)
  • y座標がキャンバスの高さより大きいかチェック(ボールは下端から飛び出そうとしている)
  • y座標が 0 より小さいかチェック(ボールは上端から飛び出そうとしている)

それぞれの場合で計算にボールの size を含めていますが、これは x/y座業はボールの中心ですが、ボールの端のところで周囲から跳ね返って欲しいからです — 跳ね返る前に画面外にめり込んで欲しくないからです。

T最後の二行では velXx 座標に、velYy 座標に加算しています — 結果ボールはこのメソッドが呼ばれる毎に移動します。

とりあえずはここまでで、ちょいとアニメーションさせてみよう!

ボールのアニメーション

さあ、楽しい事をやりましょう。では、キャンバスにボールを追加し、アニメーションさせるところから始めましょう。

  1. 最初に、ボールを全部保存しておく場所がどこかに必要です。次の配列がこれをやってくれます — ではあなたのコードの最後に次を追加してください::
    var balls = [];

    ものをアニメーションさせるすべてのプログラムには、大概アニメーションループがあり、プログラム内の情報を更新して、アニメーションの各フレームでその結果を表示します。これは大半のゲームや類似するプログラムの基本になります。

  2. 以下をあなたのコードの末尾に追加してください:
    function loop() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
      ctx.fillRect(0, 0, width, height);
    
      while (balls.length < 25) {
        var size = random(10,20);
        var ball = new Ball(
          // ball position always drawn at least one ball width
          // away from the adge of the canvas, to avoid drawing errors
          random(0 + size,width - size),
          random(0 + size,height - size),
          random(-7,7),
          random(-7,7),
          'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
          size
        );
        balls.push(ball);
      }
    
      for (var i = 0; i < balls.length; i++) {
        balls[i].draw();
        balls[i].update();
      }
    
      requestAnimationFrame(loop);
    }

    loop() 関数は以下の事を行ないます:

    • キャンバスの塗り潰し色を半透明の黒にし、その色でキャンバスの幅と高さいっぱいの長方形を fillRect() で描きます(これの 4 つの引数は始点の座標と、描画する長方形の幅と高さになります)。これで次のフレームを描く前に、前のフレームで描いた内容を見えなくします。これをしないと、ボールじゃなくて長い蛇がキャンバスの中を這い回る様を見る事になります! 塗り潰す色は半透明の rgba(0,0,0,0.25) なので、以前の何フレーム分かがかすかに残り、ボールが移動した後の軌跡を表現します。もし 0.25 を 1 に変更すると、軌跡は全く見えなくなります。この値を変えて、どんな効果になるか見てみてください。
    • 我々の random()関数で作成したランダムな値を使って新しい Ball() のインスタンスを作成し、ボールの配列の後ろに push() して追加していきますが、これは配列中のボールの数が 25 に満たない間まで繰り返されます。balls.length < 25 の数字をいろいろ変えれば表示されるボールの数を増やしたり減らしたりできます。あなたのコンピューターとブラウザーがどれだけ速いかによりますが、ボールを数千にするとアニメーションはかなり遅くなります! 注意してね。
    • ループで balls配列のボール全部をなめてそれぞれのボールの draw()update() 関数を実行し、それぞれを画面に描画してから、次のフレームに備えて必要な位置と速度の更新を行います。
    • この関数を requestAnimationFrame() メソッドを使って再実行します — このメソッドが定期的に実行され同じ関数名を与えられると、その関数がスムースなアニメーションを行なうために毎秒設定された回数実行されます。これはたいてい再帰的に行われます — つまり関数は毎回その関数自身を呼び出すので、何度も何度も繰り返し実行されます。
  3. 最後に、あなたのコードの最後に次の行を追加します — アニメーションを開始するために、一旦は関数を呼ぶ必要があるのです。
    loop();

基本としてはこんなところ — セーブしてリフレッシュして、ボールがはずむのをテストしてみてください!

衝突判定を追加する

さあ、もうちょっと面白くするため、プログラムに衝突判定を追加して、ボールに他のボールとぶつかったらどうするのか教えましょう。

  1. まず最初、以下のメソッド定義を update() メソッドを定義した箇所(つまり Ball.prototype.update ブロック)の下に追加します
    Ball.prototype.collisionDetect = function() {
      for (var j = 0; j < balls.length; j++) {
        if (!(this === balls[j])) {
          var dx = this.x - balls[j].x;
          var dy = this.y - balls[j].y;
          var distance = Math.sqrt(dx * dx + dy * dy);
    
          if (distance < this.size + balls[j].size) {
            balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
          }
        }
      }

    このメソッドはちょっとばかり複雑なので、今はどんな動作をしているのか正確に理解できなくても構いません。説明していきます:

    • それぞれのボールで、他のボールそれぞれとこのボールが衝突していないか調べなければなりません。そのために、balls[]配列すべてのボールを回すために別の for ループを始めます。
    • 内側のループに入ってすぐ、if文でループで回しているボールがチェックしているボールと同じか調べています。ボールがそれ自体とぶつかっているかチェックしたくないですから! これのために、現在のボール(collisionDetect メソッドが実行されているボールです)がループ中のボール(現在の collisionDetect メソッド内のループのくりかえし中で参照されているボール)と一致しているかチェックします。!を使って等価性チェックを逆にしているので、if文の中のコードはボールが同じでないときだけ実行されます。
    • そして二つの円が衝突していないか調べるための一般的なアルゴリズムを使っています。基本的には円ないの領域が重なっているかチェックしています。これについて詳しくは 2次元の衝突判定で解説されています。
    • もし衝突が検出されたら、内側の if文の中のコードが実行されます。この場合では、両方のボールの color プロパティをランダムな新しい色に設定しているだけです。もっと複雑なこと、現実っぽくボールを互いに跳ね返らせたりもできたでしょうが、これを実装したとするともっとずっとに複雑なったでしょう。そのような物理シミュレーションには、PhysicsJS, matter.js, Phaser などのゲームや物理用のライブラリを使う開発者が多いです。
  2. あなたはアニメーションの各フレーム毎にこのメソッドを呼ばなければなりません。以下を balls[i].update(); の行の後に追加してください:
    balls[i].collisionDetect();
  3. 保存とデモのリフレッシュをして、ボールがぶつかった時に色が変わるのを見てください!

注記: この例題を動かすのに困った時は、あなたの JavaScript コードを私たちの完成版と比べてみてください(ライブ実行版も見られます)。

まとめ

自分版の実世界で跳ね回るランダムボール例作り、この全単元で出てきた様々なオブジェクトやオブジェクト指向テクニックを使ったものをあなたに楽しんでいただけていれば、と思います。オブジェクトの実践的な使い方の練習や、実世界のコンテキストについて得られるものがあったはずです。

オブジェクトに関する記事は以上です — 残るのは、あなが自分のスキルをオブジェクトの評価問題で試してみる事だけです。

参考文献

 

このモジュールに含まれる

 

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

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