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

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

新規登録して質問してみよう
ただいま回答率
85.50%
オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

JavaScript

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

配列

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

Q&A

解決済

1回答

1782閲覧

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

AyaWeb4

総合スコア4

オブジェクト

オブジェクト指向において、データとメソッドの集合をオブジェクト(Object)と呼びます。

JavaScript

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

配列

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

0グッド

0クリップ

投稿2020/11/28 04:21

編集2020/11/28 07:22

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

##エラー・問題点
イラストと該当の単語をそれぞれオブジェクトにして、配列としてまとめて、
shuffleでランダムに出題されるようにしています。
1問目は問題なく意図通りに動くのですが、
2問目に問題が切り替わると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]の記述がおかしいのでは
ないかというところまでは目星を付けたのですが、どう書き換えれば作動するかが分かりません。
アドバイスいただけますと、非常に助かります。

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

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

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

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

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

m.ts10806

2020/11/28 06:45

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

2020/11/28 07:23

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

回答1

0

自己解決

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

お騒がせいたしました。

投稿2020/11/29 05:48

AyaWeb4

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問