HTMLゲームの作り方 初心者向け｜1ファイルを保存して動かす手順

HTMLのゲームは、64行のテキストファイルを1つ保存して、ブラウザで開けば動きます。

この記事の完成例は、30秒のあいだにボタンを押した回数が得点になるタップゲームです。

全文のコードと、どの行が何をしているかの表、保存から起動までの手順をまとめました。コードをAIに書かせる場合でも、保存して動かす部分は同じです。

完成例のコードを全文で見る

次のコードが、動作を確かめた完成例です。1つのファイルに、画面の部品と見た目と動きがすべて入っています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>30秒タップゲーム</title>
<style>
  body { font-family: sans-serif; text-align: center; background: #0f2540; color: #ffffff; }
  #tap { width: 180px; height: 180px; font-size: 28px; border: none; border-radius: 50%; background: #ff9f1c; }
  #tap:disabled { background: #666666; }
  #start { font-size: 20px; padding: 8px 24px; }
</style>
</head>
<body>
  <h1>30秒タップゲーム</h1>
  <p>残り <span id="time">30</span> 秒 ／ 得点 <span id="score">0</span></p>
  <button id="tap" disabled>タップ</button>
  <p><button id="start">スタート</button></p>
  <p id="message">スタートを押すと始まります</p>

<script>
  let score = 0;
  let timeLeft = 30;
  let timerId = null;

  const scoreText = document.getElementById("score");
  const timeText = document.getElementById("time");
  const message = document.getElementById("message");
  const tapButton = document.getElementById("tap");
  const startButton = document.getElementById("start");

  function startGame() {
    score = 0;
    timeLeft = 30;
    scoreText.textContent = score;
    timeText.textContent = timeLeft;
    message.textContent = "連打してください";
    tapButton.disabled = false;
    startButton.disabled = true;
    timerId = setInterval(countDown, 1000);
  }

  function countDown() {
    timeLeft = timeLeft - 1;
    timeText.textContent = timeLeft;
    if (timeLeft <= 0) {
      endGame();
    }
  }

  function endGame() {
    clearInterval(timerId);
    tapButton.disabled = true;
    startButton.disabled = false;
    message.textContent = "終了！ 得点は " + score + " 点です";
  }

  tapButton.addEventListener("click", function () {
    score = score + 1;
    scoreText.textContent = score;
  });
  startButton.addEventListener("click", startGame);
</script>
</body>
</html>

HTML・CSS・JavaScriptの分担を行番号で見る

HTMLファイルの中身は、次の3つの言語に分かれています。HTMLは部品を置く役、CSSは見た目を決める役、JavaScriptは動きをつける役です。次の図は、上のコードの行番号と役割の対応です。

JavaScriptの部分には、ゲームの流れが3つの関数で書かれています。

• startGame：スタートを押したときに、得点と時間を最初に戻す

• countDown：1秒ごとに残り時間を減らして、0になったら終わらせる

• endGame：タイマーを止めて、得点を表示する

使っている仕組みのうち、MDN Web Docsの説明で確かめたものを並べます。

• scriptの要素：公式の説明では、実行できるコードやデータを埋め込むために使う要素で、ふつうはJavaScriptのコードの埋め込みや参照に使います。

• getElementById：指定したIDに一致する要素を返します。一致する要素がなければnullが返ります。MDNに書かれているのは、一致する要素がなければnullが返ること、idの大文字と小文字が区別されることまでです。nullのまま使うとエラーで止まるのはJavaScriptの一般的な動作で、このページの説明ではありません。

• addEventListener：ターゲットに特定のイベントが配信されるたびに、呼び出される関数を設定します。この完成例では、ボタンのclickが押されるたびに動かしています。

• setInterval：指定したミリ秒が経過するたびに、関数を実行します。完成例は1000ミリ秒、つまり1秒ごとにcountDownを呼びます。

• clearInterval：setIntervalが返す番号を渡すと、繰り返しを止められます。endGameでtimerIdを渡しているのはこのためです。

• buttonのdisabled：ボタンを押したりフォーカスを受けたりできなくします。完成例は、スタート前と終了後にタップを灰色にして、押せなくしています。

動かして確かめた結果

完成例を、2026年10月19日に手元のWindows 11 Homeで動かしました。ブラウザはGoogle Chromeの155.0.8059.82で、画面を出さない状態（headless）で実行しています。ボタンのクリックを実行するコードを足した試験用コピーで動かし、タイマーは早送りしました。index.htmlの中身は変えていません。人が実際に連打した記録ではありません。

確かめた内容は次のとおりです。

• 開いた直後は、残り30秒・得点0で、タップが押せない

• スタートを押して12回タップすると、得点が12になり、スタートが押せなくなる。途中の画面では残り23秒だった（早送りの時間は読み込みからの経過で、スタートを押した時刻とは別のため、残りは23秒になっている）

• 30秒が終わると、タップが押せなくなり、メッセージが「終了！ 得点は 21 点です」に変わる（12回に続けて、9回タップした試験）

• 終了後にもう一度スタートを押すと、得点と時間が最初に戻り、再びタイマーが動いて、30秒で終わった（この項目はNode.jsの試験で確かめた）

Node.js v24.14.0でも、画面の代わりの仮部品をつけて同じ流れを動かしました。開始前と終了後は、タップが無効の状態になっていて得点が変わらないことも、この試験で確かめています。無効のボタンはクリック自体ができないため、この場面でクリックは実行していません。記録は実測_動作ログとして保存してあります。

メモ帳に貼って、index.htmlという名前で保存する

ここからが、自分のパソコンで動かす手順です。次の図の4つの手順を、上から順に進めます。

1. メモ帳にコードを貼る

上のコードを全部コピーして、メモ帳に貼ります。「名前を付けて保存」の画面で、保存先にデスクトップなど見つけやすい場所を選んでください。

2. ファイル名を index.html にする

ファイル名の欄に、次の名前を入れて保存します。

index.html

「ファイルの種類」を選べる画面では、「すべてのファイル」など、拡張子を自動で付け足さない項目を選びます。文言はWindowsとメモ帳の版で違うことがあり、保存画面は撮って確かめていません。名前の終わりが .html で終わることが大事で、.txt が付いたままではゲームになりません。

保存後に日本語が文字化けしたときは、保存画面の文字コードをUTF-8にして保存し直します。この対処は実機では確かめていません。

3. 拡張子を確かめる

拡張子は、ファイル名の最後の「.html」のような部分です。終わりが .html であれば、ブラウザが開けるHTMLファイルとして扱われます。

手元で、同じ中身を index.html.txt という名前にしてChromeで開きました。ゲームにならず、コードの文字がそのまま表示されました。手元の試験ではこの表示でした。名前の終わりに .txt が付いていると、同じ状態になると考えられます。

なお、手元のPCでは、拡張子を隠す設定の値が「隠す」になっていました（レジストリのHideFileExtが1）。拡張子が隠れている設定では、最後の拡張子だけが表示されません。仕組みの上では、本物の index.html は「index」と表示され、index.html.txt のほうが「index.html」と表示されます。名前の見た目だけでは、.txt が付いたかどうか分かりません。エクスプローラーの表示の設定で、ファイル名の拡張子を表示に切り替えてから確かめてください。この表示と切り替えの画面は、どちらも画面では確かめていない仕組みの説明です。

4. ダブルクリックでブラウザで開く

index.html をダブルクリックします。手元のPCでは、.html の既定の関連付けがChromeになっていました。別のブラウザを既定にしている場合は、そのブラウザで開きます。ダブルクリックの操作そのものは、画面で確かめていません。

開いたら「スタート」を押します。30秒で終わり、得点が出れば成功です。

開かない・押せないときに見る2か所

• コードの文字が、そのまま表示される：手元の試験では、名前の終わりが .txt になっているとこの表示になりました。メモ帳などで開いている場合も考えられます。名前を index.html に直して、ブラウザでもう一度開きます。

• タップが灰色で押せない：先に「スタート」を押す必要があります。完成例は、スタート前と終了後にタップを押せなくしています。

AIに同じ形のコードを頼む依頼文

コードを自分で書かなくても、同じ形のファイルをAIに頼めます。次の依頼文は、完成例の骨組みにあたる条件を書いたものです。開始前にタップを押せなくする、終了後に再スタートできる、といった細部や見た目までは書いていません。

HTMLファイル1つだけで動く、30秒のタップゲームを作ってください。
・スタートのボタンを押すと30秒が始まり、残り時間を1秒ごとに表示する
・タップのボタンを押すたびに得点が1増える
・30秒たったらタップを押せなくして、得点を表示する
・外部のファイルや画像は使わない
・コードは、HTML・CSS・JavaScriptをすべて1つのファイルにまとめて、コードブロックで出す

AIの返答は毎回変わります。この記事を作るときに、AIへの依頼は実行していません。上のコードは、この条件の骨組みを含む完成例として手元で動かしたもので、依頼文から返ってきたコードではありません。返ってきたコードも、保存の手順は同じです。うまく動かなければ、保存の手順を飛ばしていないかを先に確かめます。

Claude Codeで依頼する場合は、先にインストールが必要です。入らないときの確認はClaude Codeをインストールできない時の直し方にまとめています。入ったあとの最初の使い方は、Claude Codeの使い方で扱っています。

次に作るものを選ぶ

タップゲームが動いたら、次は題材を変えてみてください。この完成例の骨組みは、そのまま残せます。どのジャンルが作りやすいかは、ゲーム作り 初心者のジャンルの選び方で、同じ基準で並べました。