【HTML/CSS/JavaScript】初心者が1から作る！数当てゲームをゲーム画面っぽくしてみた

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

前回の記事では、Pythonを使って「数当てゲーム」を作りました。

ただ、正直に言うと……ターミナル画面だけだと、ちょっと地味でした。

ゲームとしてはちゃんと動くんですが、黒い画面に文字を入力するだけなので、「ゲームで遊んでる！」という感じは少なめです。

そこで今回は、HTML・CSS・JavaScriptを使って、数当てゲームをブラウザで遊べるゲーム画面っぽくしてみました！

コードがまだ読めなくても大丈夫です。

この記事では、コードが読める素人の方にも、コードがまだ読めない初心者の方にも伝わるように、できるだけやさしく説明していきます。

難しいコードの話だけではなく、画面で何が変わったのか、どのファイルが何を担当しているのかを中心に見ていきます。

今回作るもの
前回のターミナル版との違い
今回使った3つのファイル
作業環境と準備
HTMLはゲーム画面の部品を置く役目
CSSはゲーム画面の見た目を作る役目
JavaScriptはゲームを動かす役目
コピペして遊ぶ準備
コピペ用コード
実際にブラウザで遊んでみた
今回できたこと
次回予告
まとめ

今回作るもの

今回作ったのは、ブラウザで遊べる「数当てゲーム」です。

ゲームの内容は、前回のPython版とほぼ同じです。

1〜10の数字の中から、正解の数字を当てる
数字を入力して「答える」ボタンを押す
正解より小さければ「もっと大きいです」と表示される
正解より大きければ「もっと小さいです」と表示される
正解したら、正解メッセージが出る
挑戦回数が表示される
「最初から始める」ボタンでリセットできる

前回と違うのは、見た目です。

ターミナルで文字だけだったゲームを、今回は入力欄やボタンがあるゲーム画面にしました。

前回のターミナル版との違い

前回のPython版は、ターミナルで遊ぶゲームでした。

ターミナルは、文字でパソコンに命令を出す場所です。

プログラミングの練習には大事ですが、ゲーム画面として見ると少し地味です。

今回のブラウザ版では、こんなふうに変わりました。

背景に色がついた
ゲーム画面がカード風になった
数字を入力する場所が見やすくなった
ボタンを押して答えられるようになった
ヒントや正解メッセージが画面に表示されるようになった
挑戦回数がすぐ見えるようになった

やっているゲームの中身はシンプルですが、見た目が変わるだけで「お、ゲームっぽい！」と感じやすくなりました。

ゲームは見た目も大事ですね。ターミナルだけだと、どうしても業務感が出ます。遊びたいのに、急に仕事っぽい画面になるのはつらいです。

今回使った3つのファイル

今回は、次の3つのファイルを使いました。

index.html
style.css
script.js

初心者からすると、いきなり3つもファイルが出てくると「え、増えた……」となります。

でも大丈夫です。それぞれ役割が違うだけです。

HTML：ゲーム画面の部品を置く
CSS：見た目をゲームっぽく整える
JavaScript：ゲームを動かす

今回のポイント

前回はPythonでターミナル版を作りました。

今回はPythonではなく、HTML・CSS・JavaScriptを使って、ブラウザで遊べる見た目にしています。

作業環境と準備

ここで少しだけ、作業する環境についても書いておきます。

プログラミングは、コードを書く前に「どこで作業するのか」でつまずくことがあります。

正直、ここで心が折れる人もいると思います。コードを書く前に迷子になるのは、なかなか理不尽です。

今回は、次のような環境で作りました。

パソコン
VS Code
ブラウザ
HTML / CSS / JavaScript の3つのファイル

VS Codeは、コードを書くためのアプリです。

ブラウザは、作ったゲームを確認するために使います。今回はMacのブラウザで動作確認しました。

作業するときは、まず1つのフォルダを作ります。

フォルダ名は、たとえばこんな感じでOKです。

number-game

そのフォルダの中に、次の3つのファイルを作ります。

index.html
style.css
script.js

この3つは、必ず同じフォルダの中に入れてください。

同じ場所にないと、見た目が反映されなかったり、ボタンを押しても動かなかったりします。

初心者向けの注意です。

ファイル名はなるべくそのまま使ってください。

index.html、style.css、script.js の名前を変えると、うまく動かないことがあります。

まずは完璧に理解しなくても大丈夫です。

最初は「同じフォルダに3つのファイルを入れる」「index.htmlを開く」だけ覚えればOKです。

HTMLはゲーム画面の部品を置く役目

まず、HTMLです。

HTMLは、画面に表示する部品を置く役目です。

今回のゲームでは、HTMLで次のような部品を用意しています。

ゲームのタイトル
説明文
数字を入力する場所
答えるボタン
最初から始めるボタン
ヒントや正解を表示する場所
挑戦回数を表示する場所

小学生でもわかるように言うと、HTMLはゲーム画面の骨組みです。

「どこにタイトルを置くか」「どこにボタンを置くか」「どこにメッセージを出すか」を決めています。

CSSはゲーム画面の見た目を作る役目

次に、CSSです。

CSSは、HTMLで置いた部品に見た目をつける役目です。

今回のゲームでは、CSSで次のような見た目を作っています。

背景の色
ゲーム画面のカード風デザイン
ボタンの色
文字の大きさ
入力欄の見た目
メッセージ表示の色や形

小学生でもわかるように言うと、CSSはゲーム画面の服です。

HTMLだけだと白い画面に文字とボタンが並ぶだけですが、CSSを使うと一気にゲームっぽくなります。

JavaScriptはゲームを動かす役目

最後に、JavaScriptです。

JavaScriptは、ゲームを実際に動かす役目です。

今回のゲームでは、JavaScriptが次のような動きを担当しています。

1〜10の中から正解の数字を決める
入力された数字を確認する
正解より小さいか、大きいかを判定する
「もっと大きいです」「もっと小さいです」と表示する
正解したらメッセージを出す
挑戦回数を数える
最初から始めるボタンでゲームをリセットする

小学生でもわかるように言うと、JavaScriptはゲームの頭と動きです。

HTMLとCSSだけでは、画面は作れてもゲームとしては動きません。

JavaScriptがあることで、ボタンを押したときに反応したり、数字を判定したりできるようになります。

コピペして遊ぶ準備

ここからは、実際にコピペして遊べるコードを載せます。

難しいことは考えなくて大丈夫です。

3つのファイルを作ったら、それぞれのコードをコピペします。

コード内の説明コメントについて

コードの中には、説明用のメモが入っています。

//、/* */、 で書かれている部分は、コードを読むための説明です。

これらはゲーム画面には表示されません。

そのまま丸コピペしてOKです。

最後に index.html をダブルクリックすると、ブラウザで数当てゲームが開きます。

コピペするときの注意です。

3つのファイルは、同じフォルダの中に入れてください。

名前も、index.html、style.css、script.js にそろえてください。

名前が違うと、見た目が反映されなかったり、ボタンを押しても動かないことがあります。

コピペ用コード

この記事のコードの見方

この記事は、コードが少し読める人と、コードがまだ読めない初心者の両方に向けています。

コードが読める人は、「どのファイルが何を担当しているのか」を見てください。

コードがまだ読めない人は、「どこに貼るのか」「画面で何が変わるのか」だけ見ればOKです。

まずはコピペして、ブラウザでゲームが動くところまで確認してみてください。

index.html

まずは index.html です。

このファイルは、ゲーム画面の部品を置くためのファイルです。

コードが読めない初心者向け

index.html を貼ると、画面にタイトル・説明文・入力欄・ボタン・メッセージ欄・挑戦回数が出ます。

ただし、この時点では「見た目のデザイン」や「ゲームの動き」はまだ完成していません。

コードが少し読める人向け

id がついている部分は、あとで script.js から使う目印です。

たとえば guessInput は数字を入力する場所、checkButton は答えるボタンです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- 文字化けしにくくする設定です -->
    <meta charset="UTF-8" />

    <!-- スマホでも見やすくするための設定です -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- ブラウザのタブに表示されるタイトルです -->
    <title>数当てゲーム</title>

    <!-- 見た目を作る style.css を読み込みます -->
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- ゲーム画面全体を包む箱です -->
    <div class="page-shell">

      <!-- 白いカード風のゲーム画面です -->
      <div class="game-card">

        <!-- 小さなラベルです -->
        <p class="game-label">Number Guess</p>

        <!-- ゲームの大きなタイトルです -->
        <h1>1〜10 の数字を当てよう</h1>

        <!-- ゲームの説明文です -->
        <p class="game-subtitle">数字を入力して「答える」を押すだけ。挑戦回数も表示します。</p>

        <!-- 数字を入力する場所です -->
        <div class="input-group">
          <label for="guessInput">あなたの予想</label>

          <!-- ここにプレイヤーが数字を入力します -->
          <input
            id="guessInput"
            type="text"
            inputmode="numeric"
            maxlength="2"
            placeholder="1〜10 の数字"
          />
        </div>

        <!-- ボタンを並べる場所です -->
        <div class="button-row">
          <button id="checkButton" class="primary" type="button">答える</button>
          <button id="resetButton" class="secondary" type="button">最初から始める</button>
        </div>

        <!-- ヒントや正解メッセージを表示する場所です -->
        <div id="message" class="message-area">ゲームを始めてください。</div>

        <!-- 挑戦回数を表示する場所です -->
        <div class="status-row">
          <p>挑戦回数: <span id="attemptCount">0</span> 回</p>
        </div>
      </div>
    </div>

    <!-- ゲームを動かす script.js を読み込みます -->
    <script src="script.js"></script>
  </body>
</html>

style.css

次は style.css です。

このファイルは、ゲーム画面の見た目を作るためのファイルです。

コードが読めない初心者向け

style.css を貼ると、背景に色がつき、白いカード風の画面になり、入力欄やボタンが見やすくなります。

つまり、ここで「ただの画面」から「ゲームっぽい画面」に変わります。

コードが少し読める人向け

.game-card はゲーム画面の白いカード部分、.button-row はボタンの並び、.message-area はヒントや正解を出す場所です。

/* ゲーム画面全体の基本設定です */
:root {
  /* 明るい画面として表示する設定です */
  color-scheme: light;

  /* 文字の種類を決めています */
  font-family: "Segoe UI", BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* 基本の文字色です。濃いグレーで読みやすくしています */
  color: #1f2937;

  /* ページ全体の背景色です */
  background: #eef4ff;
}

/* サイズ計算をしやすくするための設定です */
* {
  box-sizing: border-box;
}

/* ページ全体の見た目を決めています */
body {
  margin: 0;
  min-height: 100vh;

  /* ゲーム画面を中央に置くための設定です */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 背景をうすい青系にしています */
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
}

/* ゲーム画面を入れる外側の箱です */
.page-shell {
  width: 100%;
  max-width: 460px;
  padding: 16px;
}

/* 白いカード風のゲーム画面です */
.game-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 28px 26px;
  box-shadow: 0 16px 40px rgba(31, 41, 55, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

/* Number Guess と書かれた小さなラベルです */
.game-label {
  display: inline-block;
  margin: 0 0 12px;
  color: #2563eb;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* ゲームタイトルの見た目です */
.game-card h1 {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  line-height: 1.1;
}

/* タイトル下の説明文です */
.game-subtitle {
  margin: 0 0 24px;
  color: #475569;
  line-height: 1.6;
}

/* 入力欄を入れる場所です */
.input-group {
  margin-bottom: 18px;
}

/* 入力欄の上にある説明文です */
.input-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}

/* 数字を入力する場所の見た目です */
.input-group input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 1rem;
  color: #0f172a;
  background: #f8fbff;
}

/* 入力欄をクリックしたときの見た目です */
.input-group input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* ボタンを横に並べる場所です */
.button-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
}

/* ボタン共通の見た目です */
.button-row button {
  padding: 14px 16px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* ボタンにマウスをのせたとき、少し浮いたようにします */
.button-row button:hover {
  transform: translateY(-1px);
}

/* ボタンを押したときの動きです */
.button-row button:active {
  transform: translateY(0);
}

/* 答えるボタンの見た目です */
.primary {
  background: #2563eb;
  color: white;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.16);
}

/* 最初から始めるボタンの見た目です */
.secondary {
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* ヒントや正解メッセージを表示する場所です */
.message-area {
  min-height: 56px;
  padding: 16px;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  border: 1px solid #e2e8f0;
  line-height: 1.6;
}

/* 正解したときのメッセージ色です */
.message-area.success {
  background: #ecfdf5;
  color: #0f5132;
  border-color: #a7f3d0;
  font-weight: 700;
}

/* 入力ミスがあったときのメッセージ色です */
.message-area.warning {
  background: #fff7ed;
  color: #7c2d12;
  border-color: #fed7aa;
  font-weight: 700;
}

/* 挑戦回数の表示場所です */
.status-row {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #475569;
}

.status-row p {
  margin: 0;
  font-weight: 600;
}

/* スマホなど画面が小さいときの調整です */
@media (max-width: 420px) {
  .game-card {
    padding: 22px 18px;
  }

  .button-row {
    grid-template-columns: 1fr;
  }
}

script.js

最後は script.js です。

このファイルは、ゲームを動かすためのファイルです。

コードが読めない初心者向け

script.js を貼ると、数字を入力して「答える」を押したときに、正解より大きいか小さいかを判定してくれます。

挑戦回数も数えてくれて、正解するとメッセージが出ます。

コードが少し読める人向け

answer は正解の数字、count は挑戦回数です。

initGame() はゲームを最初から始める処理、handleGuess() は入力された数字をチェックする処理です。

// 入力欄やボタンなど、HTMLの部品を使えるようにします
const guessInput = document.getElementById("guessInput");
const checkButton = document.getElementById("checkButton");
const resetButton = document.getElementById("resetButton");
const messageArea = document.getElementById("message");
const attemptCount = document.getElementById("attemptCount");

// 正解の数字を入れる箱です
let answer = 0;

// 挑戦回数を入れる箱です
let count = 0;

// 新しいゲームを始める処理です
function initGame() {
  // 1〜10の中からランダムに正解を決めます
  answer = Math.floor(Math.random() * 10) + 1;

  // 挑戦回数を0に戻します
  count = 0;

  // 入力欄を空にします
  guessInput.value = "";

  // 入力欄と答えるボタンを使える状態にします
  guessInput.disabled = false;
  checkButton.disabled = false;

  // 挑戦回数の表示を更新します
  updateCount();

  // 最初のメッセージを表示します
  showMessage("1〜10の中から数字を予想してください。", "normal");
}

// メッセージを表示する処理です
function showMessage(text, type) {
  // 画面に表示する文字を変えます
  messageArea.textContent = text;

  // メッセージ欄の見た目を切り替えます
  if (type === "success") {
    messageArea.className = "message-area success";
  } else if (type === "warning") {
    messageArea.className = "message-area warning";
  } else {
    messageArea.className = "message-area";
  }
}

// 挑戦回数を画面に表示する処理です
function updateCount() {
  attemptCount.textContent = count;
}

// 入力された数字をチェックする処理です
function handleGuess() {
  // 入力された文字を取り出します
  const value = guessInput.value.trim();

  // 何も入力されていないとき
  if (value === "") {
    showMessage("数字を入力してください。", "warning");
    return;
  }

  // 数字以外が入力されたとき
  if (!/^\d+$/.test(value)) {
    showMessage("数字だけを入力してください。", "warning");
    return;
  }

  // 入力された文字を数字に変えます
  const guess = Number(value);

  // 1〜10以外の数字だったとき
  if (guess < 1 || guess > 10) {
    showMessage("1〜10の数字を入力してください。", "warning");
    return;
  }

  // ここまで問題なければ、挑戦回数を1増やします
  count += 1;
  updateCount();

  // 入力した数字が正解より小さいとき
  if (guess < answer) {
    showMessage("もっと大きいです。");

  // 入力した数字が正解より大きいとき
  } else if (guess > answer) {
    showMessage("もっと小さいです。");

  // 正解したとき
  } else {
    showMessage(`正解です！${count}回で当たりました。`, "success");

    // 正解後は入力欄と答えるボタンを止めます
    guessInput.disabled = true;
    checkButton.disabled = true;
  }
}

// 答えるボタンを押したときに、数字をチェックします
checkButton.addEventListener("click", handleGuess);

// 最初から始めるボタンを押したときに、ゲームをリセットします
resetButton.addEventListener("click", initGame);

// Enterキーを押したときも、答えるボタンと同じ動きをします
guessInput.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    handleGuess();
  }
});

// ページを開いたら、ゲームを始めます
initGame();

ポイント

今回はPythonではなく、HTML・CSS・JavaScriptを使っています。

HTMLで画面を作り、CSSで見た目を整え、JavaScriptでゲームを動かしています。

【広告/PR】

プログラミングを基礎から学びたい人向け

数当てゲームを作ってみて、「HTML・CSS・JavaScriptをもっと基礎から学びたい」と感じた人向けに、学習サービスを紹介しています。

【広告/PR】

プログラミングを基礎から学びたい人向け

数当てゲームを作ってみて、「HTML・CSS・JavaScriptをもっと基礎から学びたい」と感じた人向けに、学習サービスを紹介しています。

資格と仕事に強い！個人レッスンのプログラミングスクール【Winスクール】

実際にブラウザで遊んでみた

3つのファイルを作って、index.htmlをブラウザで開くと、ゲーム画面が表示されます。

今回は、Macのブラウザで動作確認しました。

数字を入力して「答える」を押すと、すぐにヒントが出ます。

正解より小さい数字を入れると、「もっと大きいです」と表示されます。

正解より大きい数字を入れると、「もっと小さいです」と表示されます。

正解すると、正解メッセージが表示されます。

挑戦回数も増えていくので、「何回で当てられるかな？」というゲームらしさが出ました。

前回のターミナル版より、かなり遊んでいる感じがあります。

今回できたこと

今回は、前回作った数当てゲームを、ブラウザで遊べるゲーム画面っぽい見た目にしました。

できたことをまとめると、こんな感じです。

HTMLでゲーム画面の部品を作った
CSSでゲーム画面の見た目を整えた
JavaScriptでゲームの動きを作った
ターミナル版よりゲームらしい見た目になった
ブラウザで数当てゲームを遊べるようになった

コードがまだ読めなくても、まずは「どのファイルが何をしているのか」が少しでもわかればOKです。

HTMLは画面。

CSSは見た目。

JavaScriptは動き。

この3つを分けて考えると、少しずつ理解しやすくなります。

まとめ

今回は、Pythonで作った数当てゲームを、HTML・CSS・JavaScriptを使ってブラウザ版にしてみました。

ターミナル版は文字だけのシンプルなゲームでしたが、ブラウザ版にすると入力欄やボタンが使えて、かなりゲームらしく見えるようになりました。

最初からすごいゲームを作る必要はありません。

小さなゲームでも、見た目を変えるだけでかなり印象が変わります。

まずは動かしてみる。

次に見た目を変えてみる。

そして少しずつ楽しくしていく。

これだけでも、ちゃんとゲーム作りの一歩になります。

次回予告

次回は、今回作った数当てゲームをさらにゲームっぽくしていく予定です。

フロントエンド編として、「初めから」「続きから」「スコア表」を入れたバージョンを作ってみたいと思います。

ただ数字を当てるだけではなく、少しずつ本当にゲームらしい画面へ育てていきます。

このブログを検索

無料コード配布ブログ