Javascriptでタイピングゲームを作りたい

##実現したいプログラム
イラスト付きのタイピングゲームを制作中です。
イラストをヒントに単語をタイプしていってもらうようなプログラムが作りたいです。

##エラー・問題点
イラストと該当の単語をそれぞれオブジェクトにして、配列としてまとめて、
shuffleでランダムに出題されるようにしています。
１問目は問題なく意図通りに動くのですが、
２問目に問題が切り替わるとkeydownが作動しなくなります。

##現状のコード

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

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    <meta name="description" content="Typing game">
7    <title>Typing game</title>
8    <link rel="stylesheet" href="css/ress.css">
9    <link rel="stylesheet" href="css/style.css">
10  </head>
11  <body>
12    <img id="js-image">
13    <p id="js-target">Start!</p>
14    <p id="js-result"></p>
15    <footer class="l-footer">
16      <div class="l-footer__inner">
17        <p class="p-footer__copyright"><small>&copy; 2020 *** Allrights Reserved.</small></p>
18      </div>
19    </footer>
20    <script src="js/main.js"></script>
21  </body>
22</html>

css
1body {
2  padding-top: 40px;
3  font-family: 'Courier New', monospace;
4  text-align: center;
5}
6
7body p {
8  padding-bottom: 20px;
9}
10
11#js-target {
12  font-size: 48px;
13  letter-spacing: .1em;
14}

##試したこと
quizSetのtのキーに格納されている単語を取り出して、keydownのイベントで
タイピングの正誤判定をすればいいと思うのですが、word[loc]の記述がおかしいのでは
ないかというところまでは目星を付けたのですが、どう書き換えれば作動するかが分かりません。
アドバイスいただけますと、非常に助かります。

m.ts10806

2020/11/28 06:45

HTML、CSSも提示してください。

AyaWeb4

2020/11/28 07:23

失礼いたしました。追加いたしましたので、お時間ございましたらご覧ください。

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

回答1件

自己解決

自己解決できました。連想配列をやめて単語とイラストでそれぞれ配列にしました。
単語の方をランダムで取り出して表示し、でた単語に合わせてイラストを表示するというように書き換えてみた所、タイピングしながら、イラストと単語の切り替えが上手くいきました。
やり方は邪道かもしれませんが、とりあえずこれで進めてみます。

お騒がせいたしました。

投稿2020/11/29 05:48

AyaWeb4

総合スコア4