初心者でも簡単！JavaScriptで作るタイピングゲーム

Posted at 2025-03-06

タイピングゲームを作ろう！

皆さん、こんにちは👋！
今回は、タイピングスピードテストを作成する方法を、HTML・CSS・JavaScript を使ってステップバイステップで解説します。
本記事は、プログラミング初心者の方でも理解しやすいように、各コード例や図解、そして実際に動作するサンプルコードを交えながら進めていきます。

プロジェクトの概要

このタイピングゲームは、ユーザーが表示された日本語の文章をできるだけ速く正確に入力することで、タイピングスピード（文字/分）を計測するシンプルなゲームです。

主な機能：

開始ボタンをクリックすると、テスト用文章が表示されます。
出題された文章を正確にタイピングすることで、入力の正確さと速度を測定します。
ゲーム終了時には、正確に入力できた文字数とタイピング速度を算出して表示します。

このプロジェクトを通して、以下のことを学びます：

Webページの基本構造（HTML）
ユーザーインターフェイスの整え方（CSS）
イベント駆動型プログラミングとタイマー制御（JavaScript）

HTML部分の実装

まずは、基本のHTMLファイルを作成します。
HTMLは、各要素（見出し、ボタン、テキストエリア、結果表示領域）を配置し、操作の基盤となる構造を定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイピングスピードテスト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>タイピングスピードテスト</h1>
    <button id="start-button">開始</button>
    <div id="text"></div>
    <textarea id="typing-area" placeholder="ここにタイピング"></textarea>
    <div id="result"></div>
    <script src="app.js"></script>
</body>
</html>

ポイント：

``
ゲーム開始のトリガーとなるボタンです。
``
出題される文章を表示します。初期状態は非表示にしておき、開始時に表示します。
``
ユーザーが実際にタイピングするエリアです。
``
タイピング完了後に結果（正解数と文字速度）を表示する領域です。

CSS部分の実装

次に、デザインとレイアウトを整えるためにCSSを設定します。
以下のコードはシンプルながらも洗練された見た目を実現しており、ユーザビリティを高めています。

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #555;
}

#start-button {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

#start-button:hover {
    background-color: #0056b3;
}

#text {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #777;
    display: none; /* 初期状態で非表示 */
    text-align: center;
}

#typing-area {
    width: 80%;
    max-width: 600px;
    height: 100px;
    padding: 15px;
    font-size: 1.2em;
    border: 2px solid #007BFF;
    border-radius: 8px;
    outline: none;
    resize: none;
    transition: border-color 0.3s;
}

#typing-area:focus {
    border-color: #0056b3;
}

#result {
    margin-top: 20px;
    font-size: 1.2em;
    color: #007BFF;
}

ポイント：

すべての要素が中央に配置されるようにして、視認性と操作性を向上。
ボタンにはホバー時の配色変更など、インタラクティブな演出を追加しています。
#text 要素は初期状態で display: none; とし、開始時に表示するよう設定しています。

JavaScript部分の実装

JavaScriptでは、ゲームのロジック全般を実装します。
ここでは、開始ボタンのクリックイベント、タイピング入力の監視、正確性と速度の計算などを実現しています。

// app.js
document.addEventListener('DOMContentLoaded', function() {
    const startButton = document.getElementById('start-button');
    const textElement = document.getElementById('text');
    const typingArea = document.getElementById('typing-area');
    const resultElement = document.getElementById('result');

    let startTime, endTime, correctCount = 0;

    // ゲーム開始時の初期設定
    function startTest() {
        correctCount = 0;
        startTime = new Date().getTime();
        textElement.textContent = "日本語のタイピングテストは、あなたのタイピングスキルを測定するためのツールです。以下の文章を正確にタイピングしてください。";
        textElement.style.display = "block"; // テキストを表示
        typingArea.value = '';
        typingArea.focus();
    }

    // ゲーム終了時の処理
    function endTest() {
        endTime = new Date().getTime();
        const elapsedTime = (endTime - startTime) / 1000; // 秒単位
        const wordsPerMinute = (correctCount / elapsedTime) * 60;
        resultElement.textContent = `正解数: ${correctCount}, スピード: ${wordsPerMinute.toFixed(2)} 文字/分`;
    }

    // ユーザー入力の正確さをチェック
    function checkInput() {
        const targetText = textElement.textContent;
        const userText = typingArea.value;
        // 入力が完全に一致している場合、終了処理
        if (userText === targetText) {
            endTest();
        } else {
            correctCount = 0;
            // 入力文と正解文を先頭から順に比較
            for (let i = 0; i  B[タイピングテスト開始]
    B --> C[テキスト表示 & 入力エリアにフォーカス]
    C --> D[ユーザーが文字を入力]
    D --> E[入力内容を逐次チェック]
    E -- 完全一致 --> F[タイマー停止 / 結果計算]
    E -- 部分一致 --> D
    F --> G[結果表示]