JavaScriptで作ると楽しい！初心者向けミニゲーム3選（コードのヒント付き）

プログラミング

「JavaScriptって難しそう」「勉強しても何を作ればいいか分からない」——始めたばかりのときは、こう感じることがあります。でも、JavaScriptはゲームを作るのに向いている言語でもあります。この記事では、初心者でも作れるミニゲームを3つ紹介します。各ゲームで使う技術（文法）も一緒に解説するので、「作りながら学ぶ」入口として読んでみてください。

ミニゲームを作ることで何が学べるか

プログラミングの教科書を読んで「変数」「関数」「条件分岐」を覚えても、実際に使う場面がないと身につきません。ゲームを作ることの良いところは、「この機能を作るには何が必要か」という形で、技術を目的から逆算して学べることです。

「もぐらを叩いたときに点数を増やす」→ クリックイベントの処理が必要
「時間を計る」→ タイマー（setInterval）が必要
「じゃんけんの勝ち負けを判定する」→ 条件分岐（if文）が必要

ゲームの要件から「何を書けばいいか」が見えてくる。この体験が、プログラミング学習を加速させます。

ゲーム1：もぐらたたき（クリックと点数管理）

ゲームの概要

画面上にランダムで「もぐら」が現れ、クリックすると点数が増える。一定時間で終了し、最終スコアが表示される——シンプルだけど、確かに楽しい。

このゲームで学べる技術

DOM操作（DOMとは、HTMLの要素をJavaScriptから操作するための仕組みのことです）

もぐらを「現れる・消える」させるには、HTMLの要素を表示・非表示にするコードを書く必要があります。

// 要素を表示する
mole.style.display = 'block';

// 要素を非表示にする
mole.style.display = 'none';

クリックイベント

ユーザーがクリックしたときに何かを起こすには、イベントリスナーを使います。

mole.addEventListener('click', function() {
  score += 1;
  scoreDisplay.textContent = '点数: ' + score;
});

setInterval（一定時間ごとに処理を繰り返す関数です）

もぐらをランダムに出現させるために使います。

setInterval(function() {
  showMoleRandomly();
}, 1000); // 1秒ごとに実行

作るときのヒント

  1. まずHTMLで「もぐらの場所（マス）」を複数用意する

  2. JavaScriptでランダムに一つを選んで表示する

  3. クリックしたらスコアを1増やして、もぐらを消す

  4. ゲーム開始から30秒で終了するタイマーを作る

段階的に作る方が混乱しにくいです。「まず1つのもぐらをクリックで消せるようにする」→「ランダムに出現させる」→「スコアを表示する」という順番で進めましょう。

ゲーム2：ストップウォッチクリック（タイミングを競うゲーム）

ゲームの概要

「スタート」を押すとタイマーが動き出し、ぴったり10.00秒で止めることを目指すゲームです。自分の感覚と実際の時間のズレを競います。一人でもできるし、友達と交互にやると盛り上がります。

このゲームで学べる技術

Date オブジェクト（現在の時刻を取得するために使います）

let startTime = Date.now(); // 現在の時刻をミリ秒で取得

clearInterval でタイマーを止める

setIntervalで動かしたタイマーは、clearIntervalで止めることができます。

let timer = setInterval(update, 10); // 10ミリ秒ごとに更新

// ストップボタンが押されたとき
clearInterval(timer);

数値の計算と表示

経過時間を計算して、小数点以下2桁まで表示する処理を書きます。

let elapsed = (Date.now() - startTime) / 1000;
display.textContent = elapsed.toFixed(2) + '秒';

作るときのヒント

  1. ボタンを2つ（スタート・ストップ）作る

  2. スタートを押したとき startTime に現在の時刻を記録する

  3. setIntervalで10ミリ秒ごとに経過時間を計算して表示する

  4. ストップを押したとき、タイマーを止めて結果を表示する

「10秒ぴったりとのズレが何秒か」を計算して「惜しい！」と表示するだけで、ゲームとしての完成度がぐっと上がります。

ゲーム3：ジャンケン（条件分岐の基礎）

ゲームの概要

「グー・チョキ・パー」のボタンを押すと、コンピューターもランダムに出して、勝ち負けを判定する。シンプルだけど、条件分岐（if文）の練習として非常に良いゲームです。

このゲームで学べる技術

ランダムな選択（Math.random()で0〜1の小数を生成し、それを使って選択肢を選びます）

let choices = ['グー', 'チョキ', 'パー'];
let computerChoice = choices[Math.floor(Math.random() * 3)];

条件分岐（if / else if / else）

勝ち・負け・引き分けの判定を書きます。これがジャンケンゲームの核心です。

if (playerChoice === computerChoice) {
  result = '引き分け';
} else if (
  (playerChoice === 'グー' && computerChoice === 'チョキ') ||
  (playerChoice === 'チョキ' && computerChoice === 'パー') ||
  (playerChoice === 'パー' && computerChoice === 'グー')
) {
  result = 'あなたの勝ち！';
} else {
  result = 'コンピューターの勝ち';
}

ボタンとイベントの組み合わせ

3つのボタンそれぞれにクリックイベントを設定します。

document.getElementById('rock').addEventListener('click', function() {
  play('グー');
});

作るときのヒント

  1. HTMLにグー・チョキ・パーの3ボタンと、結果表示エリアを作る

  2. ボタンがクリックされたら、コンピューターの手をランダムに決める

  3. 勝ち負けを判定するif文を書く

  4. 結果と、それぞれの手を画面に表示する

「連勝数を記録する」「10回やって何勝かを集計する」という拡張機能を追加すると、さらに楽しくなります。

ゲームを作った後に何が起きるか

この3つのゲームを作ると、次のような技術が身についています。

  • DOM操作：HTMLの要素をJavaScriptで操作できる

  • イベント処理：ユーザーの操作に反応するコードが書ける

  • タイマー処理：setInterval / clearInterval でリアルタイムの処理ができる

  • 条件分岐：if文で複数の場合分けができる

  • ランダム処理：Math.random()でランダムな動作が作れる

これらはJavaScriptの基礎中の基礎ですが、「ゲームを作った」という具体的な文脈の中で学ぶことで、教科書で読むより格段に定着しやすくなります。

そして、「自分が作ったゲームを友達に遊ばせてみたい」という気持ちが出てきたら、次のステップ——HTMLページとして公開する、CSSで見た目を整える——へと自然につながっていきます。

現場で見ていると、「ゲームを作った後に初めてCSSをちゃんと学ぶ気になった」という生徒が多い。「見た目を良くしたい」という動機は、CSSへの入口として強い。

まずは一つ、作ってみてください。

今日からの一歩

読んで「面白そう」で終わらせず、今日のうちに一つだけ手を動かしてみましょう。完成させなくても、書き始めることが一番のハードルを超える近道です。

  1. 3つのうち1つを選んで「最小版」から作り始める — もぐらたたきなら「1つのもぐらをクリックで消す」だけでOK。完成形をいきなり目指さず、記事の「作るときのヒント」の1番目だけをやってみる。

  2. 要件を「何の技術が必要か」に翻訳してメモする — 「点数を増やす→クリックイベント」「時間を計る→setInterval」のように、作りたい動きと必要な文法を紙に書き出す。逆算で学ぶ感覚をつかむ。

  3. 作ったゲームを誰かに見せる前提で進める — 「友達に遊ばせたい」という気持ちが、次のCSSで見た目を整えるステップへの一番強い動機になる。

関連記事：Scratchの次に進むなら——HTML/CSS/JavaScriptへの道

この記事を書いた教室について

Kidsプログラミングラボ 秋葉原教室 — Scratchの「楽しい」で終わらせず、HTML / CSS / JavaScript という“本物の言語”まで進ませたい小中高生の家庭に、つまずきポイントと伸び方の地図を渡す、秋葉原の実店舗スクールです。

体験レッスンでは、お子さんが実際にコードを書いて画面が変わる瞬間まで体験できます。お子さんとの相性をその場で確かめてください。

👉 無料体験レッスンの詳細・お申し込み

3 つのミニゲームと、それぞれで学べる JavaScript の技術 3 つのミニゲームで学ぶ JavaScript の基礎 GAME 1 もぐらたたき DOM 操作・クリックイベント setInterval GAME 2 ストップウォッチクリック Date オブジェクト・clearInterval 数値の計算と表示 GAME 3 ジャンケン 条件分岐（if 文） Math.random()
難しさ順ではなく、どれも初心者が「作りながら学ぶ」入口になる 3 つ。気になったものから始めて構わない。
もぐらたたきは小さな機能を 4 段階で積み上げて作る 一気に作らず、小さな機能を順番に積み上げる 1 マスを並べる HTML でもぐらの場所 2 ランダムに表示 setInterval で出現 3 クリックで加点 イベントでスコア +1 4 終了タイマー 30 秒で結果表示
「まず 1 つのもぐらをクリックで消せる」から始める。各段階で動作確認できると、つまずいても戻りやすい。
スタートからストップまでの時間の流れと「目標 10.00 秒とのズレ」 「経過時間」と「目標 10.00 秒とのズレ」を計算する タイマー稼働中（10ms ごとに更新） スタート 目標 10.00 秒 ストップ clearInterval で停止 ズレ +0.40 秒 経過時間 = 止めた時刻 − 開始時刻。そこから 10.00 秒を引いた値が「ズレ」。 経過時間は toFixed(2) で小数 2 桁にそろえると見やすい。
Date.now() で開始時刻を記録し、止めた時刻との差が「経過時間」。そこから 10 秒を引けば「ズレ」が出る。
ジャンケンの勝敗判定を if / else if / else で 3 つに分ける流れ 勝敗判定は if 文で「3 つの場合」に分かれる 自分とコンピューターの手 同じ手？ 勝ちの組み合わせ？ if else if else 引き分け あなたの勝ち！ コンピューターの勝ち
「同じ手なら引き分け」「勝ちの組み合わせなら勝ち」「それ以外は負け」。if 文の 3 分岐がそのまま判定になる。
3 つのゲームを作り終えると身についている 5 つの基礎技術 3 ゲーム制作で残る 5 つの基礎技術 DOM 操作 HTML の要素を JavaScript で動かせる イベント処理 ユーザーの操作に反応するコードが書ける タイマー処理 setInterval / clearInterval でリアルタイム処理 条件分岐 if 文で複数の場合分けができる ランダム処理 Math.random() でランダムな動作が作れる
どれも JavaScript の基礎中の基礎。ただ「ゲームを作った」という文脈の中で覚えるので、教科書より定着しやすい。

プログラミングの楽しさを
体験してみませんか？

既存のクラスへ体験参加していただき、楽しいゲームやアクティビティ、クリエイティブな学びをクラスのみんなと体験できます。無料体験レッスンで、プログラミング学習の新しい世界を発見しましょう！

プログラミングのイラスト