【JavaScript】数字当てゲームにクリア演出とゲームオーバーを追加！初心者でもコピペで遊べる改良版

こんにちは！Web整備士です。

今回は、前回作った「数字当てゲーム」をさらにゲームらしく改良しました。

追加したのは、残り回数・クリア画面・ゲームオーバー画面・クラッカー風の演出です。

記事の途中で、実際にゲームも遊べるようにしています。

今回作ったゲーム
前回までの3ファイル方式との違い
実際に遊べるゲーム
ゲーム画面の流れ
追加した機能
コードの見方
今回つまずいたところ
HTML・CSS・JavaScriptの役割
完成コードを貼る場所
Blogger用に一部コードを変えたところ
完成コード
A8広告
まとめ

今回作ったゲーム

今回作ったのは、1〜10の数字を当てるゲームです。

5回以内に正解を当てる
間違えると残り回数が減る
正解するとクリア画面になる
5回失敗するとゲームオーバーになる
クリアするとクラッカー風の演出が出る

画像①：メニュー画面をここに入れる

代替テキスト：数字当てゲームのメニュー画面

前回までの3ファイル方式との違い

最初の記事では、index.html・style.css・script.js の3つのファイルに分けて作りました。

今回は、記事の中で遊べるようにしたり、読者がコピペしやすいようにしたりするため、HTML・CSS・JavaScriptをすべて index.html の中にまとめています。

CSSは <style> の中に入れています。

JavaScriptは <script> の中に入れています。

つまり

CSSとJavaScriptを使っていないわけではありません。

今回は、CSSもJavaScriptも index.htmlの中に入れている だけです。

前回までのファイルを上書きしたくない人は、新しく別の index.html を作って試すのがおすすめです。

実際に遊べるゲーム

下のゲームで、実際に遊べます。

1〜10の数字を入力して、5回以内に当ててみてください。

数字当てゲーム

1から10までの数字を当てよう！

今回は5回以内に当てるルールです。

数字を当ててね

挑戦できる回数：5回

残り回数：5回

1〜10の数字を入力してください。

スコア確認

遊んだ回数：0回

クリア回数：0回

ゲームオーバー回数：0回

ゲーム画面の流れ

「最初から」を押すと、数字を入力する画面に進みます。

画像②：ゲーム開始画面をここに入れる

代替テキスト：数字当てゲームの入力画面

間違えると、ヒントと残り回数が表示されます。

画像③：ヒント表示画面をここに入れる

代替テキスト：数字当てゲームでヒントが表示されている画面

残り回数が少なくなると、少しドキドキ感が出ます。

画像④：残り1回の画面をここに入れる

代替テキスト：数字当てゲームで残り回数が1回になった画面

5回以内に当てられなかった場合は、ゲームオーバーになります。

画像⑤：ゲームオーバー画面をここに入れる

代替テキスト：数字当てゲームのゲームオーバー画面

正解すると、クリア画面が表示されます。

画像⑥：クリア画面をここに入れる

代替テキスト：数字当てゲームのクリア画面

追加した機能

挑戦できる回数を5回にする
残り回数を表示する
間違えるたびに残り回数を減らす
正解したらクリア画面を出す
失敗したらゲームオーバー画面を出す
クリアしたらクラッカー風の演出を出す

ポイント

回数制限を入れるだけで、ゲームはかなりゲームらしくなります。

コードの見方

完成コードは少し長いですが、全部を一気に理解しなくて大丈夫です。

HTML：画面に出す文字・ボタン・入力欄
CSS：色・余白・見た目
JavaScript：数字の判定・画面切り替え・クラッカー演出

まずは、index.htmlに貼って動かすことを優先してください。

今回つまずいたところ

今回は、クリアしたときにクラッカー風の演出を出すだけの予定でした。

しかし、思ったより苦戦しました。

原因は、直していたファイルと、実際に動いていたコードの場所が違っていたことです。

最初は script.js を直していましたが、実際に動いていたJavaScriptは index.html の中に直接書かれていました。

今回の学び

プログラミングでは、「そのコードが本当に読み込まれているか」も大事です。

HTML・CSS・JavaScriptの役割

小学生向けに言うと、HTMLは部品、CSSは見た目、JavaScriptは動きです。

完成コードを貼る場所

今回は、HTML・CSS・JavaScriptをすべて index.html にまとめたコードを使います。

VSCodeなどで index.html というファイルを作り、そこに完成コードを貼って保存します。

保存したあと、index.htmlをブラウザで開けばゲームを遊べます。

前回までの続きで作っている人へ

前回までの style.css や script.js を消す必要はありません。

今回は、新しく index.htmlだけの完成版 として試すのがおすすめです。

Blogger用に一部コードを変えたところ

今回の記事では、普通のHTMLファイルで動かすコードと、Blogger記事内で動かすコードで少し書き方を変えています。

理由は、Bloggerでは一部の記号や絵文字が自動で変換されることがあるからです。

たとえば、普通に ！ や 。 をJavaScriptの中に書くと、Blogger上で ！ や 。 のように表示されることがありました。

さらに、クラッカー演出に使う絵文字も、Blogger上で ✨ のように表示されることがありました。

そこで、記事内で実際に遊べるゲーム部分では、日本語記号や絵文字をUnicode表記にしています。

\uFF01 → ！
\u3002 → 。
\u300C → 「
\u300D → 」
\uD83C\uDF89 → 🎉
\uD83C\uDF8A → 🎊
\u2728 → ✨
\u2B50 → ⭐

ポイント

完成コードをindex.htmlで動かす場合は、普通の日本語記号や絵文字でも大丈夫です。

ただし、Blogger記事内でゲームを直接動かす場合は、Unicode表記で書いたほうが安全です。

完成コード

こちらが完成コードです。

下のコードをコピーして、index.html に貼れば使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数字当てゲーム 改良版</title>

  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      background: #eef4ff;
      color: #222;
    }

    .game-wrapper {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .game-card {
      width: 100%;
      max-width: 420px;
      background: #ffffff;
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
      text-align: center;
      box-sizing: border-box;
    }

    h1, h2 {
      color: #1f2937;
    }

    .screen {
      display: none;
    }

    .screen.active {
      display: block;
    }

    .menu-buttons,
    .game-buttons,
    .result-buttons {
      display: grid;
      gap: 12px;
      margin-top: 18px;
    }

    button {
      border: none;
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      background: #4f7cff;
      color: white;
    }

    .sub-button {
      background: #6b7280;
    }

    input {
      width: 100%;
      padding: 12px;
      font-size: 18px;
      border: 2px solid #c7d2fe;
      border-radius: 12px;
      text-align: center;
      box-sizing: border-box;
      margin-top: 12px;
    }

    .status-box {
      background: #f3f7ff;
      border: 1px solid #c7d2fe;
      border-radius: 12px;
      padding: 12px;
      margin: 16px 0;
    }

    .message {
      font-weight: bold;
      min-height: 28px;
      margin-top: 14px;
    }

    .clear-title {
      color: #2563eb;
      font-size: 30px;
    }

    .gameover-title {
      color: #dc2626;
      font-size: 30px;
    }

    .clear-box {
      background: #eef6ff;
      border: 2px solid #93c5fd;
      border-radius: 16px;
      padding: 16px;
    }

    .gameover-box {
      background: #fff4f4;
      border: 2px solid #fca5a5;
      border-radius: 16px;
      padding: 16px;
    }

    #confettiArea {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 9999;
    }

    .confetti-piece {
      position: absolute;
      top: -40px;
      font-size: 28px;
      transition: transform 2s ease-out, opacity 2s ease-out;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div id="confettiArea"></div>

  <div class="game-wrapper">
    <div class="game-card">

      <section id="menuScreen" class="screen active">
        <h1>数字当てゲーム</h1>
        <p>1から10までの数字を当てよう！</p>
        <p>今回は5回以内に当てるルールです。</p>

        <div class="menu-buttons">
          <button onclick="startNewGame()">最初から</button>
          <button onclick="continueGame()">続きから</button>
          <button class="sub-button" onclick="showScoreScreen()">スコア確認</button>
        </div>
      </section>

      <section id="gameScreen" class="screen">
        <h2>数字を当ててね</h2>

        <div class="status-box">
          <p>挑戦できる回数：<strong id="maxTryText">5</strong>回</p>
          <p>残り回数：<strong id="remainingTryText">5</strong>回</p>
        </div>

        <p>1〜10の数字を入力してください。</p>

        <input id="guessInput" type="number" min="1" max="10" placeholder="数字を入力">

        <div class="game-buttons">
          <button onclick="checkAnswer()">答える</button>
          <button class="sub-button" onclick="showMenuScreen()">メニューに戻る</button>
        </div>

        <p id="messageText" class="message"></p>
      </section>

      <section id="resultScreen" class="screen">
        <div id="resultBox">
          <h2 id="resultTitle"></h2>
          <p id="resultMessage"></p>
          <p id="answerText"></p>
        </div>

        <div class="result-buttons">
          <button onclick="startNewGame()">もう一度遊ぶ</button>
          <button class="sub-button" onclick="showMenuScreen()">メニューに戻る</button>
        </div>
      </section>

      <section id="scoreScreen" class="screen">
        <h2>スコア確認</h2>
        <p>遊んだ回数：<strong id="playCountText">0</strong>回</p>
        <p>クリア回数：<strong id="clearCountText">0</strong>回</p>
        <p>ゲームオーバー回数：<strong id="gameoverCountText">0</strong>回</p>

        <div class="result-buttons">
          <button class="sub-button" onclick="showMenuScreen()">メニューに戻る</button>
        </div>
      </section>

    </div>
  </div>

  <script>
    let answerNumber = 0;
    let maxTry = 5;
    let remainingTry = maxTry;
    let isPlaying = false;
    let playCount = 0;
    let clearCount = 0;
    let gameoverCount = 0;

    function showScreen(screenId) {
      const screens = document.querySelectorAll(".screen");

      screens.forEach(function(screen) {
        screen.classList.remove("active");
      });

      document.getElementById(screenId).classList.add("active");
    }

    function showMenuScreen() {
      showScreen("menuScreen");
    }

    function startNewGame() {
      answerNumber = Math.floor(Math.random() * 10) + 1;
      remainingTry = maxTry;
      isPlaying = true;
      playCount++;

      document.getElementById("guessInput").value = "";
      document.getElementById("messageText").textContent = "";

      updateTryText();
      showScreen("gameScreen");
    }

    function continueGame() {
      if (isPlaying) {
        showScreen("gameScreen");
      } else {
        startNewGame();
      }
    }

    function updateTryText() {
      document.getElementById("maxTryText").textContent = maxTry;
      document.getElementById("remainingTryText").textContent = remainingTry;
    }

    function showConfetti() {
      const confettiArea = document.getElementById("confettiArea");
      const symbols = ["🎉", "🎊", "✨", "⭐"];

      confettiArea.innerHTML = "";

      for (let i = 0; i < 30; i++) {
        const confetti = document.createElement("div");

        confetti.classList.add("confetti-piece");
        confetti.textContent = symbols[Math.floor(Math.random() * symbols.length)];
        confetti.style.left = Math.random() * 100 + "vw";
        confetti.style.fontSize = Math.floor(Math.random() * 18 + 22) + "px";

        confettiArea.appendChild(confetti);

        setTimeout(function() {
          confetti.style.transform = "translateY(110vh) rotate(360deg)";
          confetti.style.opacity = "0";
        }, 50 + Math.random() * 300);

        setTimeout(function() {
          confetti.remove();
        }, 2800);
      }
    }

    function checkAnswer() {
      const input = document.getElementById("guessInput");
      const messageText = document.getElementById("messageText");
      const guessNumber = Number(input.value);

      if (!guessNumber) {
        messageText.textContent = "数字を入力してね。";
        return;
      }

      if (guessNumber < 1 || guessNumber > 10) {
        messageText.textContent = "1から10までの数字を入力してね。";
        return;
      }

      if (guessNumber === answerNumber) {
        clearCount++;
        isPlaying = false;
        showResultScreen("clear");
        return;
      }

      remainingTry--;
      updateTryText();

      if (remainingTry === 0) {
        gameoverCount++;
        isPlaying = false;
        showResultScreen("gameover");
        return;
      }

      if (guessNumber < answerNumber) {
        messageText.textContent = "もっと大きい数字だよ。残り" + remainingTry + "回！";
      } else {
        messageText.textContent = "もっと小さい数字だよ。残り" + remainingTry + "回！";
      }

      input.value = "";
    }

    function showResultScreen(resultType) {
      const resultBox = document.getElementById("resultBox");
      const resultTitle = document.getElementById("resultTitle");
      const resultMessage = document.getElementById("resultMessage");
      const answerText = document.getElementById("answerText");

      resultBox.className = "";

      if (resultType === "clear") {
        resultBox.classList.add("clear-box");
        resultTitle.className = "clear-title";
        resultTitle.textContent = "🎉 クリア！ 🎉";
        resultMessage.textContent = "おめでとう！正解の数字を当てました。";
        answerText.textContent = "正解は「" + answerNumber + "」でした。";
        showConfetti();
      }

      if (resultType === "gameover") {
        resultBox.classList.add("gameover-box");
        resultTitle.className = "gameover-title";
        resultTitle.textContent = "ゲームオーバー";
        resultMessage.textContent = "残念！5回以内に当てられませんでした。";
        answerText.textContent = "正解は「" + answerNumber + "」でした。";
      }

      showScreen("resultScreen");
    }

    function showScoreScreen() {
      document.getElementById("playCountText").textContent = playCount;
      document.getElementById("clearCountText").textContent = clearCount;
      document.getElementById("gameoverCountText").textContent = gameoverCount;
      showScreen("scoreScreen");
    }
  </script>
</body>
</html>

A8広告

まとめ

今回は、数字当てゲームにクリア演出とゲームオーバー画面を追加しました。

回数制限を入れることで、前よりもゲームらしくなりました。

さらに、クリア時にクラッカー風の演出を入れたことで、成功した感じも出せました。

今回は、前回までの3ファイル方式との違いも説明しました。

CSSとJavaScriptを使っていないわけではなく、今回はindex.htmlの中にまとめています。

まずは動かす。次に直す。そして少しずつゲームらしくする。

この流れで進めれば、初心者でも少しずつゲーム作りに慣れていけます。

1つの商品を紹介する記事の形を作りやすくする無料テンプレ

3月 31, 2026

このブログを検索

無料コード配布ブログ