JavaScript~ストップウォッチ完了~

最近、なかなか時間を作ることが難しくなってきました。

今日は、ようやくストップウォッチができたので、記事にします!!(作るまで長かった笑)

基本的な流れをまず記載して、その後、実際のコード、解説、調べたことの順に書いていきます。

1、全体的な流れとして
・ゲームスタートをクリックすると、ゲームが開始される。
・クリックされたら、クリックしたバーが消えて、問題、制限時間が表示される。
・キーを入力して、問題の文字とあっていれば、次の問題へ変更される。
・制限時間を迎えたら、強制的にゲーム終了。
・クリアした問題の数とタイプミスした回数を表示する。

です!

2、実際のコード

です!!

3、解説
♦︎まず、クリックしてから、文字を入力できるようにしたいので
20行目 btn.addEventListener(“click”, () => {
のなかに、
25行目 window.addEventListener(“keypress”, e => {
を入れています。

クリックボタンを入力したら、startGame(),startTimer()関数が呼び出されます。
一つずつ見て行くと
・startGame()の中身は、ランダムで問題を表示させたいので、random()関数を使ってランダムに表示できるようにしています。
calc()関数を使って、文字列を分解して、文字に変更して配列questionLetterArryに挿入しています。
・次にstarTimer()の中身は、
function startTimer() {
const now = Date.now();
stopwatch = Math.floor((timeLimit – now + clickTime) / 1000) % 60;
console.log(stopwatch);
timer.textContent = `残り ${stopwatch}秒`;
if (stopwatch === 0) {
timer.remove(); }
}
こうなっています。
まず、インスタンス化をして、変数stopwatchで秒を取得することと、10秒カウントダウンを作っています。
その後、if文でstopwatchが0になったとき、タイマーの表示を無くします。

♦︎ window.addEventListener(“keypress”, (e) => {省略}
のなかにあるif文はタイピングした時に、一回間違えるごとにカウントしたり、
逆に正解していれば、配列letterArryに入力した文字を挿入します。さらに表示するのに文字を連結して表示するために、join()を使っています。

♦︎setIntervalをキャンセルするために、addEventListenerを使いボタン機能に機能を追加し、さらに変数let intervalにsetIntervalを代入しています。

以上です。

もりけん塾
もりけん先生ブログ

コメント

タイトルとURLをコピーしました