【JavaScript　初学者向け】矩形と当たり判定【一行づつ解説】

という方向けの解説となります。

ゲームの当たり判定を考える際、矩形への理解があると作成が楽になります。
javaScriptの矩形・当たり判定の理解の助けになれば幸いです。

筆者
・独学でゲームを作っている男
・javascriptが大好きな男

矩形　とは

矩形とは、すべての角が直角になっている図形のこと
⇩の四辺形・長方形などがそれにあたります。

そして「矩形の大きさ=当たり判定の大きさ」と言い換えることができます。

という考え方をするわけですね。
接触しているか、これは座標を使いますので、参考画像と一緒にみていきましょう。

矩形×点　の当たり判定

プレイヤーを緑の点、当たる範囲を青色の四角(幅：40/高さ：30)とした場合、このように表すことができます。

• if(player.x >= 20 && player.x <= 60){　//x　20以上、60以下
•   if(player.y >= 20 && player.y <= 50){　//y　20以上、50以下　
•     //当たった時の処理
•   }
• }

今回、プレイヤーである緑の点のx座標は20より小さいことが分かります。
よって「当たってない」判定となります。

if文を全て満たした時だけ「当たった時の処理」が始まるわけですね。
「当たり判定をしたいものの座標×矩形の座標」を比較することで当たり判定をしていることになります。

ここまで理解できれば大丈夫です。
次で最後になります。

矩形×矩形　の当たり判定

プレイヤーを緑の四角(幅：30/高さ：20)当たる範囲を青色の四角(幅：40/高さ：30)とします。

画像の通り、重なっていないので「当たってない判定」となります。
では、「当たった判定」となる場合を考えてみましょう。大きく4パターンです。

「4つの頂点のうち、1つでも別の矩形の中に入る」なら当たっていると言えます。
これをコードにした場合、少し複雑になるので順に解説します。

矩形の頂点を座標に置き換えよう！

繰り返しとなりますが「4つの頂点のうち、1つでも別の矩形の中に入っていれば」当たった判定となります。

つまり、それぞれの頂点を座標にすれば視覚的に理解しやすくなります。
javascriptの場合、左上が支点になりますので以下のようになります。

座標がどのように重なるか考えよう！

横方向から考えましょう。
当たっていない場合をコードにするとこうなります。

//当たってない場合//
//プレイヤーの右端　<　当たる範囲の左端
if(player.x + 30　<　enemy.x){}

これを反対にすれば「当たっている」と言えますのでこのようになります。

//当たっている?場合//
//プレイヤーの右端　>　当たる範囲の左端
if(player.x + 30　>　enemy.x){}

しかし、これだけだと「当たる範囲の右端 < プレイヤーの左端」場合は満たしません。画像にするとこんな場合⇩

「プレイヤーの右端 > 当たる範囲の左端」が1つ目の条件とすれば
「当たる範囲の右端 > プレイヤーの左端」が2つ目の条件です。
この2つを満たせばよいのでこうなります。

//当たっている！場合//
//プレイヤーの右端　>　当たる範囲の左端　かつ　当たる範囲の右端 > プレイヤーの左端
if(player.x + 30　>　enemy.x && enemy.x + 40 > player.x ){}

ここまで横方向で、縦方向の座標一覧はこちらです。

//当たっている場合//
//プレイヤーの右端　>　当たる範囲の左端　かつ　当たる範囲の右端 > プレイヤーの左端
if(player.x + 30 > enemy.x && enemy.x + 40 > player.x){
　//プレイヤーの左端　<　当たる範囲の左下の端　かつ　当たる範囲の左端 < プレイヤーの左下の端
　　if(player.y < enemy.y + 30 && enemy.y < player.y + 20){
　　　//当たった時の処理
　}
}

矩形と当たり判定　のまとめ

最後にポイントをおさらいしましょう。

①の知識を元に②③を意識することで、当たり判定の考え方が明確になります。
当記事がjavascriptでゲームを作ったりする時の理解の助けになれば幸いです。