レッスン 6

当たり判定をつけよう

敵とプレイヤーの当たり判定をつけてみましょう。 また敵とプレイヤーが衝突したら描画の更新を止めて`GameOver`の表示をしましょう。

チャプター1完成形を確認しよう

チャプター2当たり判定の実装方法を考えよう

これまで作ったプレイヤー、敵、弾のクラスにはx,y,sizeという座標と大きさの共通プロパティがあるのでこれを使って判定をしましょう。
正方形の当たり判定は下記の関数を使う事とします。


//四角形同士の当たり判定の関数
function  isCollided(rect1, rect2) {
    return (abs(rect1.x - rect2.x) < (rect1.size + rect2.size) / 2) && abs(rect1.y - rect2.y) < (rect1.size + rect2.size) / 2;
  }

二つの四角形のブジェクトの中心座標の距離を調べて衝突の判定をしています。
引数の四角形オブジェクト1の座標(rect1.x,rect1.y)四角形オブジェクト2の座標(rect2.x,rect2.y)とすると
x方向の差分abs(rect1.x - rect2.x)が両方の横幅の合計割る2(rect1.size + rect2.size) / 2)より小さく,かつ
Y方向の差分abs(rect1.y - rect2.y) が 両方の縦幅の合計割る2(rect1.size + rect2.size) / 2より小さい場合は衝突している事になります。

2. 1 ヒント

  • abs()は絶対値を求めるメソッドです、絶対値は符号を無視した数で例えばabs(-10)10になります。
  • ゲームオーバーの文字はtextメソッドを使おう、文字の大きさtextsize配置の設定textAlignなども使ってみよう。
  • noLoopメソッドで描画の更新が止められる。
チャプターを全部クリアしよう!