魅力的なモグラたたきゲームを作成する

はじめに

このプロジェクトでは、HTML、CSS、JavaScript を使ってモグラたたきゲームを作成する方法を学びます。このゲームでは、指定された時間制限内に穴からランダムに現れるモグラをたたきます。必要な HTML、CSS、JavaScript ファイルを作成し、ゲームロジックを段階的に実装します。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

モグラたたきゲーム用のプロジェクトファイルをセットアップする方法
ゲームのレイアウトとデザインを作成するために必要な CSS スタイルを追加する方法
モグラが現れたり消えたりするゲームロジック、得点を管理する方法、時間を追跡する方法を実装する方法
モグラをたたくためのイベントリスナーとゲームを開始するためのイベントリスナーを作成する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

ウェブベースのゲーム用の HTML、CSS、JavaScript ファイルを作成する
CSS を使ってゲーム要素をスタイリッシングし、レイアウトを整える
JavaScript を使って DOM を操作して、ゲーム要素を表示したり非表示にしたりする
ユーザーのインタラクションを処理し、ゲーム状態を更新する
JavaScript のタイマーを使って時間を追跡し、ゲームのフローを制御する

プロジェクトファイルを作成する

まず、モグラたたきゲーム用のプロジェクトファイルを作成しましょう。

cd コマンドを使って ~/project ディレクトリに移動します。
index.html という新しいファイルを作成します。
以下のコードをコピーして index.html に貼り付けます。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Whack-a-Mole!</title>
  </head>

  <body
    class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 flex items-center justify-center h-screen"
  >
    <div class="game bg-white p-8 rounded-lg shadow-2xl text-center">
      <h1 class="text-4xl font-bold mb-4 text-red-600">Whack-a-Mole!</h1>
      <p class="score text-2xl text-red-600">
        Score: <span id="score">0</span>
      </p>
      <p class="time text-2xl text-red-600">
        Time Left: <span id="time">0</span>
      </p>
      <button
        id="startBtn"
        class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mt-4 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
      >
        Start Game
      </button>
      <div id="grid" class="grid grid-cols-3 gap-4 mt-4">
        <!-- Holes will be added here -->
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

✨ 解答を確認して練習

CSS スタイルを追加する

styles.css という新しいファイルを作成します。
以下のコードをコピーして styles.css に貼り付けます。

.game {
  width: 600px;
  border-radius: 2rem;
}

.hole {
  height: 0;
  padding-bottom: 100%;
  position: relative;
  background: #eee;
  border: 3px solid #ccc;
  border-radius: 50%;
  overflow: hidden;
}

.mole {
  width: 100%;
  height: 100%;
  background: #a0522d;
  border-radius: 50%;
  position: absolute;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.mole.up {
  transform: translateY(0);
}

.mole.whacked {
  background: #008cff;
}

#startBtn {
  background-color: #0051ff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

#startBtn:hover {
  background-color: #028a5f;
}

✨ 解答を確認して練習

ゲームロジックを追加する

main.js という新しいファイルを作成します。
後続の手順で JavaScript コードを追加します。

さて、main.js ファイルにゲームロジックを追加しましょう。

main.js ファイルを開きます。
以下のコードをコピーして main.js に貼り付けます。

const grid = document.querySelector("#grid");
const scoreDisplay = document.querySelector("#score");
const timeDisplay = document.querySelector("#time");
const startBtn = document.querySelector("#startBtn");
let holes = [];
let score = 0;
let lastHole;
let timeUp = false;
let gameTimer;
let countdownTimer;
let countdown;

function createHoles() {
  for (let i = 0; i < 6; i++) {
    const hole = document.createElement("div");
    const mole = document.createElement("div");

    hole.classList.add("hole");
    mole.classList.add("mole");

    hole.appendChild(mole);
    grid.appendChild(hole);

    holes.push(hole);
  }
}

function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function randomHole(holes) {
  const idx = Math.floor(Math.random() * holes.length);
  const hole = holes[idx];
  if (hole === lastHole) {
    return randomHole(holes);
  }
  lastHole = hole;
  return hole;
}

function peep() {
  // TODO: 手順 3 でこの関数を実装します。
}

function startGame() {
  // TODO: 手順 4 でこの関数を実装します。
}

function whack(e) {
  // TODO: 手順 5 でこの関数を実装します。
}

createHoles();
// TODO: 手順 6 で残りのコードを実装します。

このコードは、さまざまな HTML 要素への参照を格納するための変数を定義し、その他必要な変数を初期化します。また、穴を作成する、ランダムな時間と穴を生成する、モグラを表示したり非表示にしたりする、ゲームを開始する、およびモグラをたたくことを処理するいくつかの関数を定義しています。最後に、穴を作成し、穴にイベントリスナーを追加し、開始ボタンのクリックイベントリスナーを設定します。

✨ 解答を確認して練習

`peep` 関数を実装する

この手順では、モグラをランダムに表示したり非表示にしたりする peep 関数を実装します。

main.js ファイルを開きます。
peep 関数を見つけます。
既存のコードを以下のコードに置き換えます。

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole(holes);
  hole.querySelector(".mole").classList.add("up");

  setTimeout(() => {
    hole.querySelector(".mole").classList.remove("up");
    hole.querySelector(".mole").classList.remove("whacked");
    if (!timeUp) peep();
  }, time);
}

この関数は、randomTime 関数を使って 200 ミリ秒から 1000 ミリ秒の間のランダムな時間間隔を設定します。randomHole 関数を使ってランダムな穴を選び、モグラ要素に up クラスを追加することでモグラを表示します。指定された時間間隔が経過すると、up クラスを削除することでモグラが消えます。ゲームが終了していない場合（timeUp が false）、この関数は再帰的に自分自身を呼び出して別のモグラを表示します。

✨ 解答を確認して練習

`startGame` 関数を実装する

次に、ゲームを初期化してタイマーを開始する startGame 関数を実装します。

main.js ファイルを開きます。
startGame 関数を見つけます。
既存のコードを以下のコードに置き換えます。

function startGame() {
  scoreDisplay.textContent = 0;
  timeUp = false;
  score = 0;
  peep();
  gameTimer = setTimeout(() => (timeUp = true), 10000);
  countdown = 10;
  timeDisplay.textContent = countdown;
  startBtn.disabled = true;
  countdownTimer = setInterval(() => {
    countdown--;
    if (countdown < 0) {
      clearInterval(countdownTimer);
      startBtn.disabled = false;
      return;
    }
    timeDisplay.textContent = countdown;
  }, 1000);
}

この関数は、スコアを初期化し、timeUp を false に設定し、スコア表示をリセットします。モグラの表示を開始するために peep 関数を呼び出します。setTimeout を使って 10 秒後に timeUp を true に設定するゲームタイマーを開始します。また、カウントダウンタイマーを設定して 1 秒ごとに時間表示を更新します。カウントダウンは最初に 10 に設定されており、0 になるとカウントダウンタイマーがクリアされ、開始ボタンが有効になり、関数は返ります。

✨ 解答を確認して練習

`whack` 関数を実装する

さて、モグラをたたいてスコアを更新する whack 関数を実装しましょう。

main.js ファイルを開きます。
whack 関数を見つけます。
既存のコードを以下のコードに置き換えます。

function whack(e) {
  if (!e.isTrusted || !this.querySelector(".mole").classList.contains("up"))
    return; // 疑似クリックが検出されたか、またはモグラが上に出ていない
  score++;
  this.querySelector(".mole").classList.remove("up");
  this.querySelector(".mole").classList.add("whacked");
  scoreDisplay.textContent = score;
}

この関数は、モグラがクリックされたときに呼び出されます。クリックイベントが信頼できるかどうか (e.isTrusted) をチェックして疑似クリックを防ぎます。また、モグラが現在上に出ているかどうかを up クラスがあるかどうかでチェックします。クリックが有効な場合、スコアをインクリメントし、モグラ要素から up クラスを削除し、モグラがたたかれたことを視覚的に示すために whacked クラスを追加し、スコア表示を更新します。

✨ 解答を確認して練習

ゲームとイベントリスナーを初期化する

この手順では、穴を作成し、穴と開始ボタンにイベントリスナーを追加することでゲームを初期化します。

main.js ファイルを開きます。
createHoles() 関数呼び出しのある行を見つけます。
createHoles() 関数呼び出しの後に以下のコードを追加します。

holes.forEach((hole) => hole.addEventListener("click", whack));

startBtn.addEventListener("click", startGame);

このコードは、各穴要素にクリックイベントリスナーを追加します。穴がクリックされると、whack 関数が呼び出されます。また、開始ボタンにもクリックイベントリスナーを追加し、クリックされると startGame 関数が呼び出されます。

モグラたたきゲームをテストする

WebIDE の右下隅にある「Go Live」ボタンをクリックし、「Web 8080」タブに切り替えます。

これにより、「Web 8080」タブでプロジェクトが開きます。

✨ 解答を確認して練習

まとめ

このプロジェクトでは、モグラたたきゲーム用のプロジェクトファイルを作成しました。HTML 構造を作成し、CSS スタイルを追加し、JavaScript を使ってゲームロジックを実装しました。次のステップでは、ゲームのさらなるカスタマイズと機能強化が必要になります。たとえば、サウンド、レベル、難易度設定の追加などです。

モグラたたきゲームの作成

はじめに

👀 プレビュー

🎯 タスク

🏆 成果

ブラウザでそのまま実践！

プロジェクトファイルを作成する

CSS スタイルを追加する

読むだけじゃ身につかない。手を動かそう。

ゲームロジックを追加する

`peep` 関数を実装する

設定不要、すぐに練習できる。

`startGame` 関数を実装する

`whack` 関数を実装する

ゲームとイベントリスナーを初期化する

モグラたたきゲームをテストする

まとめ

モグラたたきゲームの作成

はじめに

👀 プレビュー

🎯 タスク

🏆 成果

ブラウザでそのまま実践！

プロジェクトファイルを作成する

CSS スタイルを追加する

読むだけじゃ身につかない。手を動かそう。

ゲームロジックを追加する

peep 関数を実装する

設定不要、すぐに練習できる。

startGame 関数を実装する

whack 関数を実装する

ゲームとイベントリスナーを初期化する

モグラたたきゲームをテストする

まとめ

`peep` 関数を実装する

`startGame` 関数を実装する

`whack` 関数を実装する