やっぱりJavaScript! - ゲームを作る - 4

衝突判定の部分です。弾に敵があたれば消えます。そして敵に自機がぶつかれば、ゲームが止まりゲーム終了となります。

for (const ghost of ghostList) {
                    
　　　　// 弾の当たり判定
　　　　　　　　　　for (const bullet of bulletList) {
                        const dx = ghost.x - bullet.x;
                        const dy = ghost.y - bullet.y;
                        const diff = ((ghostSize + bulletSize) / 2) * 0.8;
                        if (dx ** 2 + dy ** 2 < diff ** 2) {
                            ghost.hit();
                            bullet.remove();
                        }
                 }
                    if (!ghost.available) {
                        continue;
                    }

     // 自機、敵との当たり判定
                    const dx = ghost.x - heroX;
                    const dy = ghost.y - heroY;
                    const diff = ((heroSize + ghostSize) / 2) * 0.6;
                    if (dx ** 2 + dy ** 2 < diff ** 2) {
                        gameover = true;
                        return;
                    }
   }

敵に自機がぶつかればというのは

if (dx ** 2 + dy ** 2 < diff ** 2) {
　　gameover = true;
　　return;
}

の部分。"return;"すると終了となります。

ここで当たり判定の考えかたについては以下参考サイト。

ゲームの当たり判定【超基本】

【JavaScript】円形と矩形の当たり判定を行う【ゲーム制作】

敵の挙動についてはGhostとして Characterを上書き、機能を追加して使います。

     class Ghost extends Character {
            constructor(x, y, angle, speed) {
                super(x, y, ghostSize, angle, speed);

                this.power = Math.random() * 5;

                this.element.style.display = "flex";
                this.element.style.alignItems = "center";
                this.element.style.justifyContent = "center";
                this.element.style.transition = "opacity 300ms ease-out";
                this.element.style.fontSize = `${ghostSize}px`;
                this.element.textContent = "👻";
            }

            async remove() {
                this.available = false;
                this.element.style.opacity = 0;
                await new Promise((r) => setTimeout(r, 300));
                super.remove();
            }

            hit() {
                this.power--;
                if (this.power < 0) {
                    this.remove();
                } else {
                    this.element.style.filter = "brightness(100)";
                    this.brightenCount = 3;
                }
            }

            update() {
                super.update();
                if (this.brightenCount) {
                    this.brightenCount--;
                } else {
                    this.element.style.filter = "";
                }
            }

        }

で決めていきます。

当たった時にremove()で消していきます。

hit() {
　　this.power--;　　　// この変数で管理。
　　if (this.power < 0) {　　// 衝突判定後、すぐ消さない。
　　　　this.remove();
　　} else {
　　this.element.style.filter = "brightness(100)";
　　this.brightenCount = 3;
　　}
}

お化け敵であるお化けが弾にあたれば薄くなって消える部分は

this.element.style.filter = "brightness(100)";

そしてゲームの難しさは弾の出方。

bulletInterval =  ;

敵の出現の頻度

ghostInterval = ;

これで敵が出てきてそれを弾で打ち防御しながら逃げる。それでも敵が自機にあたればゲームオーバーということになります。