【コピペで完成】反射神経ゲームの作り方｜JavaScriptで簡単反応速度テストを実装！

「反射神経ゲーム（反応速度テスト）」を自分で作ってみたいけれど、プログラミングって難しそう…そう思っていませんか？

安心してください。今回ご紹介する方法なら、コピペするだけで誰でも反射神経ゲームを完成させることができます。HTMLとJavaScriptを使ったシンプルな仕組みなので、特別なソフトや環境も必要ありません。

実際に作れるゲームは、緑に変わった瞬間にクリックして反応速度を測定する、シンプルで遊びごたえのあるツールです。ベストスコアは自動で保存され、挑戦するたびに「もっと速く！」と熱中できます。

この記事を読みながら進めれば、わずか数分であなたのブラウザ上にオリジナルゲームが完成します。さらに、コードの仕組みを解説しているので、「なぜ動くのか」も自然と理解できるはずです。

さあ、一緒に「動くものを作る楽しさ」を体験してみましょう！

反射神経ゲームとは？

反射神経ゲームとは、光や色の変化に反応して、どれだけ素早くクリック（またはタップ）できるか を計測するシンプルなゲームです。

今回作るゲームのルールはとても簡単です。

画面下に並ぶシグナル（赤いランプ）が順番に点灯する
すべてのランプが消えたあと、画面が緑色に変化
緑になった瞬間にクリック！
クリックするまでの時間をミリ秒（ms）単位で計測

これだけの流れで、あなたの反射神経がどれくらい鋭いかがわかります。

このゲームの特徴

ベストスコア保存：最速記録はブラウザに保存されるので、毎回更新を狙えます。
早押し判定あり：緑になる前にクリックすると「フライング」と判定。緊張感アップ！
シンプル操作：クリックするだけなので、誰でもすぐに挑戦できます。
PC・スマホ対応：ブラウザさえあれば環境を選ばずに遊べる

【実際の反射神経ゲームの動作を試してみたい方はこちらからどうぞ】▼

: 反射神経ゲーム｜クリックで反応速度を測定！ベストスコアに挑戦【無料Webツール】
記録時間評価200ms 未満神反応200〜300ms速い300〜400ms平均400ms 以上要練習反応速度目安「自分の反射神経ってどれくらい速いんだろう？」そんなふうに思ったことはありませんか？ ...

3. コピペで完成！ソースコード全文

手順：下のコードを まるごと コピー → reaction-time-game.html として保存 → ブラウザで開く

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>反射神経ゲーム｜反応速度テスト</title>
<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    background: #2a2a3e;
    color: #fff;
    text-align: center;
  }
  .game-area {
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2a2a3e;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
  }
  .game-area.waiting { background: #f0f0f0; color:#000; }
  .game-area.start { background: #28aa45; }
  .game-area:focus {
    outline: 3px solid rgba(90,162,255,.6);
    outline-offset: 4px;
  }
  #mainMessage {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .signal-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
  }
  .signal-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #444;
    box-shadow: 0 0 4px rgba(0,0,0,0.5) inset;
    transition: background 0.3s, box-shadow 0.3s;
  }
  .signal-dot.on {
    background: red;
    box-shadow: 0 0 12px red;
  }
  .best-score, #stats {
    margin: 10px 0;
    font-size: 1.2rem;
  }
</style>
</head>
<body>
  <h1>反射神経ゲーム｜反応速度テスト</h1>
  <p>5つの赤いシグナルが消えたらクリック！早押しは失敗です。</p>

  <div id="gameArea" class="game-area" role="button" tabindex="0" aria-label="反応エリア">
    <div id="mainMessage">画面をクリックしてスタート</div>
  </div>

  <div class="signal-container" id="signalContainer">
    <div class="signal-dot"></div>
    <div class="signal-dot"></div>
    <div class="signal-dot"></div>
    <div class="signal-dot"></div>
    <div class="signal-dot"></div>
  </div>

  <div class="best-score" id="bestScore">ベストスコア: -</div>
  <div id="stats">
    直近: <span id="last">-</span> / 平均: <span id="avg">-</span> / 回数: <span id="count">0</span>
  </div>

<script>
(() => {
  const gameArea = document.getElementById("gameArea");
  const mainMessage = document.getElementById("mainMessage");
  const signalDots = document.querySelectorAll(".signal-dot");
  const bestScoreDisplay = document.getElementById("bestScore");

  const lastEl = document.getElementById("last");
  const avgEl = document.getElementById("avg");
  const countEl = document.getElementById("count");

  let gameState = "STOP";
  let startTime = 0;
  let timerId = null;
  let signalTimerIds = [];
  let times = [];
  let bestTime = localStorage.getItem("bestReactionTime");
  if (bestTime) bestScoreDisplay.textContent = `ベストスコア: ${parseFloat(bestTime).toFixed(3)} ms`;

  const randDelay = () => 500 + Math.random() * 1000;

  function resetSignalTimers() {
    signalTimerIds.forEach(id => clearTimeout(id));
    signalTimerIds = [];
    if (timerId) { clearTimeout(timerId); timerId = null; }
    signalDots.forEach(dot => dot.classList.remove("on"));
  }

  function startGame() {
    gameState = "WAITING";
    mainMessage.textContent = "スタートシークエンス";
    gameArea.className = "game-area waiting";

    resetSignalTimers();
    signalDots.forEach(dot => dot.classList.remove("on"));

    signalDots.forEach((dot, i) => {
      const id = setTimeout(() => {
        dot.classList.add("on");
        if (i === signalDots.length - 1) {
          const delay = randDelay();
          timerId = setTimeout(() => {
            signalDots.forEach(d => d.classList.remove("on"));
            gameState = "START";
            gameArea.className = "game-area start";
            mainMessage.textContent = "クリック！";
            startTime = performance.now();
          }, delay);
        }
      }, 1000 * (i + 1));
      signalTimerIds.push(id);
    });
  }

  function handleMistake(msg) {
    gameState = "MISTAKE";
    mainMessage.textContent = msg;
    gameArea.className = "game-area";
    resetSignalTimers();
    setTimeout(() => {
      gameState = "STOP";
      mainMessage.textContent = "画面をクリックしてスタート";
    }, 1500);
  }

  function handleSuccess() {
    if (gameState !== "START") return; // 二重発火防止
    gameState = "STOP";
    const endTime = performance.now();
    const reactionTime = endTime - startTime;
    mainMessage.textContent = `結果: ${reactionTime.toFixed(3)} ms`;
    gameArea.className = "game-area";

    times.push(reactionTime);
    const avg = Math.round(times.reduce((a,b)=>a+b,0)/times.length);
    lastEl.textContent = `${reactionTime.toFixed(0)} ms`;
    avgEl.textContent = `${avg} ms`;
    countEl.textContent = times.length;

    const currentBest = parseFloat(localStorage.getItem("bestReactionTime")) || Infinity;
    if (reactionTime < currentBest) {
      localStorage.setItem("bestReactionTime", String(reactionTime));
      bestScoreDisplay.textContent = `ベストスコア: ${reactionTime.toFixed(3)} ms (新記録！)`;
    } else {
      bestScoreDisplay.textContent = `ベストスコア: ${currentBest.toFixed(3)} ms`;
    }
  }

  function handleClick() {
    if (gameState === "STOP") {
      startGame();
    } else if (gameState === "WAITING") {
      resetSignalTimers();
      handleMistake("❌ 早すぎます！シグナルが消えるのを待ってください。");
    } else if (gameState === "START") {
      handleSuccess();
    }
  }

  gameArea.addEventListener("click", handleClick);

  // キーボード操作 (Space/Enter)
  document.addEventListener("keydown", e => {
    if (e.repeat) return;
    if (e.code === "Space" || e.code === "Enter") {
      e.preventDefault();
      handleClick();
    }
  });
})();
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

<!DOCTYPE html>

<head>

<title>反射神経ゲーム｜反応速度テスト</title>

<style>

body {

margin: 0;

font-family: system-ui, sans-serif;

background: #2a2a3e;

color: #fff;

text-align: center;

}

.game-area {

height: 50vh;

display: flex;

align-items: center;

justify-content: center;

background: #2a2a3e;

cursor: pointer;

user-select: none;

transition: background 0.2s;

}

.game-area.waiting { background: #f0f0f0; color:#000; }

.game-area.start { background: #28aa45; }

.game-area:focus {

outline: 3px solid rgba(90,162,255,.6);

outline-offset: 4px;

}

#mainMessage {

font-size: 1.6rem;

line-height: 1.4;

}

.signal-container {

display: flex;

justify-content: center;

gap: 8px;

padding: 20px;

}

.signal-dot {

width: 24px;

height: 24px;

border-radius: 50%;

background: #444;

box-shadow: 0 0 4px rgba(0,0,0,0.5) inset;

transition: background 0.3s, box-shadow 0.3s;

}

.signal-dot.on {

background: red;

box-shadow: 0 0 12px red;

}

.best-score, #stats {

margin: 10px 0;

font-size: 1.2rem;

}

</style>

</head>

<body>

<h1>反射神経ゲーム｜反応速度テスト</h1>

<p>5つの赤いシグナルが消えたらクリック！早押しは失敗です。</p>

<div id="mainMessage">画面をクリックしてスタート</div>

</div>

</div>

<div class="best-score" id="bestScore">ベストスコア: -</div>

直近: <span id="last">-</span> / 平均: <span id="avg">-</span> / 回数: <span id="count">0</span>

</div>

(() => {

const gameArea = document.getElementById("gameArea");

const mainMessage = document.getElementById("mainMessage");

const signalDots = document.querySelectorAll(".signal-dot");

const bestScoreDisplay = document.getElementById("bestScore");

const lastEl = document.getElementById("last");

const avgEl = document.getElementById("avg");

const countEl = document.getElementById("count");

let gameState = "STOP";

let startTime = 0;

let timerId = null;

let signalTimerIds = [];

let times = [];

let bestTime = localStorage.getItem("bestReactionTime");

if (bestTime) bestScoreDisplay.textContent = `ベストスコア: ${parseFloat(bestTime).toFixed(3)} ms`;

const randDelay = () => 500 + Math.random() * 1000;

function resetSignalTimers() {

signalTimerIds.forEach(id => clearTimeout(id));

signalTimerIds = [];

if (timerId) { clearTimeout(timerId); timerId = null; }

signalDots.forEach(dot => dot.classList.remove("on"));

}

function startGame() {

gameState = "WAITING";

mainMessage.textContent = "スタートシークエンス";

gameArea.className = "game-area waiting";

resetSignalTimers();

signalDots.forEach(dot => dot.classList.remove("on"));

signalDots.forEach((dot, i) => {

const id = setTimeout(() => {

dot.classList.add("on");

if (i === signalDots.length - 1) {

const delay = randDelay();

timerId = setTimeout(() => {

signalDots.forEach(d => d.classList.remove("on"));

gameState = "START";

gameArea.className = "game-area start";

mainMessage.textContent = "クリック！";

startTime = performance.now();

}, delay);

}

}, 1000 * (i + 1));

signalTimerIds.push(id);

});

}

function handleMistake(msg) {

gameState = "MISTAKE";

mainMessage.textContent = msg;

gameArea.className = "game-area";

resetSignalTimers();

setTimeout(() => {

gameState = "STOP";

mainMessage.textContent = "画面をクリックしてスタート";

}, 1500);

}

function handleSuccess() {

if (gameState !== "START") return; // 二重発火防止

gameState = "STOP";

const endTime = performance.now();

const reactionTime = endTime - startTime;

mainMessage.textContent = `結果: ${reactionTime.toFixed(3)} ms`;

gameArea.className = "game-area";

times.push(reactionTime);

const avg = Math.round(times.reduce((a,b)=>a+b,0)/times.length);

lastEl.textContent = `${reactionTime.toFixed(0)} ms`;

avgEl.textContent = `${avg} ms`;

countEl.textContent = times.length;

const currentBest = parseFloat(localStorage.getItem("bestReactionTime")) || Infinity;

if (reactionTime < currentBest) {

localStorage.setItem("bestReactionTime", String(reactionTime));

bestScoreDisplay.textContent = `ベストスコア: ${reactionTime.toFixed(3)} ms (新記録！)`;

} else {

bestScoreDisplay.textContent = `ベストスコア: ${currentBest.toFixed(3)} ms`;

}

function handleClick() {

if (gameState === "STOP") {

startGame();

} else if (gameState === "WAITING") {

resetSignalTimers();

handleMistake("❌ 早すぎます！シグナルが消えるのを待ってください。");

} else if (gameState === "START") {

handleSuccess();

}

gameArea.addEventListener("click", handleClick);

// キーボード操作 (Space/Enter)

document.addEventListener("keydown", e => {

if (e.repeat) return;

if (e.code === "Space" || e.code === "Enter") {

e.preventDefault();

handleClick();

}

});

})();

</script>

</body>

</html>

コードの仕組みを徹底解説（初心者でも安心！）

先ほどのコードをコピペするだけで反射神経ゲームが完成しましたね。
では「なぜ動くのか？」を分解してみましょう。ポイントは HTML / CSS / JavaScript の3つです。

HTML：ゲームの骨組みを作る

HTMLは、ゲーム画面の「部品」を並べる役割をします。

例えば次のような要素があります。

<div id="gameArea" class="game-area">
  <div id="mainMessage">画面をクリックしてスタート</div>
</div>

<div id="mainMessage">画面をクリックしてスタート</div>

</div>

gameArea → クリックやタップを受け付ける領域
mainMessage → 状態ごとにメッセージを表示（スタート待ち・結果など）

idは“名前札”みたいなもの。JavaScriptが『この要素を操作したい！』と指定するときに必要になります

ほーく

CSS：デザインと雰囲気を整える

CSSは、ゲームを「見やすく・遊びやすく」するための装飾です。

例：

.game-area.start {
  background: #28aa45; /* 緑に変化 */
}
.signal-dot.on {
  background: red; /* 赤ランプを点灯 */
  box-shadow: 0 0 12px red;
}

.game-area.start {

background: #28aa45; /* 緑に変化 */

}

.signal-dot.on {

background: red; /* 赤ランプを点灯 */

box-shadow: 0 0 12px red;

}

クリックのタイミングをわかりやすくする 色変化
スタート合図を演出する シグナルライト
PCでもスマホでも快適に使える レスポンシブ対応

これにより「ゲームらしさ」が一気にアップします。

JavaScript：ゲームに命を吹き込む

JavaScriptは、ルールや動きを実現する「頭脳」です。

代表的な処理はこちら

gameArea.addEventListener('click', handlePress);

1	gameArea.addEventListener('click', handlePress);

→ 「ゲームエリアがクリックされたら、handlePressという関数を実行してね」という命令。

const endTime = performance.now();
const reactionTime = endTime - startTime;

1 2	const endTime = performance.now(); const reactionTime = endTime - startTime;

→ 緑に変わった瞬間からクリックされるまでの時間を計算（ms単位）。

localStorage.setItem("bestReactionTime", String(reactionTime));

1	localStorage.setItem("bestReactionTime", String(reactionTime));

→ ベストスコアをブラウザに保存。ページを閉じても残ります。

カスタマイズのヒント（もっと面白くする改造アイデア）

基本の反射神経ゲームができあがったら、次は自分好みにアレンジしてみましょう。ちょっとした改造でも「遊びごたえ」が大きく変わります。

アイデア1：難易度調整機能を追加

反応を測定するまでの待機時間を変更できるようにすると、初級〜上級まで幅広く楽しめます。

例：

初級 → 0.3〜1秒の短い待機
上級 → 2〜3秒の長い待機

アイデア2：ランキングや履歴表示

今はベストスコアだけですが、直近5回分のスコアを保存すれば「自分の成長」が一目でわかります。
localStorageに配列で保存 → 履歴エリアに表示するだけで実現できます。

アイデア3：音やアニメーションを追加

緑になった瞬間に「ピッ！」という音を鳴らしたり、画面をフラッシュさせたりすると、緊張感がさらにアップします。
JavaScriptの Audio API を使えば簡単に効果音を追加できます。

アイデア4：スマホ専用モード

スマートフォンで片手でも遊びやすいように、ボタンサイズを大きくしたり、縦向きレイアウトに最適化するのもおすすめです。
CSSの @media を使えば、画面幅ごとにデザインを切り替えられます。

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

「反射神経ゲーム」を完成させたことで、あなたはすでに HTML・CSS・JavaScriptの基礎 に触れました。ここからさらにステップアップするために役立つ学習リソースを紹介します。

オンライン講座編

Udemy｜世界最大級のオンライン学習プラットフォーム

世界中で利用されるオンライン学習サイト。
HTML、CSS、JavaScriptの入門から応用まで、高評価の講座が数百種類揃っています。
初心者でも動画を見ながら手を動かせるので、挫折しにくいのが魅力です。

まとめ

今回は、JavaScriptとHTMLだけで作れる反射神経ゲームの作り方を解説しました。
クリックするだけのシンプルなルールですが、反応速度をミリ秒単位で測れるので遊ぶたびに熱中してしまいます。

この記事で学んだポイントを振り返ると：

反射神経ゲームの仕組み … シグナル点灯から緑画面に変わる瞬間を狙ってクリック
コピペで完成するソースコード … 初心者でもすぐにオリジナルゲームを動かせる
コードの仕組み解説 … HTMLは骨組み、CSSはデザイン、JavaScriptは動きを担当
カスタマイズのアイデア … 難易度調整や履歴表示、効果音追加でさらに楽しく進化

一度完成させたツールを、自分なりに少しずつ改造していけば、確実にプログラミング力が伸びていきます。

「自分で作ったゲームが実際に動く」という体験は、何より大きなモチベーションになります。
ぜひ今回の反射神経ゲームをきっかけに、もっと多彩なWebゲームやツールづくりに挑戦してみてください。

【実際に遊べる反射神経ゲームはこちら。ベストスコア更新を目指して挑戦してみよう！】▼

: 反射神経ゲーム｜クリックで反応速度を測定！ベストスコアに挑戦【無料Webツール】
記録時間評価200ms 未満神反応200〜300ms速い300〜400ms平均400ms 以上要練習反応速度目安「自分の反射神経ってどれくらい速いんだろう？」そんなふうに思ったことはありませんか？ ...

【作り方記事】タイピングゲームの作り方｜反射神経ゲームと同じくHTMLとJavaScriptだけで開発！▼

: 【コピペで完成】タイピング練習ゲームの作り方｜HTML＆JavaScriptで初心者でもできる！
「プログラミングって難しそう…」「何度か挑戦したけど途中で挫折してしまった」——そう感じていませんか？安心してください。実は、私たちが普段遊んでいるゲームも、意外とシンプルな仕組みの組み合わせで動いて ...

【作り方記事】記憶力テストゲームの作り方｜反射神経ゲームと同じくHTMLとJavaScriptだけで開発！▼

: 【コピペで完成】記憶力テストゲームの作り方｜HTMLとJavaScriptで遊べる脳トレアプリを自作しよう！
「プログラミングって難しそう…」「ゲームを作ってみたいけど、何から始めればいいかわからない」——そんなふうに感じていませんか？安心してください！今回紹介するのは、HTMLとJavaScriptだけで ...

【コピペで完成】反射神経ゲームの作り方｜JavaScriptで簡単反応速度テストを実装！

反射神経ゲームとは？

このゲームの特徴

3. コピペで完成！ソースコード全文

コードの仕組みを徹底解説（初心者でも安心！）

HTML：ゲームの骨組みを作る

CSS：デザインと雰囲気を整える

JavaScript：ゲームに命を吹き込む

カスタマイズのヒント（もっと面白くする改造アイデア）

アイデア1：難易度調整機能を追加

アイデア2：ランキングや履歴表示

アイデア3：音やアニメーションを追加

アイデア4：スマホ専用モード

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

おすすめ書籍

『ゲームで学ぶJavaScript入門増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』

『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）

オンライン講座編

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ

関連記事

VSCode JavaScript拡張機能｜初心者はまずこれだけ入れればOK【厳選3つ】

Visual Studio Code（VSCode）インストール方法｜初心者でも5分でできる日本語化ガイド【Windows/Mac 両対応】

HTMLとCSS 実践編｜初心者でもコピペで作れる！モダンUIデザイン入門

HTMLとCSS 基礎入門｜初心者でも今日から作れる！わかりやすい超入門ガイド

JavaScript初心者でもできる！文字数カウンターを作りながら基礎文法を学ぼう

【コピペで完成】反射神経ゲームの作り方｜JavaScriptで簡単反応速度テストを実装！

反射神経ゲームとは？

このゲームの特徴

3. コピペで完成！ソースコード全文

コードの仕組みを徹底解説（初心者でも安心！）

HTML：ゲームの骨組みを作る

CSS：デザインと雰囲気を整える

JavaScript：ゲームに命を吹き込む

カスタマイズのヒント（もっと面白くする改造アイデア）

アイデア1：難易度調整機能を追加

アイデア2：ランキングや履歴表示

アイデア3：音やアニメーションを追加

アイデア4：スマホ専用モード

おすすめの学習リソース｜もっとスキルを伸ばしたいあなたへ

おすすめ書籍

『ゲームで学ぶJavaScript入門 増補改訂版 ～ブラウザゲームづくりでHTML＆CSSも身につく！』

『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）

オンライン講座編

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ

関連記事

『ゲームで学ぶJavaScript入門増補改訂版～ブラウザゲームづくりでHTML＆CSSも身につく！』