画像付きの単語ゲームを作りたい

前提・実現したいこと

画像をヒントにして単語をタイピングしていくゲームを制作中です。
タイピングの正誤判定をして正しければ、次の問題に進むという形でゲームを
構成したいです。

発生している問題・エラーメッセージ

セットの画像と単語をオブジェクトに入れて定数quizSetとし、それぞれの要素を
HTMLから取得して画像と単語をJavascriptで表示し、
スタートボタンを押すと、問題（1問目）がランダムに表示され、
文字を正しくタイピングすると表示された文字が消えていくところまでは出来ました。
しかし、正解後に次の問題（２問目）に進まず、１問目がループしてしまいます。

該当のソースコード

JS
1'use strict';
2
3{
4  const question = document.getElementById('js-image');
5  const target = document.getElementById('js-target');
6  const quizSet = shuffle([
7    {q: '../img/＊＊＊.png', t:'＊＊＊'}, //q:画像、t:単語
8    {q: '../img/＊＊＊.png', t:'＊＊＊'},
9    {q: '../img/＊＊＊.png', t:'＊＊＊'},
10    {q: '../img/＊＊＊.png', t:'＊＊＊'},
11    {q: '../img/＊＊＊.png', t:'＊＊＊'},
12    {q: '../img/＊＊＊.png', t:'＊＊＊'},
13  ]);
14
15    let currentNum = 0;
16    let loc = 0;
17    let isPlaying = false;
18    let word = quizSet[currentNum].t;
19    let image =  quizSet[currentNum].q;
20
21    function shuffle(arr) {
22      for (let i = arr.length - 1; i > 0; i--) {
23        const j = Math.floor(Math.random() * (i + 1));
24        [arr[j], arr[i]] = [arr[i], arr[j]];
25      }
26      return arr;
27    }
28    
29    function setQuiz(){
30
31    question.src = image;
32    target.textContent = word;
33    loc = 0;
34
35    }
36
37    document.addEventListener('click', ()=> {
38    if (isPlaying === true){
39      return;
40    }
41
42    isPlaying = true;
43    setQuiz();
44  });
45
46   document.addEventListener('keydown', e => {
47     if (e.key !== word[loc]) {
48       return;
49     }
50
51     loc++;
52     target.textContent = ''.repeat(loc) + word.substring(loc);
53
54    if (loc === word.length){
55      currentNum++;
56      setQuiz();
57      }
58   });
59 }

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/ress.css">
7    <link rel="stylesheet" href="css/style.css">
8  </head>
9  <body>
10
11　　<img id="js-image">
12    <p id="js-target">Click to Start!</p>
13    <p id="js-result"></p>
14  
15    <script src="js/main.js"></script>
16  </body>
17</html>

試したこと

タイピングの文字(loc)が最後まで正しく打てれば（word.length）
配列[currentNum]を一つずつ増やしてsetQuiz()関数を呼べばいいのかなーと
思っていたのですが…色々自分でも調べてみたけど原因が分かりませんでした。
アドバイスいただければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

let word = quizSet[currentNum].t;
let image =  quizSet[currentNum].q;

currentNumを変えてもwordとimageは更新されないので、loc = 0;のようにsetQuiz()の中で代入しなおすなどしてあげてください。

投稿2020/11/26 14:57

gasbombe

総合スコア204

AyaWeb4

2020/11/26 23:31

アドバイスありがとうございます。currentNumは無意味だったのですね。私自身まだ理解できておらず大変申し訳ないのですが、今、定義した　　let word = quizSet[currentNum].t; 　　let image = quizSet[currentNum].q; 変数にsetQuiz()の中でword=0;, image=0;と再代入してみたのですが、次はキーダウンが反応しなくなりました。「代入し直す」という解釈を間違えていますでしょうか。

gasbombe

2020/11/27 13:13

すいません、ちょっと書き方が悪かったですね。 setQuiz()の中で、 question.src = image; target.textContent = word; となっている部分を question.src = quizSet[currentNum].t; target.textContent = quizSet[currentNum].q; と書き換えてみてください。 image、wordという変数の値が更新されないため1問目が繰り返されていたと思いますが、 currentNumは更新されているので、currentNumを使って画像と単語を更新してやれば動くんじゃないかと思います。

AyaWeb4

2020/11/27 14:20

何度もありがとうございます！おかげさまで、１問目タイピング後に２問目に画像と文字が更新されました！ただ２問目になるとkeydownが反応しなくなるという新たな問題が出てきたのですが、本投稿の問題は解決いたしましたので、解決済みにしておきます。ご丁寧にご説明くださり、本当にありがとうございました。

行動規範の内容に同意します