【コピペで完成】タイピング練習ゲームの作り方｜HTML＆JavaScriptで初心者でもできる！

「プログラミングって難しそう…」「何度か挑戦したけど途中で挫折してしまった」——そう感じていませんか？
安心してください。実は、私たちが普段遊んでいるゲームも、意外とシンプルな仕組みの組み合わせで動いています。

今回は、Web開発の基本である HTML・CSS・JavaScript を使って、1つのファイルだけで動くタイピングゲームを作っていきます。
面倒な設定や特別なソフトは不要。コピペでOKです！

「タイピングゲーム」は誰にでも馴染みのある題材。
その仕組みを理解しながら作っていくことで、自然とプログラミングの基礎が身につく構成になっています。

この記事を最後まで読めば、

ブラウザで動くオリジナルゲームを完成させることができます。
JavaScriptの基礎構造が自然に理解できるようになります。

では早速、あなたのパソコンで動くタイピング練習ゲームを作ってみましょう！

【実際のタイピングゲームの動作を試してみたい方はこちらからどうぞ】▼

: 【無料】タイピング練習ゲーム｜制限時間60秒＆難易度3段階・ベストスコア保存つき
ランク最終スコア（ポイント）達成の目安S150 ポイント以上圧倒的なスピードと極めて高い正確性を誇るプロ級の実力！A100 ポイント以上非常に優秀なスコア。安定した速さと正確性を持っています。B60 ...

事前準備｜開発環境を整えよう

「プログラミングを始めるには、難しいソフトをインストールしたり、専門的な設定が必要なのでは…？」
そんな心配は不要です！

今回作るタイピングゲームは、あなたのパソコンに最初から入っている機能だけで動かせます。
準備は、たった 2ステップで完了します。

ステップ1：テキストエディタを用意しよう

まずは、ゲームのコードを書くためのソフト「テキストエディタ」を準備しましょう。
これは、文字を書くだけのシンプルなソフトです。

Windowsの場合 → 「メモ帳」
Macの場合 → 「テキストエディット」

このどちらでも問題ありません。

初心者におすすめの無料ソフト
もし「もっと見やすく快適に作業したい！」という方には、
世界中の開発者に人気の高い無料ソフト Visual Studio Code（VS Code） がおすすめです。

コードに色が付き、構造がわかりやすい
書き間違い（文法エラー）を自動で教えてくれる
どのパソコンでも無料で使える

VS Code は初心者でも扱いやすく、プロも使っています。これからプログラミングを続けるなら、最初に入れておくと便利ですよ！

ほーく

ステップ2：`index.html` ファイルを作成しよう

タイピングゲームのすべてのコードを入れるファイルを作ります。

デスクトップなど、分かりやすい場所に新しいフォルダを作成します。
　（例：typing_game_project）
そのフォルダ内に、新しいテキストファイルを作成します。
ファイル名を index.html に変更して保存します。

これで、開発環境の準備は完了です！

ココがポイント！
ファイル名の最後についている .html は、
「このファイルは Webブラウザで開けるファイルですよ」という意味です。

つまり、Google Chrome や Safari を使えば、あなたが作るタイピングゲームを自分のブラウザでそのまま実行できるということです。

【コピペOK】シンプルタイピングゲームの完成ソースコード

お待たせしました！
ここからはいよいよ、あなたの手でタイピングゲームを動かす瞬間です。

「プログラミングって難しいんじゃないの？」と思うかもしれませんが、安心してください。
ここでは コピペするだけでOK。
前の章で作った index.html ファイルが、一瞬で動くゲームに変わります。

以下のコードをすべてコピー＆貼り付け！

次のコード全体をコピーして、
先ほど作った index.html ファイルにすべて貼り付けて保存してください。

この中には、ゲームを構成する3つの要素がすべて詰まっています

HTML：画面の構造（スコア・単語・ボタンなど）
CSS：見た目のデザイン（配色・レイアウト・動き）
JavaScript：ゲームの動きを制御（カウントダウン・スコア計算・判定など）

完成版ソースコード全文

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シンプル・タイピングゲーム（コピペ用）</title>
    <style>
        /* 1. 全体デザイン */
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f0f0f5;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* 2. 情報表示エリア */
        .info {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            font-size: 1.2em;
            font-weight: bold;
        }

        /* 3. ワード表示エリア */
        #wordDisplay {
            min-height: 80px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #333;
            color: white;
            border-radius: 5px;
            font-size: 2.2em;
            text-align: left;
            user-select: none; /* テキスト選択を無効化 */
        }
        
        /* 4. 入力・判定のスタイル */
        .correct {
            color: #4CAF50; /* 緑 */
        }

        .current {
            text-decoration: underline; /* 次に入力すべき文字に下線 */
        }

        /* 5. ボタン */
        #startButton {
            padding: 10px 20px;
            font-size: 1.2em;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
        }

        #typingInput {
            /* 画面に表示しない（裏側でキー入力を処理する） */
            position: absolute; 
            left: -9999px; 
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>コピペでできる シンプルタイピング</h1>
        
        <div class="info">
            <div id="timerDisplay">残り時間: 10秒</div>
            <div id="scoreDisplay">スコア: 0</div>
        </div>

        <div id="wordDisplay">
            スタートボタンを押すか、Enterキーを押してください
        </div>
        
        <button id="startButton">ゲームスタート</button>

        <input type="text" id="typingInput" disabled>
    </div>

    <script>
        // --- 1. 定数と変数の設定 ---
        
        // 簡略化されたワードリスト（ひらがなと対応ローマ字）
        const WORDS = [
            { ja: 'もじ', ro: 'moji' },
            { ja: 'たいぴんぐ', ro: 'taipingu' },
            { ja: 'ことば', ro: 'kotoba' },
            { ja: 'へんかん', ro: 'henkan' },
            { ja: 'きーぼーど', ro: 'ki-bo-do' },
            { ja: 'かんたん', ro: 'kantan' }
        ];

        // DOM要素
        const wordDisplay = document.getElementById('wordDisplay');
        const timerDisplay = document.getElementById('timerDisplay');
        const scoreDisplay = document.getElementById('scoreDisplay');
        const startButton = document.getElementById('startButton');
        const typingInput = document.getElementById('typingInput');
        
        // ゲーム状態変数
        let currentWord = {};         // {ja: '', ro: ''}
        let typedRomanIndex = 0;      // 現在入力済みのローマ字インデックス
        let wordIndex = 0;            // 現在出題中のワードのインデックス
        let score = 0;                // スコア
        let timer = 10;               // 制限時間（短く設定）
        let timerInterval = null;     // タイマーのID
        let isGameActive = false;     // ゲーム進行中かどうか

        // --- 2. ゲーム開始・終了のロジック ---

        function startGame() {
            if (isGameActive) return;

            // 状態リセット
            isGameActive = true;
            score = 0;
            timer = 10;
            wordIndex = 0;

            scoreDisplay.textContent = `スコア: ${score}`;
            typingInput.disabled = false;
            startButton.disabled = true;
            typingInput.focus();

            // ワードの準備
            shuffleWords(WORDS);
            setNewWord();

            // タイマー開始
            timerInterval = setInterval(updateTimer, 1000);
        }

        function updateTimer() {
            timer--;
            timerDisplay.textContent = `残り時間: ${timer}秒`;

            if (timer <= 0) {
                clearInterval(timerInterval);
                endGame();
            }
        }

        function endGame() {
            isGameActive = false;
            typingInput.disabled = true;
            startButton.disabled = false;
            wordDisplay.innerHTML = `<p style="color:red; font-size:1.5em;">ゲーム終了！スコア: ${score}</p>`;
        }

        // --- 3. ワードの表示と管理 ---

        function shuffleWords(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        function setNewWord() {
            currentWord = WORDS[wordIndex];
            typedRomanIndex = 0;
            renderWord();
        }

        function renderWord() {
            const roman = currentWord.ro;
            let displayHtml = '';

            for (let i = 0; i < roman.length; i++) {
                const char = roman[i];
                let className = '';

                if (i < typedRomanIndex) {
                    className = 'correct'; // 入力済み
                } else if (i === typedRomanIndex) {
                    className = 'current'; // 次の文字
                }
                
                displayHtml += `<span class="${className}">${char}</span>`;
            }

            // 元のひらがなを小さく表示
            wordDisplay.innerHTML = `${currentWord.ja} <span style="font-size:0.5em; color:#aaa;">(${displayHtml})</span>`;
        }


        // --- 4. 入力判定ロジック ---

        document.addEventListener('keydown', (e) => {
            if (!isGameActive) {
                // Enter/Spaceでゲーム開始
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault(); 
                    startGame();
                }
                return;
            }

            const key = e.key.toLowerCase();
            const targetChar = currentWord.ro[typedRomanIndex];

            // 1文字キー（a-zなど）で、かつターゲット文字と一致するかチェック
            if (key.length === 1 && key === targetChar) {
                e.preventDefault(); 
                typedRomanIndex++;

                // ワードの入力完了
                if (typedRomanIndex >= currentWord.ro.length) {
                    score++;
                    scoreDisplay.textContent = `スコア: ${score}`;
                    
                    // 次のワードへ
                    wordIndex = (wordIndex + 1) % WORDS.length;
                    setNewWord();
                } else {
                    renderWord(); 
                }
            }
            // ミスは無視（簡略化のため、ミス判定はしない）
        });


        // --- 5. イベントリスナー ---
        startButton.addEventListener('click', startGame);

    </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

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

<!DOCTYPE html>

<head>

<title>シンプル・タイピングゲーム（コピペ用）</title>

<style>

/* 1. 全体デザイン */

body {

font-family: 'Arial', sans-serif;

text-align: center;

padding: 20px;

background-color: #f0f0f5;

}

.container {

max-width: 600px;

margin: 0 auto;

background-color: #ffffff;

padding: 30px;

border-radius: 10px;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}

/* 2. 情報表示エリア */

.info {

display: flex;

justify-content: space-around;

margin-bottom: 20px;

font-size: 1.2em;

font-weight: bold;

}

/* 3. ワード表示エリア */

#wordDisplay {

min-height: 80px;

padding: 15px;

margin-bottom: 20px;

background-color: #333;

color: white;

border-radius: 5px;

font-size: 2.2em;

text-align: left;

user-select: none; /* テキスト選択を無効化 */

}

/* 4. 入力・判定のスタイル */

.correct {

color: #4CAF50; /* 緑 */

}

.current {

text-decoration: underline; /* 次に入力すべき文字に下線 */

}

/* 5. ボタン */

#startButton {

padding: 10px 20px;

font-size: 1.2em;

cursor: pointer;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

}

#typingInput {

/* 画面に表示しない（裏側でキー入力を処理する） */

position: absolute;

left: -9999px;

opacity: 0;

}

</style>

</head>

<body>

<h1>コピペでできるシンプルタイピング</h1>

</div>

スタートボタンを押すか、Enterキーを押してください

</div>

<button id="startButton">ゲームスタート</button>

</div>

// --- 1. 定数と変数の設定 ---

// 簡略化されたワードリスト（ひらがなと対応ローマ字）

const WORDS = [

{ ja: 'もじ', ro: 'moji' },

{ ja: 'たいぴんぐ', ro: 'taipingu' },

{ ja: 'ことば', ro: 'kotoba' },

{ ja: 'へんかん', ro: 'henkan' },

{ ja: 'きーぼーど', ro: 'ki-bo-do' },

{ ja: 'かんたん', ro: 'kantan' }

];

// DOM要素

const wordDisplay = document.getElementById('wordDisplay');

const timerDisplay = document.getElementById('timerDisplay');

const scoreDisplay = document.getElementById('scoreDisplay');

const startButton = document.getElementById('startButton');

const typingInput = document.getElementById('typingInput');

// ゲーム状態変数

let currentWord = {}; // {ja: '', ro: ''}

let typedRomanIndex = 0; // 現在入力済みのローマ字インデックス

let wordIndex = 0; // 現在出題中のワードのインデックス

let score = 0; // スコア

let timer = 10; // 制限時間（短く設定）

let timerInterval = null; // タイマーのID

let isGameActive = false; // ゲーム進行中かどうか

// --- 2. ゲーム開始・終了のロジック ---

function startGame() {

if (isGameActive) return;

// 状態リセット

isGameActive = true;

score = 0;

timer = 10;

wordIndex = 0;

scoreDisplay.textContent = `スコア: ${score}`;

typingInput.disabled = false;

startButton.disabled = true;

typingInput.focus();

// ワードの準備

shuffleWords(WORDS);

setNewWord();

// タイマー開始

timerInterval = setInterval(updateTimer, 1000);

}

function updateTimer() {

timer--;

timerDisplay.textContent = `残り時間: ${timer}秒`;

if (timer <= 0) {

clearInterval(timerInterval);

endGame();

}

function endGame() {

isGameActive = false;

typingInput.disabled = true;

startButton.disabled = false;

wordDisplay.innerHTML = `<p style="color:red; font-size:1.5em;">ゲーム終了！スコア: ${score}</p>`;

}

// --- 3. ワードの表示と管理 ---

function shuffleWords(array) {

for (let i = array.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[array[i], array[j]] = [array[j], array[i]];

}

function setNewWord() {

currentWord = WORDS[wordIndex];

typedRomanIndex = 0;

renderWord();

}

function renderWord() {

const roman = currentWord.ro;

let displayHtml = '';

for (let i = 0; i < roman.length; i++) {

const char = roman[i];

let className = '';

if (i < typedRomanIndex) {

className = 'correct'; // 入力済み

} else if (i === typedRomanIndex) {

className = 'current'; // 次の文字

}

displayHtml += `<span class="${className}">${char}</span>`;

}

// 元のひらがなを小さく表示

wordDisplay.innerHTML = `${currentWord.ja} <span style="font-size:0.5em; color:#aaa;">(${displayHtml})</span>`;

}

// --- 4. 入力判定ロジック ---

document.addEventListener('keydown', (e) => {

if (!isGameActive) {

// Enter/Spaceでゲーム開始

if (e.key === 'Enter' || e.key === ' ') {

e.preventDefault();

startGame();

}

return;

}

const key = e.key.toLowerCase();

const targetChar = currentWord.ro[typedRomanIndex];

// 1文字キー（a-zなど）で、かつターゲット文字と一致するかチェック

if (key.length === 1 && key === targetChar) {

e.preventDefault();

typedRomanIndex++;

// ワードの入力完了

if (typedRomanIndex >= currentWord.ro.length) {

score++;

scoreDisplay.textContent = `スコア: ${score}`;

// 次のワードへ

wordIndex = (wordIndex + 1) % WORDS.length;

setNewWord();

} else {

renderWord();

}

// ミスは無視（簡略化のため、ミス判定はしない）

});

// --- 5. イベントリスナー ---

startButton.addEventListener('click', startGame);

</script>

</body>

</html>

ここでは“仕組みを理解する”よりも“まず動かす”ことが大事です。
実際にゲームが動くと、どの部分が何をしているのかが自然と見えてきますよ。

ほーく

ブラウザで開いてみよう！

コードを貼り付けたら、必ず保存してください。
その後、ファイルを ダブルクリック して開いてみましょう。

Google Chrome や Safari などのブラウザが立ち上がり、
あなたの作ったタイピングゲームが画面に表示されます。

遊び方：

「ゲームスタート」ボタンをクリック（または Enterキー）
制限時間10秒のカウントが始まります
画面に表示されたひらがなを、できるだけ正確＆素早く入力！

終わるとスコアが表示され、あなたのベストスコアも自動で保存されます。

コード解説：タイピングゲームが動く仕組み（3つの要素）

コピペしてゲームが動いたとき、きっと少し感動したはずです。
でも、実はあの「魔法のような動き」にはしっかりとした仕組みがあります。

このゲームは、Web開発の三本柱―HTML・CSS・JavaScript―の組み合わせで動いています。
それぞれの役割を理解すれば、「コピペで終わり」から一歩先へ進めます。

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

HTML（エイチティーエムエル）は、ウェブページの構造を作る言語です。
タイピングゲームでは、「どこに何を置くか」を決める土台のような存在です。

<div id="timerDisplay"></div> <!-- 残り時間を表示 -->
<button id="startButton">スタート</button> <!-- ゲーム開始ボタン -->

1 2	<div id="timerDisplay"></div> <!-- 残り時間を表示 --> <button id="startButton">スタート</button> <!-- ゲーム開始ボタン -->

ココがポイント
HTMLでは、id という「名前札」を要素につけておきます。
この名前をもとに、JavaScriptが
「スタートボタンが押されたら動いてください！」
「タイマーの表示を更新してください！」
と命令できるのです。

CSS：ゲームの「見た目」をデザインする

CSS（シーエスエス）は、HTMLで作った骨組みにデザインを与える言語です。
文字の色・背景・配置などを美しく整える“化粧”の役割を持っています。

たとえば、入力が正しいときに緑色で文字を表示するのもCSSの仕事です。

.correct {
  color: #4CAF50; /* 入力済みの文字を緑に */
}

.correct {

color: #4CAF50; /* 入力済みの文字を緑に */

}

これによって、プレイヤーが「正しく打てた！」と直感的にわかるようになります。

CSSをちょっと変えるだけで、フォントや色、動きまで自由にカスタマイズできます。
“自分だけのゲーム”に近づく一歩ですよ。

ほーく

JavaScript：ゲームの「頭脳」を制御する（ここが核心！）

JavaScript（ジャバスクリプト）は、動きとロジック（仕組み）を担当します。
まさにこのゲームの“脳”です。

ここでは3つの重要な仕組みを理解しましょう

ワードリストの管理

出題される単語は、次のように配列（リスト）で管理されています。

const WORDS = [
  { ja: 'もじ', ro: 'moji' },
  { ja: 'たいぴんぐ', ro: 'taipingu' },
  // ... 他の単語 ...
];

const WORDS = [

{ ja: 'もじ', ro: 'moji' },

{ ja: 'たいぴんぐ', ro: 'taipingu' },

// ... 他の単語 ...

];

ja：日本語の表示用（例：ひらがな）
ro：入力判定用のローマ字

ゲーム開始時に shuffleWords(WORDS) を実行してランダムに並べ替え、毎回違う順番で出題されます。

この“{ ja: ..., ro: ... }”という形をオブジェクトと呼びます。
一つの単語を“日本語＋ローマ字”でペアにしておくと、管理がとても楽になりますよ。

ほーく

キー入力の判定システム

あなたがキーボードを押すたびに、プログラムはそれを感知して判定します。
その“聞き耳”の仕組みがこちら。

        // --- 4. 入力判定ロジック ---
        document.addEventListener('keydown', (e) => {

            const key = e.key.toLowerCase();
            const targetChar = currentWord.ro[typedRomanIndex];

            // 1文字キー（a-zなど）で、かつターゲット文字と一致するかチェック
            if (key.length === 1 && key === targetChar) {
                e.preventDefault(); 
                typedRomanIndex++;

                // ワードの入力完了
                if (typedRomanIndex >= currentWord.ro.length) {
                    score++;
                    scoreDisplay.textContent = `スコア: ${score}`;
                    
                    // 次のワードへ
                    wordIndex = (wordIndex + 1) % WORDS.length;
                    setNewWord();
                } else {
                    renderWord(); 
                }
            }
        });

// --- 4. 入力判定ロジック ---

document.addEventListener('keydown', (e) => {

const key = e.key.toLowerCase();

const targetChar = currentWord.ro[typedRomanIndex];

// 1文字キー（a-zなど）で、かつターゲット文字と一致するかチェック

if (key.length === 1 && key === targetChar) {

e.preventDefault();

typedRomanIndex++;

// ワードの入力完了

if (typedRomanIndex >= currentWord.ro.length) {

score++;

scoreDisplay.textContent = `スコア: ${score}`;

// 次のワードへ

wordIndex = (wordIndex + 1) % WORDS.length;

setNewWord();

} else {

renderWord();

}

});

addEventListener('keydown', ...)：
これは「キーが押される（keydown）というイベントが発生したら、次の処理を実行せよ」という命令です。

処理の中では、以下の重要な判定が行われています。

const key = e.key.toLowerCase();：
今押されたキーが何かを取得します。
const targetChar = currentWord.ro[typedRomanIndex];：
次に入力すべきローマ字の一文字を取得します。
if (key === targetChar)：
もし「押されたキー」と「次に入力すべき文字」が一致したら、typedRomanIndexを増やして正解とみなし、画面を更新（renderWord()）します。
ワードを最後まで入力し終えたら、scoreを増やして次の単語へ移ります。

タイマーの仕組み

タイピングゲームに欠かせない時間制限は、setInterval（セットインターバル）という命令で作られています。

// 1000ミリ秒（1秒）ごとに updateTimer 関数を実行する
timerInterval = setInterval(updateTimer, 1000);

1 2	// 1000ミリ秒（1秒）ごとに updateTimer 関数を実行する timerInterval = setInterval(updateTimer, 1000);

これは、「1秒ごとにupdateTimer関数を実行」という命令です。
関数の中では、残り時間を1ずつ減らし、0になったら自動でゲームを終了します。

JavaScriptは“時間を使う処理”も得意です。
タイマー、アニメーション、ゲーム進行など、リアルタイム処理を担うのがこの言語の魅力です。

ほーく

【カスタマイズ】自分だけのタイピングゲームに進化させよう！

コピペと解説を通して、タイピングゲームの仕組みが理解できましたね！
ここからは、完成したゲームをあなただけのオリジナル仕様に変えるカスタマイズに挑戦してみましょう。

難しいことは一切ありません。
たった数行のコードを変更するだけで、ゲームの印象や難易度がガラッと変わります。

カスタマイズは“コピーで終わり”から一歩進む最初のステップ。
ほんの少し触るだけで、コードの理解が一気に深まりますよ！

ほーく

カスタマイズ①：出題されるワードを変えてみよう

ゲームの面白さを左右するのが「出題ワード」です。
自分の好きなテーマに変えるだけで、学びながら楽しめる“世界に一つだけのゲーム”になります。

変更場所：
コードの冒頭付近にある、単語リスト部分を探してください。

const WORDS = [
    { ja: 'もじ', ro: 'moji' },
    { ja: 'たいぴんぐ', ro: 'taipingu' },
    // ... 他の単語 ...
];

const WORDS = [

{ ja: 'もじ', ro: 'moji' },

{ ja: 'たいぴんぐ', ro: 'taipingu' },

// ... 他の単語 ...

];

変更方法：
以下のように、{ ja: 'ひらがな', ro: 'ローマ字' } の形式で自由に追加・編集します。
ひらがな（ja）とローマ字（ro）をカンマ,で区切ればOKです。

例：食べ物テーマに変更してみよう！

const WORDS = [
    { ja: 'すし', ro: 'sushi' },
    { ja: 'らーめん', ro: 'ra-men' },
    { ja: 'ぱすた', ro: 'pasuta' },
    { ja: 'おむらいす', ro: 'omuraisu' }
];

const WORDS = [

{ ja: 'すし', ro: 'sushi' },

{ ja: 'らーめん', ro: 'ra-men' },

{ ja: 'ぱすた', ro: 'pasuta' },

{ ja: 'おむらいす', ro: 'omuraisu' }

];

これで、あなたが設定した食べ物ワードがランダムで出題されます。
「推しキャラの名前」「都道府県」「英単語」などに変えても楽しいですよ！

カスタマイズ②：制限時間を自由に調整しよう

「60秒じゃ長い」「10秒は短すぎる！」
そんなときは、制限時間を変えてみましょう。

変更場所：
ゲームの状態を定義している部分にあります。

// ゲーム状態変数
let timer = 10;               // 制限時間

1 2	// ゲーム状態変数 let timer = 10; // 制限時間

変更方法：

let timer = 10; の 10 の部分を、好きな秒数に書き換えてください。

例えば、let timer = 30; に書き換えれば、制限時間が30秒に伸びます。

短くすれば“集中力トレーニング”、長くすれば“持久力テスト”。
自分のプレイスタイルに合わせて調整しましょう！

ほーく

カスタマイズ③：スコアをリセット＆アレンジ

スコアの初期値を変えたり、リセットしたいときも簡単です。
ゲーム開始時の設定部分を少しだけ見てみましょう。

変更場所：
startGame() 関数の中にあります。

function startGame() {
    if (isGameActive) return;

    // 状態リセット
    isGameActive = true;
    score = 0; // ★この行がスコアをリセットしている
    // ...
}

function startGame() {

if (isGameActive) return;

// 状態リセット

isGameActive = true;

score = 0; // ★この行がスコアをリセットしている

// ...

}

スコアの初期値を変えたり、ゲームが始まる前のscore = 0;の行に注目してみましょう。
これを応用すれば、「最初はマイナス点からスタートする」といったユニークなルールも作れますね。

コードを“いじる”ことが上達の近道

カスタマイズの魅力は、ほんの少しの変更で世界が広がること。
コードの意味を理解しながら、少しずつ自分仕様に変えていくことで「ただのゲーム」が「自分の作品」に変わります。

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

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

オンライン講座編

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

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

まとめ：ゲーム作りは「最初の一歩」がすべて！

おつかれさまでした！
ここまでで、タイピングゲームを一から自作する方法をしっかり理解できたと思います。

今回のように「コピペで動くシンプルなゲーム」でも、

HTMLでページの骨組みを作り、
CSSで見た目を整え、
JavaScriptで動きをつける

という、Web開発の基礎がすべて詰まっています。

この小さな成功体験が、次の挑戦への原動力になります。
少しずつカスタマイズして、「自分だけのオリジナルゲーム」を作ってみてください。

【実際に遊べるタイピングゲームはこちら。ベストスコア更新を目指して挑戦してみよう！】▼

: 【無料】タイピング練習ゲーム｜制限時間60秒＆難易度3段階・ベストスコア保存つき
ランク最終スコア（ポイント）達成の目安S150 ポイント以上圧倒的なスピードと極めて高い正確性を誇るプロ級の実力！A100 ポイント以上非常に優秀なスコア。安定した速さと正確性を持っています。B60 ...

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

: 【コピペで完成】反射神経ゲームの作り方｜JavaScriptで簡単反応速度テストを実装！
「反射神経ゲーム（反応速度テスト）」を自分で作ってみたいけれど、プログラミングって難しそう…そう思っていませんか？安心してください。今回ご紹介する方法なら、コピペするだけで誰でも反射神経ゲームを完成 ...

【作り方記事】記憶力テストゲームの作り方｜タイピングゲームと同じくHTMLとJavaScriptだけで開発！▼

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

【コピペで完成】タイピング練習ゲームの作り方｜HTML＆JavaScriptで初心者でもできる！

事前準備｜開発環境を整えよう

ステップ1：テキストエディタを用意しよう

ステップ2：`index.html` ファイルを作成しよう

【コピペOK】シンプルタイピングゲームの完成ソースコード

以下のコードをすべてコピー＆貼り付け！

完成版ソースコード全文

ブラウザで開いてみよう！

コード解説：タイピングゲームが動く仕組み（3つの要素）

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

CSS：ゲームの「見た目」をデザインする

JavaScript：ゲームの「頭脳」を制御する（ここが核心！）

ワードリストの管理

キー入力の判定システム

タイマーの仕組み

【カスタマイズ】自分だけのタイピングゲームに進化させよう！

カスタマイズ①：出題されるワードを変えてみよう

カスタマイズ②：制限時間を自由に調整しよう

カスタマイズ③：スコアをリセット＆アレンジ

コードを“いじる”ことが上達の近道

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

おすすめ書籍

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

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

オンライン講座編

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

まとめ：ゲーム作りは「最初の一歩」がすべて！

関連記事

【コピペで完成】記憶力テストゲームの作り方｜HTMLとJavaScriptで遊べる脳トレアプリを自作しよう！

【無料】記憶力テストゲーム｜6色パネルで脳トレ＆反射チェック！ベストスコア保存つき

【コピペで完成】タイピング練習ゲームの作り方｜HTML＆JavaScriptで初心者でもできる！

【無料】タイピング練習ゲーム｜制限時間60秒＆難易度3段階・ベストスコア保存つき

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

【コピペで完成】タイピング練習ゲームの作り方｜HTML＆JavaScriptで初心者でもできる！

事前準備｜開発環境を整えよう

ステップ1：テキストエディタを用意しよう

ステップ2：index.html ファイルを作成しよう

【コピペOK】シンプルタイピングゲームの完成ソースコード

以下のコードをすべてコピー＆貼り付け！

完成版ソースコード全文

ブラウザで開いてみよう！

コード解説：タイピングゲームが動く仕組み（3つの要素）

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

CSS：ゲームの「見た目」をデザインする

JavaScript：ゲームの「頭脳」を制御する（ここが核心！）

ワードリストの管理

キー入力の判定システム

タイマーの仕組み

【カスタマイズ】自分だけのタイピングゲームに進化させよう！

カスタマイズ①：出題されるワードを変えてみよう

カスタマイズ②：制限時間を自由に調整しよう

カスタマイズ③：スコアをリセット＆アレンジ

コードを“いじる”ことが上達の近道

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

おすすめ書籍

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

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

オンライン講座編

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

まとめ：ゲーム作りは「最初の一歩」がすべて！

関連記事

ステップ2：`index.html` ファイルを作成しよう

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