質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

1回答

790閲覧

Javascriptで単語ゲームを制作しているがゲームが意図通りに終了しない

AyaWeb4

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2020/12/10 02:51

実現したいこと

現在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で確認済みです。)
このあたりの考え方に穴があるとは思うのですが、どう直せばいいのかで悩んでいます。
アドバイスいただけると助かります!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

splice()は破壊的なので、setQuiz()が呼び出されるたびにwords.lengthが減ることが原因ではないですか?
最初に、words.lengthを別の変数に退避してはどうでしょうか。

投稿2020/12/10 03:24

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AyaWeb4

2020/12/10 03:43

早速の回答ありがとうございます。 おっしゃる通り、最初にwords.lengthを別の変数に逃して、 その変数とsolvedWordsの数を比べたところ問題終了と同時に設定が 作動するようになりました! spliceの挙動が完全に盲点でした。 的確なアドバイス本当にありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問