実現したいこと
現在JSで単語当てゲームを制作中です。出てくるイラストの単語を当てるという
単純なゲームなのですが、単語を全て答え終わった時に終了の効果音とかかったタイムが
表示されるように設定したいです。
##エラーの内容
全単語回答すると、設定した効果音もタイムも表示されず、undefined.pngという
何もない画像が表示されてしまいゲームが終わりません。
意図通りにならず悩み中です。
##コード
JS
1'use strict'; 2 3{ 4 const question = document.getElementById('js-image'); 5 const answer = document.getElementById('js-answer'); 6 const showAnswer = document.getElementById('js-show-answer'); 7 const target = document.getElementById('js-target'); 8 const correctSound = document.getElementById('js-correct'); 9 const tipeSound = document.getElementById('js-tiping'); 10 const gameSetSound = document.getElementById('js-gameSet'); 11 12 const words = [ 13 '***','***','***','***','***'... 14 ] // 答えの単語 15 16 let word; 17 let solvedWords = []; //回答した単語を入れる配列 18 let startTime; 19 let isPlaying = false; 20 21 function setQuiz(){ 22 word = words.splice(Math.floor(Math.random()* words.length),1)[0]; 23 answer.textContent = word; 24 answer.style.display = 'none'; 25 target.value = ''; 26 const images = [ 27 'img/***.png', 28 'img/***.png', 29 'img/***.png', 30 'img/***.png', 31 'img/***.png',... 32 ]; //問題の画像 33 let img; 34 img = `img/${word}.png`; 35 question.src = img; 36 } 37 38 function matchWords() { 39 correctSound.currentTime = 0; 40 correctSound.play(); 41 solvedWords.push(word); //回答したらsolvedWordsにpush 42 } 43 44 document.addEventListener('click', ()=> { 45 if (isPlaying === true){ 46 return; 47 } 48 isPlaying = true; 49 startTime = Date.now(); 50 setQuiz(); 51 52 }); 53 54 target.addEventListener('input', () => { 55 56 if (target.value === word) { 57 matchWords(); 58 setQuiz(); 59 } 60 if (words.length === solvedWords.length) { 61 const elapsedTime = ((Date.now() - startTime) / 1000).toFixed(2); 62 const result = document.getElementById('js-result'); 63 result.textContent = `Fertig! ${elapsedTime} Sekunden!`; 64 gameSetSound.play(); 65 return; 66 }/*wordの配列とsolvedWordsの配列の中身が同数になったら終了の効果音と 67 タイムを表示したい。*/ 68 69 }); 70 71 showAnswer.addEventListener('click', () => { 72 answer.style.display = 'block'; 73 }); 74 75 76 } 77
HTML
1<!DOCTYPE html> 2<html lang="en"> 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 10 <body> 11 <img id="js-image"> 12 <p class="c-start__btn" id="js-answer">Start!</p> 13 <input class="c-form__input" id="js-target" type="text" autofocus> 14 <a class="c-btn__show-answer" id="js-show-answer"> 15 <p class="c-btn__show-answer_text">Answer</p></a> 16 <p id="js-result"></p> 17 18 <audio id="js-correct" src="../audio/correct.mp3"></audio> 19 <audio id="js-tipe" src="../audio/tipe.mp3"></audio> 20 <audio id="js-gameSet" src="../audio/gameSet.mp3"></audio> 21 <script src="js/main.js"></script> 22 </body> 23</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} 15
##試したこと
終了のタイミングは問題の単語数(words)と答えた単語数(solvedWords)が同数になった時とすればいいと思ったので、
solvedWordsを空配列で持っておいて、回答したwordをpushしていくことでsolvedWordsをカウントしています。(配列にwordが正常にpushされているのはConsoleで確認済みです。)
このあたりの考え方に穴があるとは思うのですが、どう直せばいいのかで悩んでいます。
アドバイスいただけると助かります!
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/10 03:43