HTML・CSSでかんたんなシューティングゲームを作ろう！その２

はじめに｜ゲームに“動き”が加わるとワクワクが倍増！

前回の記事では、HTMLとCSSを使ってシューティングゲームの見た目を作成しました！

今回は、いよいよゲームらしくするために「JavaScriptで動きをつける」パートに入ります。
左右に自機を動かしたり、スペースキーで弾を発射する処理を実装していきましょう！

主に以下の2点を実装します👇

この記事での完成映像はこちら！

Step１｜弾のデザインを設定

次に、CSSを追加して弾の見た目を設定しましょう！

....前回の続き.....
.bullet {
  position: absolute;
  width: 10px;
  height: 20px;
  background-color: yellow;
}

position: absolute を使うことで、自由に座標を変えられるようになります。

Step２｜JavaScriptで左右に動かす（←→キー）

さて、いよいよJavaScriptの出番です。
まずはキーボードの←→キーで自機を動かしてみましょう！

const player = document.getElementById("player");
let playerX = 280;

let moveLeft = false;
let moveRight = false;

  // 移動処理を毎フレーム実行
setInterval(() => {
    if (moveLeft && playerX > 0) {
      playerX -= 5;
    }
    if (moveRight && playerX < 560) {
      playerX += 5;
    }
    player.style.left = playerX + "px";
}, 20);

// キーが押されたとき
document.addEventListener("keydown", (e) => {
    if (e.key === "ArrowLeft") moveLeft = true;
    if (e.key === "ArrowRight") moveRight = true;
});

// キーが離されたとき
document.addEventListener("keyup", (e) => {
   if (e.key === "ArrowLeft") moveLeft = false;
   if (e.key === "ArrowRight") moveRight = false;
});

🔸 keydown イベントでキー入力を取得
🔸 プレイヤーの left 値を操作して左右移動を表現

✅ 解説

処理	内容
moveLeft, moveRight	移動方向をフラグで管理（true/false）
setInterval	20ミリ秒ごとに位置を更新し、スムーズに動く
keydown	押された方向のフラグをON
keyup	離されたときフラグをOFF

Step３｜スペースキーで弾を発射！

次に、スペースキーで発射される弾を実装しましょう！
以下のコードを先ほどのscript内に追加してください。
HTMLには弾を用意しません、JavaScriptで都度生成します。

function shoot() {
    const bullet = document.createElement("div");
    bullet.className = "bullet";
    bullet.style.left = playerX + 15 + "px";
    bullet.style.bottom = "60px";
    document.getElementById("gameArea").appendChild(bullet);

    // 弾を上に動かす
    const interval = setInterval(() => {
        const currentBottom = parseInt(bullet.style.bottom);
        if (currentBottom > 400) {
            bullet.remove();
            clearInterval(interval);
        } else {
            bullet.style.bottom = currentBottom + 5 + "px";
        }
    }, 10);
}

Step2で入力した移動処理の下に以下のコードを追記しましょう！

if (e.key === "ArrowRight") moveRight = true;
----------------下のコードを追記-----------------
// スペースキーで弾発射（移動と同時可能）
if (e.code === "Space") {
    shoot();
}

ここで行っていることは：

• スペースキーが押されたとき、弾の位置を自機の中央にセット
• setInterval()を使って弾を上方向に少しずつ移動
• 上端（> 400px）に到達したら弾を非表示にする

Step4｜作ったJavaScriptコードをHTMLに登録！

Step3まで終わった人は一度HTMLを起動してみてください！
あれ、、動かない！！

そうなんです、作っただけでは動きません、登録が必要なんです。
ということで作ったJavaScriptコードをHTMLに登録しましょう！

htmlの最後のほうに追記をします。

</div>
<script src="script.js"></script>
</body>
</html>

ファイルの名前がscript.jsでない人は作成したファイル名に置き換えてください！

まとめとおさらい

今回実装した内容👇

• キーボード操作で自機を左右に動かす
• スペースキーで弾を発射する
• 弾が上方向に飛んでいく仕組み

次回は、敵キャラの出現・当たり判定・ゲームオーバー処理など、ゲームらしい流れを構築していきます。