2026年5月12日
HTMLで簡単なゲームを作ろう！
プログラミング初心者でも、HTMLとJavaScriptで簡単なクリックゲームが作れます。この記事では「制限時間内にボタンをクリックした回数を競うゲーム」を、3ステップ・コピペで動くコードつきで完成させます。
1つのHTMLファイルに全部まとめるので、特別なソフトは不要です。ブラウザさえあれば動きます。夏休みの自由研究でプログラミングに挑戦する方法の作品としても使えます。
完成イメージ
今回作るゲームの仕様を確認しましょう。
- スタートボタンを押すと10秒のカウントダウンが始まる
- 制限時間中にボタンをクリックするたびにスコアが+1される
- 時間が0になるとゲーム終了し、結果が表示される
- 最高スコアがブラウザに保存され、次回訪問時も表示される
Step 1: HTMLで画面を作る
まずはHTMLで画面の骨組みを作ります。必要な要素は、クリック対象のボタン・スコア表示・タイマー表示・スタートボタンの4つです。
以下のコードをそのまま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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="game-container">
<h1>クリック連打ゲーム</h1>
<div class="status">
<span id="score">スコア: 0</span>
<span id="timer">残り時間: 10</span>
</div>
<p id="best">ハイスコア: 0</p>
<!-- クリック対象のボタン -->
<button id="click-btn" disabled>クリック！</button>
<!-- スタートボタン -->
<button id="start-btn">スタート</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>ポイント解説：
id属性は、JavaScriptから要素を見つけるための「名札」です。DOM（ドム）の操作で使います。click-btnには最初からdisabled属性をつけています。スタート前にクリックできないようにするためです。bestとresultは、あとでJavaScriptから文字を書き換えるための箱です。
HTMLの構造ができたら、次はCSSで見た目を整えましょう。
Step 2: CSSで見た目を整える
CSSは、HTMLで作った骨組みに「デザイン」を加える言語です。ボタンを大きく目立たせ、クリックした瞬間に少し縮む演出をつけます。
style.cssというファイルを作り、以下のコードを書いてください。
/* 全体のリセットと基本設定 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Helvetica Neue", sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
.game-container {
background: #ffffff;
border-radius: 16px;
padding: 32px;
max-width: 420px;
width: 90%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 22px;
margin-bottom: 20px;
}
/* スコアとタイマーを横に並べる */
.status {
display: flex;
justify-content: space-between;
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
}
#best {
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
/* クリック対象の大きなボタン */
#click-btn {
width: 100%;
padding: 40px 0;
font-size: 24px;
font-weight: bold;
color: #fff;
background: #ff6b6b;
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform 0.1s;
margin-bottom: 16px;
}
/* クリックした瞬間に縮む演出 */
#click-btn:active {
transform: scale(0.95);
}
/* スタート前はグレーにして押せないことを示す */
#click-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
#start-btn {
padding: 12px 24px;
font-size: 16px;
background: #007bff;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
}
#start-btn:hover {
background: #0056b3;
}
#result {
margin-top: 16px;
font-size: 18px;
font-weight: bold;
color: #28a745;
}ポイント解説：
#click-btn:activeは「ボタンが押されている瞬間」だけに適用されるスタイルです。transform: scale(0.95)でボタンが少し縮んで見えます。#click-btn:disabledはdisabled属性がついているときのスタイルです。押せない状態を色で示せます。
見た目が整ったら、いよいよJavaScriptでゲームを動かしましょう！
Step 3: JavaScriptでゲームロジックを書く
ここがゲームの「頭脳」部分です。JavaScriptで、スタート処理・クリックカウント・タイマー・ハイスコア保存を行います。
script.jsというファイルを作り、以下のコードを書いてください。
変数とHTML要素を準備する
// スコア（クリック回数）
let score = 0;
// 残り時間（秒）
let timeLeft = 10;
// タイマーのID（あとで止めるために使う）
let timerId = null;
// HTML要素を取得する（DOM操作）
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");
const clickBtn = document.getElementById("click-btn");
const startBtn = document.getElementById("start-btn");
const resultText = document.getElementById("result");
const bestText = document.getElementById("best");
// localStorageからハイスコアを読み込む（なければ0）
let bestScore = Number(localStorage.getItem("clickGameBest")) || 0;
bestText.textContent = "ハイスコア: " + bestScore;localStorageは、ブラウザにデータを保存しておく仕組みです。ページを閉じても、次に開いたときにハイスコアが残ります。
ゲームを開始する処理
// スタートボタンが押されたときの処理
startBtn.addEventListener("click", function () {
// 値をリセットする
score = 0;
timeLeft = 10;
scoreDisplay.textContent = "スコア: 0";
timerDisplay.textContent = "残り時間: " + timeLeft;
resultText.textContent = "";
// クリックボタンを押せるようにする
clickBtn.disabled = false;
startBtn.disabled = true;
// 1秒ごとに時間を減らす
timerId = setInterval(function () {
timeLeft--;
timerDisplay.textContent = "残り時間: " + timeLeft;
// 時間が0になったらゲーム終了
if (timeLeft <= 0) {
endGame();
}
}, 1000);
});setInterval(関数, 1000)は「1000ミリ秒（1秒）ごとに、この関数を繰り返し実行してね」という命令です。DOM操作と組み合わせて、1秒ごとに画面の表示を更新しています。
クリックされたときの処理
// クリックボタンが押されたときの処理
clickBtn.addEventListener("click", function () {
score++;
scoreDisplay.textContent = "スコア: " + score;
});クリックするたびにscoreを1増やし、画面の表示を更新するだけのシンプルな処理です。
ゲームを終了する処理
// ゲームを終了する関数
function endGame() {
// タイマーを止める（止めないと動き続けてしまう）
clearInterval(timerId);
// ボタンの状態を元に戻す
clickBtn.disabled = true;
startBtn.disabled = false;
resultText.textContent = "終了！ スコア: " + score;
// ハイスコアを更新する
if (score > bestScore) {
bestScore = score;
localStorage.setItem("clickGameBest", bestScore);
bestText.textContent = "ハイスコア: " + bestScore;
resultText.textContent += "（ハイスコア更新！）";
}
}clearInterval(timerId)を忘れると、タイマーが止まらずにtimeLeftがどんどんマイナスになってしまいます。setIntervalを使ったら、必ず終了条件でclearIntervalを呼ぶのがポイントです。
これで、ブラウザでHTMLファイルを開けばクリックゲームが完成です！スタートを押して、10秒間で何回クリックできるか試してみましょう。
カスタマイズ
基本のゲームが完成したら、自分なりにカスタマイズしてみましょう。
- 制限時間を変える：
let timeLeft = 10;の数字を30に変えれば、30秒間遊べるゲームになります。 - ボタンをランダムに動かす：CSSで
#click-btnにposition: relative;を追加したうえで、クリックのたびにclickBtn.style.leftやtopをランダムな数値（例：Math.random() * 100 + "px"）に変更すると、追いかけっこ風になって難易度が上がります。positionを指定していないとleftやtopは効果を持たないので注意しましょう。 - 効果音をつける：
new Audio("click.mp3").play();をクリック処理の中に追加すると、音が鳴ります。 - ランキング機能：
localStorageに配列としてスコアを複数保存すれば、トップ5のランキング表示も作れます。
JavaScriptのDOM操作でゲームの仕組みを深く理解できます。夏休みに作れるWebアプリ10選で他のゲームアイデアも。GitHub Pagesで公開すれば友達にも遊んでもらえます。文化祭プログラミングアイデアでゲームを文化祭に活用することもできます。
まとめ
- ✅ HTML + CSS + JavaScriptの3ファイルでゲームが作れる
- ✅ クリックカウント + タイマーの基本ロジック
- ✅ setInterval / clearIntervalでカウントダウンを実装
- ✅ localStorageでハイスコア保存
- ✅ カスタマイズで難易度や演出を追加できる
クリックゲームには、変数・関数・条件分岐・DOM操作・タイマー処理と、プログラミングの基本がたくさん詰まっています。1つ完成させた経験は、次のステップに必ず活きます。
ぜひカスタマイズを加えて、自分だけのオリジナルゲームを友達に遊んでもらいましょう！