Posted at

円と円の当たり判定を使った簡単なシューティング 


はじめに

今回は簡単なゲーム作りを通して円と円の当たり判定を学んでいきましょう。

前提

if,for,変数などが分かる

数学的な話は苦手なのでググってください。

作るゲームはこんな感じです。

図1.jpg

使う画像

EDGE1.png


数学的な話(少し)

円1: 半径 r1 , 中心 C1(Cx1,Cy1)

円2: 半径 r2 , 中心 C2(Cx2,Cy2)

使う公式

(Cx1-Cx2)^2 + (Cy1-Cy2)^2 ≦ (r1+r2)^2

以上の公式が成り立っていれば当たっています。

これオブジェクトの数だけ繰り返せばどれが当たっているか分かります。

簡単ですね。ここまで読んだならもうできる。


当たり判定の実装


main.js


enemys.forEach(enemy => {
let sc = 0
if (enemy.isDead) {
return
}
bullets.forEach(bullet => {
//敵
const er = enemy.width / 2
const enemyCenterX = enemy.x + enemy.width / 2
const enemyCenterY = enemy.y + enemy.height / 2
//弾
const br = bullet.r
const bulletCenterX = bullet.x + enemy.width / 2
const bulletCenterY = bullet.y + enemy.height / 2

const x = (enemyCenterX - bulletCenterX) ** 2
const y = (enemyCenterY - bulletCenterY) ** 2
const r = (er + br) ** 2
//成り立っていれば敵と弾が消える
if (x + y <= r) {
enemy.isDead = true
bullets.splice(sc, 1)
}
sc++
})
})


実装結果

Page Title - Google Chrome 2018-12-24 07.47.31.png

動くものはこちら

aが左移動

dが右移動

eで弾を打つ


終わりに

全体の実装はここに置いておきます。

今回は大学1・2年生の少しプログラムが書ける人向けに書いてみました。

あまり難しくないが2Ⅾゲームを作る時多用するので覚えておくといいと思います。


参考

2D衝突 その3 点と円、円と円

http://marupeke296.com/COL_2D_No3_PointToCircle.html