クリックでスタート
☆CSS☆ *{ margin: 0; } header{ font-size: 40px; } body{ padding-top: 40px; font-family:'Courier New',monospace; text-align: center; } #target{ font-size: 48px; letter-spacing: .1em; } p{ padding-top: 30px; } section{ text-align: initial; padding-top: 20px; margin-left: 30%; } ☆JavaScript☆ 'use strict'; { function setWord() { word = words.splice(Math.floor(Math.random() * words.length), 1)[0];//wordsの中からランダム番目を選び、wordに代入して問題を作成している。また、splice()というメソッドで選ばれた問題を削除しながらwordにセットしている。 target.textContent = word; loc = 0;//新しい単語をセットしたら、再びlocを0にしたい為、ここで宣言 }//問題となる単語を用意するための関数 const words = [ 'red', 'blue', 'pink', ] let word //タイプしていく単語（問題の単語）を用意する変数、定数wordsの中から、ランダムでwordに代入されるように下記の式で定義 let loc = 0;//今何文字目を打っているかを管理する変数。0文字目から入力するため、0で初期化している。locationの略 let startTime; let isPlaying = false;//ゲームをプレイ中かどうかを管理する変数,最初はプレイ中ではないので初期値はfalseにしている。 const target = document.getElementById('target');//タイプされた文字の表示、getElementById()で要素の取得を行う。 document.addEventListener('click', () => { if (isPlaying === true) { return; }//trueはゲームが始まっている為、クリックでの処理は止めたいのでreturnとする。 isPlaying = true;//クリックするとゲームがスタートする為、trueにしている。 startTime = Date.now();//クリアまでの時間を表記、時間の取り方はストップウォッチと同じ setWord(); });//クリックするとゲームが始まるように設定 document.addEventListener('keydown', e => { if (e.key !== word[loc]) { return; }//打ったキーが間違っている場合の条件分岐、これ以降の処理をする必要が無いため、returnで値を返す。この式のように、メインとなる処理以外のケースを早めに除外し、メインとなる処理を分かりやすくする事を早期リターンと呼ぶ。 loc++;//正解すると打つべき文字は次の文字になる為locを+している。 target.textContent = '_'.repeat(loc) + word.substring(loc);//repeat()というメソッドとsubstring()というメソッドを使用。repeat()は''内の文字をlocの個数分繋げた文字列を作れる。substring()はloc番目以降の文字を取り出す。 if (loc === word.length) { if (words.length === 0) { const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2);//経過時間の計算、toFixed()というメソッドを使用し、小数点以下2桁までの表示をしている。 const result = document.getElementById('result'); result.textContent = `クリア時間は ${elapsedTime} 秒！`; return; }//wordsから単語が無くなった時の処理 setWord(); }//正解すると、次の問題に行く為の命令 })//タイプしたキーの値の取得、キーが押された時のkeydownのイベントを使用 }