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

2025年7月27日

はじめに｜いよいよ最終回！スコアとステージでゲームを仕上げよう！

全3回にわたって作ってきた「HTML・CSSでかんたんなシューティングゲームを作ろう！」も、いよいよ最終回です！

これまでに以下の機能を実装してきました👇

自機（プレイヤー）の左右移動
スペースキーでの弾発射
敵の出現と当たり判定
ゲームオーバー処理

今回は、よりゲームらしくするために以下を追加していきます！

✅ 今回の実装内容

スコアの表示と加算
敵のスピード上昇によるステージ進行
クリア判定・ゲームオーバー分岐
リスタート処理

完成後の動作は以下のようになります👇

弾が敵に当たるとスコア+100
一定スコアごとに敵が速くなる（ステージUP）
スコアが一定を超えると「ゲームクリア！」メッセージ

完成映像

💻 Step 1｜HTMLにスコア表示用の要素を追加しよう

まずは、スコア表示エリアをHTMLに追加します。

<!-- スコア表示 -->
<div id="scoreBoard">SCORE: 0</div>

この #scoreBoard にスコアをリアルタイム表示します。
ゲーム画面上部に表示させたい場合は、CSSも以下のようにします：

#scoreBoard {
  position: absolute;
  top: 10px;
  left: 10px;
  color: white;
  font-size: 20px;
  font-family: monospace;
}

🔢 Step 2｜スコアを加算しよう

JavaScriptにスコア管理の変数と更新処理を追加します。

let score = 0;

function updateScore(amount) {
  score += amount;
  document.getElementById("scoreBoard").textContent = "SCORE: " + score;
}

そして、弾が敵に当たったときにスコア加算！

function shoot() {
    .......省略.........
　　if (checkCollision(bullet, enemy)) {
    　　bullet.remove();
    　　resetEnemy();
    　　updateScore(100); // スコア+100
        return;
　　}

🚀 Step 3｜ステージレベルと敵スピードを管理しよう

続いて、スコアに応じて「ステージレベル」を上げていきます。

let stage = 1;
let enemySpeed = 2; // 初期速度

スコアが500点ごとにステージUPし、敵のスピードが1ずつ上昇するようにします。

function checkStageUp() {
  const newStage = Math.floor(score / 500) + 1;
  if (newStage > stage) {
    stage = newStage;
    enemySpeed += 1;
  }
}

これを updateScore() の中で呼び出すようにします：

function updateScore(amount) {
  score += amount;
  document.getElementById("scoreBoard").textContent = "SCORE: " + score;
  checkStageUp();
}

👾 Step 4｜敵のスピードを動的に変更しよう

敵の移動処理は setInterval の中で、enemyY += enemySpeed; のように変更します

setInterval(() => {
    enemyY += enemySpeed;
    enemy.style.top = enemyY + "px";

    // 衝突・画面外処理...
}, 30);

これでスコアが500点ごとにステージUPし、敵のスピードが1ずつ上昇するようになります

🏁 Step 5｜クリア条件を追加しよう

例えばスコアが「2000以上」になったら「ゲームクリア」とします

function checkGameClear() {
  if (score >= 2000) {
    endGame("ゲームクリア！おめでとう！");
  }
}

この関数を updateScore() の最後で呼んでみましょう！

function updateScore(amount) {
  score += amount;
  document.getElementById("scoreBoard").textContent = "SCORE: " + score;
  checkStageUp();
  checkGameClear();
}

🔁 Step 6｜ゲームリスタートボタンの追加（任意）

クリアやゲームオーバー後に、再スタートできるようにボタンを追加しましょう。

HTML

<button id="restartBtn" onclick="location.reload()" style="display:none;">もう一度プレイ</button>

CSS

#restartBtn {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  padding: 10px 20px;
}

endGame() 関数内で表示

function endGame(messageText) {
  document.getElementById("message").textContent = messageText;
  document.getElementById("message").style.visibility = "visible";

  // 入力禁止にする
  document.removeEventListener("keydown", handleKeydown);

  // ボタン表示
  document.getElementById("restartBtn").style.display = "block";
}

✅ おさらい

今回の記事では、ゲーム完成に向けて以下を実装しました！

実装内容	説明
スコア加算	弾が敵に当たるたびに +100点
ステージ進行	スコア500点ごとにステージUP（敵スピード上昇）
クリア判定	スコア2000点以上でクリア
再スタートボタン	ゲームをもう一度プレイ可能に