JavaScriptで作るシンプルなミニゲーム：クリックで操作するアクションゲーム

このミニゲームでは、画面上にランダムに出現する敵を、クリックで倒してスコアを競います。
JavaScriptのクリックイベントやDOM操作を活用し、初心者でも簡単に実装できるように解説します。

はじめに
1. 完成イメージ
HTMLコード
1. HTMLの解説
CSSコード
1. CSSの解説
JavaScriptコード
JavaScriptコードの解説
スコア: 0
まとめ
参考リンク

はじめに

このミニゲームでは、画面上にランダムに出現する**「敵」をクリックで倒し、スコアを競うシンプルなゲームを作成します。
クリックイベントやDOM操作**の基礎を学びながら、インタラクティブなWebアプリの開発を体験できます。

完成イメージ

**「スタートボタン」**を押すと、ランダムな位置に敵（赤い円）が出現
敵をクリックするとスコアが増加
30秒経過するとゲーム終了

HTMLコード

まずは、基本となるHTMLを作成します。

HTMLの解説

要素	役割
`<div id="gameContainer">`	敵が出現するエリア（ゲームフィールド）
`<h2 id="scoreBoard">`	スコアを表示
`<button id="startBtn">`	ゲームを開始するボタン

CSSコード

ゲームの見た目を整えるCSSを追加します。

CSSの解説

クラス	役割
`#gameContainer`	ゲームフィールドの設定（大きさや枠線）
`.enemy`	敵のデザイン（赤い円、クリック可能）

JavaScriptコード

最後に、ゲームの動きを実装するJavaScriptを記述します。

let score = 0;  // スコアを保持する変数

let gameInterval;  // 敵を定期的に生成するための変数

const gameContainer = document.getElementById("gameContainer");

const scoreBoard = document.getElementById("scoreBoard");

const startBtn = document.getElementById("startBtn");
// スコア更新関数

function updateScore() {

  scoreBoard.textContent = "スコア: " + score;

}
// 敵を生成する関数

function createEnemy() {

  const enemy = document.createElement("div");

  enemy.classList.add("enemy");

  enemy.textContent = "敵";
  // ランダムな位置を設定

  const maxWidth = gameContainer.clientWidth - 50;

  const maxHeight = gameContainer.clientHeight - 50;

  enemy.style.left = Math.floor(Math.random() * maxWidth) + "px";

  enemy.style.top = Math.floor(Math.random() * maxHeight) + "px";
  // 敵をクリックするとスコアが増える

  enemy.addEventListener("click", function() {

    enemy.remove(); // 敵を削除

    score += 10; // スコア加算

    updateScore();

  });
  gameContainer.appendChild(enemy);

}
// ゲーム開始関数

function startGame() {

  score = 0;  // スコアリセット

  updateScore();

  gameContainer.innerHTML = "";  // 既存の敵を消去

  gameInterval = setInterval(createEnemy, 1000);  // 1秒ごとに敵を生成

}
// ゲーム終了関数

function stopGame() {

  clearInterval(gameInterval);

  alert("ゲーム終了！最終スコアは " + score + " 点です。");

}

// スタートボタンをクリックするとゲーム開始 startBtn.addEventListener("click", function() { startGame(); setTimeout(stopGame, 30000); // 30秒後にゲーム終了 });

JavaScriptコードの解説

関数名	役割
`updateScore()`	スコアの表示を更新
`createEnemy()`	ランダムな位置に敵を生成し、クリック時にスコア加算
`startGame()`	ゲームを開始（スコアリセット＆敵の生成開始）
`stopGame()`	ゲーム終了（敵の生成を停止し、スコアを表示）

スコア: 0

まとめ

本記事では、JavaScriptのクリックイベントやDOM操作を使って、シンプルなミニゲームを作成する方法を解説しました。
敵をランダムに出現させ、クリックで倒すという基本的なゲームロジックを通して、インタラクティブなWebアプリケーションの作り方を学びました。
初心者の皆さんは、まずはこのミニゲームを実装し、クリックイベントやスコア管理などの基本を身につけ、その後さらに高度な機能にチャレンジしてください。