独り言

プログラミングの講師をしています。新人研修で扱う技術の解説と個人の技術メモ、技術書の紹介など

【JavaScript】タイピングゲーム1

JavaScript

JavaScriptで作成した簡単なタイピングゲームです。
ドットインストールで紹介されていたJavaScriptでのタイピングゲームの動画を参考にアレンジを加えたものです。
JvaScriptの学習、ゲームの作成の参考に。
もう少し改良したいのでバージョンアップしたら別記事でアップします。

<!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 {
            text-align: center;
        }
        #target {
            font-size: 48px;
        }
        #start-btn {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>タイピングゲーム</h1>
    <p><button type="button" id="start-btn" name="start-btn">スタート<br>(Enter)</button></p>
    <p id="target"></p>
    <p id="count"></p>
    <script>
        'use strict';

        let words = [];
        let count = 0; // 完了した文字数
        let word = ''  // 現在入力中の文字
        let index = 0; // 文字の現在地
        let missCount = 0;
        const target = document.getElementById('target');
        let startTime = 0;

        // ゲームスタート時の処理
        var gameStart = () => {
            words = ['red', 'blue', 'green', 'yellow', 'pink', 'black', 'white', 'purple', 'gray', 'orange'];
            count = words.length;
            missCount = 0;
            document.getElementById('count').textContent = `残り ${count} つ`;
            startTime = new Date();
            word = words.splice(Math.floor(Math.random() * words.length), 1).join();
            target.textContent = word;
        };

        // ボタン押下時
        document.getElementById('start-btn').addEventListener('click', gameStart, false);

        // キー押下時
        document.addEventListener('keydown', e => {
            // Enter押下時はスタート
            if(e.key === 'Enter') {
                gameStart();
                return;
            }

            if(word.charAt(index) === e.key)  {
                index++;
                target.textContent = '_'.repeat(index) + word.substring(index);

                if(index === word.length) {
                    // 1単語終了時
                    index = 0;
                    count--;
                    document.getElementById('count').textContent = `残り ${count} `;

                    if(count === 0) {
                        // ゲーム終了時
                        const clearTime = new Date() - startTime;
                        target.textContent = (clearTime / 1000).toFixed(2) + '秒';
                        document.getElementById('count').textContent = `タイプミス ${missCount}個`;                       
                    } else {
                        word = words.splice(Math.floor(Math.random() * words.length), 1).join();
                        target.textContent = word;
                    }
                }
            } else {
                missCount++;
            }  

        });

    </script>
</body>
</html>