やっぱり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;
}
}
敵に自機がぶつかればというのは
の部分。"return;"すると終了となります。
ここで当たり判定の考えかたについては以下参考サイト。
敵の挙動については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()で消していきます。
お化け敵であるお化けが弾にあたれば薄くなって消える部分は
そしてゲームの難しさは弾の出方。
敵の出現の頻度
これで敵が出てきてそれを弾で打ち防御しながら逃げる。それでも敵が自機にあたればゲームオーバーということになります。
この記事が気に入ったらサポートをしてみませんか?