射的ゲーム 基本編 (的の動きとスコア管理)

射的ゲームに本格的な機能を追加しよう！

前回の「07 射的ゲーム準備編」では、HTML・CSS・JavaScriptを使って基本的な的と射撃の仕組みを作りました。今回は、本格的なゲームらしい機能を追加していきます¹。

ここから射的ゲームがどんどん楽しくなっていきます！動く的、スコア表示、制限時間など、本物のゲームに近づけていきましょう。

わーい！今度は的が動いたり、スコアが表示されたりするんだね！本格的なゲームになりそうで楽しみ！

今回の目標

この回では、射的ゲームを本格的なゲームに発展させます：

1. 的をランダムに動かす - クリック後に的がランダムな位置に移動
2. 命中回数のカウント - スコア機能の実装
3. 制限時間をつける - タイマー機能とゲーム終了処理
4. ゲーム開始ボタン - ゲーム状態の管理

4つも新しい機能！大丈夫かな？でも、一つずつ丁寧に進めていけば、きっとできるよね！

1. 的をランダムに動かす（クリック後に移動）

まず、的をクリックしたときにランダムな位置に移動させる機能を作ります。前回作った基礎に少しずつ機能を追加していきましょう。

ランダム移動の基本を理解しよう

まずは、JavaScriptの Math.random()² を使って、的をランダムな位置に動かしてみます：

a

おお！的をクリックすると、ランダムな場所に飛んでいく！これで逃げる的ができたね！

JavaScriptのポイント：

1. Math.random(): 0以上1未満のランダムな小数を生成
2. テンプレートリテラル: ${変数名}³ で文字列に値を埋め込み
3. position: absolute: CSSで要素を自由な位置に配置

実践: ランダム移動を自分で実装してみよう

以下のコメントを参考に、的がクリックされるとランダムに移動する機能を完成させてください：

a

解答例を見る

script.js

// 的の要素を取得
const targetElement = document.querySelector(".target");

// 的がクリックされたときの処理を設定
targetElement.addEventListener("click", () => {
  // 0から85までのランダムな数値を生成
  const randomLeft = Math.random() * 85;
  const randomTop = Math.random() * 85;

  // 的の位置を変更
  targetElement.style.left = `${randomLeft}%`;
  targetElement.style.top = `${randomTop}%`;
});

ランダム移動のポイント：

• Math.random() * 85 で0〜85%の範囲に制限（的が画面外に出ないように）
• style.left と style.top でCSSの位置を動的に変更
• クリックするたびに新しいランダムな位置に移動

2. 命中回数のカウント

次に、命中したときにスコアをカウントする機能を追加します。画面にスコアを表示して、ゲームらしくしていきましょう。

スコア表示の追加

HTMLにスコア表示用の要素を追加し、JavaScriptでスコアを管理します：

a

やった！的をクリックするたびにスコアが増えていく！0, 1, 2, 3… って数字が上がっていくのが楽しい！

JavaScriptのポイント：

1. let変数⁴: 後から値を変更できる変数の宣言
2. インクリメント: score++ でスコアを1増やす
3. textContent⁵: 要素のテキストを動的に変更

実践: スコア機能を自分で実装してみよう

以下のコメントを参考に、的をクリックするとスコアが増える機能を作ってください：

a

解答例を見る

script.js

// 要素を取得
const targetElement = document.querySelector(".target");
const scoreElement = document.querySelector("#score");

// スコアを管理する変数を宣言
let score = 0;

// 的がクリックされたときの処理を設定
targetElement.addEventListener("click", () => {
  // スコアを1増やす
  score++;

  // 画面のスコア表示を更新
  scoreElement.textContent = `score: ${score}`;

  // 的をランダムな位置に移動
  const randomLeft = Math.random() * 85;
  const randomTop = Math.random() * 85;
  targetElement.style.left = `${randomLeft}%`;
  targetElement.style.top = `${randomTop}%`;
});

スコア管理のポイント：

• let score = 0 でスコアの初期値を設定
• score++ でクリックするたびにスコアを1増加
• textContent でHTMLの表示を動的に更新

3. 制限時間をつける

ゲームに制限時間を設けて、時間が経過したら終了するようにします。タイマー機能とゲーム終了画面を実装しましょう。

タイマー機能の基本実装

まずは基本的なタイマー機能を追加します：

a

すごい！10秒のカウントダウンが始まって、時間が0になったらゲーム終了画面が出た！的も消えて、最終スコアが表示されてる！

JavaScriptのポイント：

1. setInterval⁶: 指定した時間間隔で処理を繰り返し実行
2. clearInterval: 開始したタイマーを停止
3. ゲーム状態管理: isGameActive でゲームの状態を制御

実践: タイマー機能を自分で実装してみよう

以下のコメントを参考に、10秒のカウントダウンタイマーを作ってみてください：

a

解答例を見る

script.js

// 要素を取得
const targetElement = document.querySelector(".target");
const scoreElement = document.querySelector("#score");
const timerElement = document.querySelector("#timer");
const gameOverScreen = document.querySelector("#game-over-screen");
const finalScoreElement = document.querySelector("#final-score");

// ゲーム状態を管理する変数を宣言
let score = 0;
let timeLeft = 10;
let isGameActive = true;
let timerId = null;

// タイマーを開始する処理
const startTimer = () => {
  timerId = setInterval(() => {
    // 残り時間を1減らす
    timeLeft--;

    // タイマー表示を更新
    timerElement.textContent = `time: ${timeLeft}`;

    // 時間が0以下になったらゲーム終了
    if (timeLeft <= 0) {
      isGameActive = false;
      clearInterval(timerId);

      // UI更新
      targetElement.classList.add("hidden");
      finalScoreElement.textContent = score;
      gameOverScreen.classList.remove("hidden");
    }
  }, 1000);
};

// 的のクリックイベントを設定
targetElement.addEventListener("click", () => {
  if (!isGameActive) return;

  score++;
  scoreElement.textContent = `score: ${score}`;

  const randomLeft = Math.random() * 85;
  const randomTop = Math.random() * 85;

  targetElement.style.left = `${randomLeft}%`;
  targetElement.style.top = `${randomTop}%`;
});

// ゲーム開始
startTimer();

タイマー機能のポイント：

• setInterval(関数, 1000) で1秒ごとに処理を実行
• timeLeft-- で毎秒1ずつ減らす
• isGameActive でゲーム終了後のクリックを無効化

4. ゲーム開始ボタン

最後に、ゲーム開始ボタンを追加して、ゲーム状態を適切に管理できるようにします。これで完全な射的ゲームが完成します！

ゲーム開始ボタンの基本実装

ゲーム開始前の画面とボタンを追加し、ゲームの状態管理を完璧にしましょう：

a

ゲーム状態管理のポイント：

• startGame() 関数⁷でゲーム開始時の初期化処理をまとめる
• endGame() 関数でゲーム終了時の処理をまとめる
• classList.add("hidden") / classList.remove("hidden") で画面切り替え

実践: ゲーム開始ボタンを自分で実装してみよう

以下のコメントを参考に、完全な射的ゲームを完成させてください：

a

解答例を見る

完全なコードは上記の例を参考にしてください。

重要なポイント：

• 関数による処理の整理: 複雑な処理を startGame() と endGame() 関数にまとめる
• ゲームライフサイクル: 開始→プレイ中→終了→再開の流れを管理
• UI状態の切り替え: classList を使って画面の表示/非表示を制御
• イベント処理: ボタンクリックと的のクリックを適切に処理

まとめ

この章では射的ゲームを本格的なゲームに発展させました！

今回学んだこと:

• ✅ Math.random()を使ったランダム移動の実装
• ✅ スコア管理とDOM操作による動的なUI更新
• ✅ setInterval/clearIntervalを使ったタイマー機能
• ✅ ゲーム状態管理とライフサイクルの設計
• ✅ イベント処理とユーザーインタラクションの改善
• ✅ 関数を使ったコードの整理

完璧な射的ゲームができた！ランダムに動く的、スコア表示、制限時間、きれいなUI… 本当にゲームらしくなったね！

次回は、さらに高度な機能（複数の的、難易度設定、ハイスコア機能など）を追加して、より本格的なゲームに発展させていきます！

しっかりと基礎を理解して、次のステップに進みましょう！

JavaScript 基本構文 MDNで詳しく学ぶ

ゲーム開発の基礎 MDNで詳しく学ぶ

チェックポイント！

• Math.random()を使ってランダムな値を生成できる
• テンプレートリテラルで文字列に変数を埋め込める
• let/constを使った適切な変数管理ができる
• DOM操作でUIを動的に更新できる
• setInterval/clearIntervalでタイマー機能を実装できる
• イベントリスナーでユーザーの操作を検知できる
• 関数を使ってコードを整理できる
• ゲーム状態の管理とライフサイクルを理解している

脚注

Footnotes

1. JavaScriptとは ↗ - esa#1049 ↩

2. 数値に関する演算子 ↗ - esa#1049 ↩

3. 文字列に関する演算子 ↗ - esa#1049 ↩

4. 変数は宣言して使う ↗ - esa#1049 ↩

5. HTMLの要素を取得する ↗ - esa#1049 ↩

6. ループ編 ↗ - esa#1049 ↩

7. 関数編 ↗ - esa#1049 ↩