夏休みにJavaScriptでゲームを作ろう！初心者向けステップガイド

夏休みにJavaScriptでゲームを作ってプログラミングを学ぼう

夏休みにJavaScriptでゲームを作りたい初心者の中学生・高校生に向けたステップガイドです。「プログラミングって難しそう」と思っている人も、ゲーム制作なら楽しみながら基礎が身につきます。

この記事では、数当てゲーム → じゃんけん → クイズアプリの3段階で、少しずつ難しくなるミニゲームの作り方をコード例付きで紹介します。

この記事を読むと、次のことがわかります。

• ゲーム制作で学べるJavaScriptの基礎
• 3つのミニゲームの作り方（コード例付き）
• ゲーム制作のコツとつまずいたときの対処法
• 作ったゲームを公開する方法

ゲーム制作で学べるJavaScriptの基礎

ゲームを作ると、JavaScriptの重要な基礎が自然と身につきます。

📖 JavaScriptの基本はJavaScriptとは？初心者向け解説で学べます。

必要な準備

ゲーム制作に必要なものは3つだけです。すべて無料で用意できます。

• パソコン — Windows でも Mac でもOK
• ブラウザ — Google Chrome がおすすめ
• テキストエディタ — VS Code（ブイエスコード）が定番（環境構築ガイド）

レベル1：数当てゲーム

1〜10のランダムな数字を当てるゲームです。ヒントが出るので、何回かチャレンジして正解を目指します。

学べること：変数、Math.random()、条件分岐（if / else if / else）、addEventListener

HTMLの準備

<h1>数当てゲーム</h1>
<p>1〜10の数字を当ててね！</p>
<input type="number" id="guess" min="1" max="10">
<button id="guess-btn">答える！</button>
<p id="result">ここに結果が出ます</p>

JavaScriptのコード

const answer = Math.floor(Math.random() * 10) + 1;
const input = document.getElementById("guess");
const btn = document.getElementById("guess-btn");
const result = document.getElementById("result");

btn.addEventListener("click", function() {
  const guess = Number(input.value);
  if (guess === answer) {
    result.textContent = "正解！答えは " + answer + " でした！";
  } else if (guess < answer) {
    result.textContent = "もっと大きい数だよ！";
  } else {
    result.textContent = "もっと小さい数だよ！";
  }
});

ポイント：Math.floor(Math.random() * 10) + 1 で1〜10のランダムな整数を作ります。Number() で入力値を数値に変換してから比較しましょう。

レベル2：じゃんけんゲーム

グー・チョキ・パーのボタンを押すと、コンピューターとじゃんけんできるゲームです。

学べること：配列、data属性、querySelectorAll、forEach、複雑な条件分岐

HTMLの準備

<h1>じゃんけん</h1>
<button class="janken-btn" data-hand="グー">✊ グー</button>
<button class="janken-btn" data-hand="チョキ">✌️ チョキ</button>
<button class="janken-btn" data-hand="パー">🖐️ パー</button>
<p id="result">ボタンを押してね！</p>

JavaScriptのコード

const hands = ["グー", "チョキ", "パー"];
const btns = document.querySelectorAll(".janken-btn");
const result = document.getElementById("result");

btns.forEach(function(btn) {
  btn.addEventListener("click", function() {
    const player = btn.dataset.hand;
    const computer = hands[Math.floor(Math.random() * 3)];
    let judge = "";
    if (player === computer) {
      judge = "あいこ";
    } else if (
      (player === "グー" && computer === "チョキ") ||
      (player === "チョキ" && computer === "パー") ||
      (player === "パー" && computer === "グー")
    ) {
      judge = "勝ち！";
    } else {
      judge = "負け…";
    }
    result.textContent = "あなた: " + player + " / 相手: " + computer + " → " + judge;
  });
});

ポイント：dataset.hand でHTMLの data-hand 属性の値を取得しています。querySelectorAll と forEach で複数のボタンにまとめてイベントを設定できます。

レベル3：クイズアプリ

問題を表示して、選択肢をクリックすると正解・不正解が判定されるアプリです。問題を自由に追加できます。

学べること：配列のループ、オブジェクト、関数、createElement、appendChild

JavaScriptのコード

const questions = [
  { q: "HTMLは何の略？", a: ["HyperText Markup Language", "High Tech ML", "Home Tool ML"], correct: 0 },
  { q: "CSSは何の略？", a: ["Cascading Style Sheets", "Computer Style System", "Creative Site Sheets"], correct: 0 },
  { q: "JSは何の略？", a: ["JavaScript", "JavaSystem", "JointScript"], correct: 0 },
];
let score = 0;
let current = 0;

function showQuestion() {
  const q = questions[current];
  document.getElementById("question").textContent = q.q;
  const opts = document.getElementById("options");
  opts.innerHTML = "";
  q.a.forEach(function(text, i) {
    const btn = document.createElement("button");
    btn.textContent = text;
    btn.addEventListener("click", function() {
      if (i === q.correct) score++;
      current++;
      if (current < questions.length) {
        showQuestion();
      } else {
        document.getElementById("question").textContent =
          score + "/" + questions.length + " 正解！";
        opts.innerHTML = "";
      }
    });
    opts.appendChild(btn);
  });
}
showQuestion();

ポイント：問題データを配列に入れておくと、問題を追加するのが簡単です。createElement と appendChild で動的にボタンを生成しています。

🔥 クイズアプリチャレンジで挑戦してみましょう。

ゲーム制作のコツ

• まず動くものを作る — 見た目は後から整える
• console.logで確認 — 変数の中身を常にチェック（開発者ツールの使い方）
• 少しずつ機能を追加 — 一度に全部作ろうとしない
• エラーが出たら — エラー辞典で原因を調べる

作ったゲームを公開しよう

完成したゲームはGitHub Pagesを使えば無料でインターネットに公開できます。友達に遊んでもらいましょう！

自由研究の成果物としても提出できます。詳しくは「夏休みの自由研究にプログラミング！」をチェックしてください。

夏休みのプログラミング学習に役立つ記事

この記事と合わせて読むと、夏休みの学習がさらに充実します。

• 夏休みにプログラミングを始めよう！中高生向け完全ガイド【無料】 — 学習の全体像とスケジュール
• 夏休みの自由研究にプログラミング！中学生向けWebサイトの作り方 — 自由研究のテーマ選びと提出方法
• 夏休みにHTMLを独学する方法【1週間で基礎マスター】 — HTMLを1週間で学ぶ具体的な計画
• 夏休みに情報Ⅰを予習しよう！プログラミングの基礎を先取り — 高校生向け、情報Ⅰの予習計画

ゲームを完成させたあとにやってみよう

ゲームが動くようになったら、自分なりのアレンジを加えてみましょう。少し変えるだけで、オリジナルのゲームになります。

たとえば次のようなアレンジができます。

• スコアを表示して、ハイスコアを記録する
• 制限時間を設けて、時間内に何点取れるか競う
• 効果音をつけて、クリックしたときに音が鳴るようにする
• 背景の色をスコアに応じて変化させる
• 難易度を上げて、ターゲットの動きを速くする

アレンジするたびに新しいJavaScriptの知識が必要になります。「こうしたい」という目標があると、調べる力も自然と身につきます。完成したゲームは友達に遊んでもらいましょう。感想をもらえると、次の作品を作るモチベーションになります。

まとめ

まずはJavaScriptの基礎を学ぶところから始めましょう。このサイトのJavaScriptコースなら、ブラウザだけで今すぐ始められます。