クイズゲームのアプリケーション作成について「12」

クイズゲームのアプリケーションの作成について「12」

タイマーを画面表示していこう。

残り時間（timeLimitプロパティ）を問題画面に表示していきましょう。

赤字が追記、修正した箇所です。

quiz.js

setTimer(){ if(this.gameStatus.intervalkey !== null){ throw new Error(‘まだタイマーは動いています’); } this.gameStatus.timeLimit = 10; this.gameStatus.intervalkey = setInterval(() =>{ this.gameStatus.timeLimit–; console.log(`解答時間は残り${this.gameStatus.timeLimit}秒です`) this.renderTimeLimitStr(); }, 1000) }	まずsetTimerメソッドに、問題画面上に残り時間を更新するためrenderTimeLimitStrのコールを加えました。
displayQuestionView() { console.log(`選択中のレベル:${this.gameStatus.level}`); this.setTimer(); const stepKey = `step${this.gameStatus.step}`; const currentQuestion = this.quizData[this.gameStatus.level][stepKey]; const choiceStrs = []; for (const choice of currentQuestion.choices) { choiceStrs.push(`<label> <input type=”radio” name=”choice” value=”${choice}” /> ${choice} </label>`); } const html = ` <p>${currentQuestion.word}</p> <div> ${choiceStrs.join(”)} </div> <div class=”actions”> <button class=”nextBtn”>解答する</button> </div> <p class=”sec”>残り解答時間: ${this.gameStatus.timeLimit}秒</p> `; const parentElm = document.createElement(‘div’); parentElm.className = ‘question’; parentElm.innerHTML = html; const nextBtnElm = parentElm.querySelector(‘.nextBtn’); nextBtnElm.addEventListener(‘click’, () => { this.nextStep(); }); this.replaceView(parentElm); } // displayQuestionView	displayQuestionViewメソッドにのhtml変数に残り時間の表示個所を加えました。
renderTimeLimitStr(){ const secElm = this.rootElm.querySelector(‘.sec’); secElm.innerText = `残り解答時間:${this.gameStatus.timeLimit}秒`; }	renderTimeLimitStrメソッドを定義しています。ここれで「sec」というクラス属性を持った要素を取得し、残り時間を表示しています。この処理がsetTimerで仕掛けたsetIntervalから1秒ごとに呼ばれ、ページの残り時間を更新しています。

それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。

ターミナルから「http-server」コマンドを実行

そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。

この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。quizフォルダからQuizGame.htmlファイルを選択すると下記の画面が表示され、難易度を選択するとクイズが表示されます。

画面に「残り解答時間」が表示され、カウントダウンされていることが確認できると思います。

しかし、今のままでは下記の通り0秒からマイナスになってしまいます。

制限時間である10秒が経過したら次の問題に移動させる処理をしよう。

setTimer(){
if(this.gameStatus.intervalkey !== null){
throw new Error(‘まだタイマーは動いています’);
}
this.gameStatus.timeLimit = 10;
this.gameStatus.intervalkey = setInterval(() =>{
this.gameStatus.timeLimit–;
console.log(`解答時間は残り${this.gameStatus.timeLimit}秒です`)
if(this.gameStatus.timeLimit === 0){
this.nextStep();
}else {
this.renderTimeLimitStr();
}
}, 1000)
}

setTimerの処理をifで分岐しています。timeLimitプロパティが0になったときには制限時間がオーバーとみなしてnextStepメソッドで次の画面に移動し、そうでなければページ内の残り時間が更新されるようにします。

コンソールでも確認できるように、10秒が過ぎたらマイナス秒にならずに次の問題に移っていますね。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。