【JavaScriptコード解説】タイピングゲーム作成（3/3）

// タイピングゲームで使用する単語のリスト
const words = [
    'Hello', 'World', 'JavaScript', 'Programming', 'Computer',
    'Algorithm', 'Database', 'Network', 'Security', 'Framework'
];

/**
 * ランダムな単語を取得する関数
 * @returns {string} ランダムに選ばれた単語
 */
function getRandomWord() {
    // Math.random()で0以上1未満の乱数を生成し、
    // words.lengthを掛けて配列のインデックス範囲内の数値にする
    // Math.floor()で小数点以下を切り捨てて整数にする
    return words[Math.floor(Math.random() * words.length)];
}

/**
 * タイマークラス
 */
class Timer {
    /**
     * @param {number} duration - タイマーの継続時間（秒）
     * @param {function} onTick - 毎秒呼び出されるコールバック関数
     * @param {function} onComplete - タイマー終了時に呼び出されるコールバック関数
     */
    constructor(duration, onTick, onComplete) {
        this.duration = duration;
        this.remaining = duration;
        this.onTick = onTick;
        this.onComplete = onComplete;
        this.timerId = null;
    }

    /**
     * タイマーを開始する
     */
    start() {
        this.timerId = setInterval(() => {
            this.remaining--;
            this.onTick(this.remaining);
            if (this.remaining <= 0) {
                this.stop();
                this.onComplete();
            }
        }, 1000); // 1000ミリ秒 = 1秒ごとに実行
    }

    /**
     * タイマーを停止する
     */
    stop() {
        if (this.timerId) {
            clearInterval(this.timerId);
            this.timerId = null;
        }
    }

    /**
     * タイマーをリセットする
     */
    reset() {
        this.stop();
        this.remaining = this.duration;
    }
}

/**
 * UI操作を管理するオブジェクト
 */
const ui = {
    // HTML要素への参照
    wordElement: document.getElementById('word'),
    inputElement: document.getElementById('input'),
    timerElement: document.getElementById('timer'),
    scoreElement: document.getElementById('score'),
    startButton: document.getElementById('startButton'),

    /**
     * 単語を画面に表示する
     * @param {string} word - 表示する単語
     */
    displayWord(word) {
        this.wordElement.textContent = word;
    },

    /**
     * タイマーを更新する
     * @param {number} time - 残り時間
     */
    updateTimer(time) {
        this.timerElement.textContent = `残り時間: ${time}秒`;
    },

    /**
     * スコアを更新する
     * @param {number} score - 現在のスコア
     */
    updateScore(score) {
        this.scoreElement.textContent = `スコア: ${score}`;
    },

    /**
     * ゲームの状態に応じてUI要素を設定する
     * @param {boolean} isPlaying - ゲームがプレイ中かどうか
     */
    setGameState(isPlaying) {
        this.inputElement.disabled = !isPlaying;
        this.startButton.disabled = isPlaying;
        if (!isPlaying) {
            this.inputElement.value = '';
        }
    },

    /**
     * ゲーム結果を表示する
     * @param {number} score - 最終スコア
     */
    showResult(score) {
        alert(`ゲーム終了！あなたのスコアは ${score} です！`);
    }
};

/**
 * ゲームクラス
 */
class Game {
    constructor() {
        this.score = 0;
        this.currentWord = '';
        // 60秒のタイマーを作成
        this.timer = new Timer(60, this.updateTimer.bind(this), this.endGame.bind(this));
    }

    /**
     * ゲームを開始する
     */
    start() {
        this.score = 0;
        this.updateScore();
        this.nextWord();
        this.timer.start();
        ui.setGameState(true);
    }

    /**
     * 次の単語を設定する
     */
    nextWord() {
        this.currentWord = getRandomWord();
        ui.displayWord(this.currentWord);
    }

    /**
     * ユーザーの入力をチェックする
     * @param {string} input - ユーザーの入力
     * @returns {boolean} 入力が正しければtrue、そうでなければfalse
     */
    checkInput(input) {
        if (input === this.currentWord) {
            this.score++;
            this.updateScore();
            this.nextWord();
            return true;
        }
        return false;
    }

    /**
     * タイマーを更新する
     * @param {number} remaining - 残り時間
     */
    updateTimer(remaining) {
        ui.updateTimer(remaining);
    }

    /**
     * スコアを更新する
     */
    updateScore() {
        ui.updateScore(this.score);
    }

    /**
     * ゲームを終了する
     */
    endGame() {
        ui.setGameState(false);
        ui.showResult(this.score);
    }
}

// ゲームインスタンスを作成
const game = new Game();

// スタートボタンにクリックイベントリスナーを追加
ui.startButton.addEventListener('click', () => {
    game.start();
    ui.inputElement.focus(); // 入力フィールドにフォーカスを当てる
});

// 入力フィールドに入力イベントリスナーを追加
ui.inputElement.addEventListener('input', (e) => {
    const input = e.target.value;
    if (game.checkInput(input)) {
        e.target.value = ''; // 入力が正しければ入力フィールドをクリア
    }
});