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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

365閲覧

初めてのクイズゲーム、処理が遅いです。

pinpin

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2019/03/30 04:58

前提・実現したいこと

JavaScriptで初めてクイズゲームを作りました。
動いてはくれたのですが、動作が重くて(?)10問ほどで遅くなってしまいます。

実現したい挙動は
「配列からランダムに問題文を取り出して表示→回答→答えと回答が一致しているなら次の問題へ、していないならもう一度その問題→全問答えたらもう一度シャッフルして第一問から」
です。

クイズに答える度に関数 mondai() が2回実行されている(?)と思い、関数を一度だけ実行する方法を調べて試してみたのですが、上手くいきませんでした。

どうすれば速い処理ができるでしょうか?
加えて、その他の良くない点についても指摘していたただけると幸いです。

勉強を始めて数日の初学者故、見当違いな質問をしているかもしれませんが、どうかお力添えお願い致します。

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

エラーメッセージ

該当のソースコード

JavaScript

1 2<!DOCTYPE HTML> 3 4<html lang="japa"> 5<head> 6 <meta charset="utf-8"> 7 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 8 <title>練習</title> 9 <audio src="correct1.mp3" id="correct1"></audio> 10 <audio src="incorrect1.mp3" id="incorrect1"></audio> 11 <style> 12 body{ 13 background-color: #222; 14 } 15 16 #question{ 17 margin: 100px auto 70px; 18 background: green; 19 width: 600px; 20 height: 174px; 21 border-radius: 0 12px 12px 12px; 22 position: relative; 23 box-shadow: 1px 1px 2px 0px #3f1,-1px -1px 1px 0px #3f1, 0px 0px 500px 0px #3f1; 24 } 25 26 #question_number{ 27 color: #fff; 28 position: absolute; 29 background-color: green; 30 height: 45px; 31 width: 150px; 32 top: -45px; 33 border-radius: 12px 12px 0 0; 34 text-align: center; 35 font-size: 23px; 36 text-shadow: 0 0 50px #3f1, 0 0 30px #3f1; 37 box-shadow: 1px -1px 2px 0px #3f1, -1px -1px 2px 0px #3f1; 38 line-height: 45px; 39 vertical-align: middle; 40 } 41 42 #sentence{ 43 color: #fff; 44 position: absolute; 45 top: 50%; 46 left: 50%; 47 width: 540px; 48 transform: translate(-50%,-50%); 49 font-size: 17.2px; 50 text-align: center; 51 } 52 53 #answer{ 54 margin-left: 50%; 55 transform: translateX(-50%); 56 background: green; 57 width: 400px; 58 height: 80px; 59 box-shadow: 0px 0px 500px 0px #3f1; 60 line-height: 80px; 61 vertical-align: middle; 62 font-size: 18px; 63 text-align: center; 64 } 65 66 67 68 #button{ 69 margin: 20px auto; 70 background: linear-gradient(#6795fd 0%, #67ceff 100%); 71 border-bottom: solid 5px #5e7fca; 72 border-radius: 4px; 73 width: 180px; 74 height: 50px; 75 line-height: 50px; 76 vertical-align:middle; 77 text-align: center; 78 font-size: 26px; 79 cursor: pointer; 80 color: #222; 81 } 82 83 #button:active{ 84 transform: translateY(5px); 85 border-bottom: none; 86 } 87 88 #button:active + #attention{ 89 transform: translateY(5px); 90 } 91 92 #attention{ 93 color: #bbb; 94 font-size: 10px; 95 } 96 </style> 97</head> 98<body> 99 100 <div id="question"> 101 <div id="question_number"><span id="num"></span></div> 102 <div id="sentence"> 103 </div> 104 </div> 105 <input type="text" id="answer"> 106 <div id="button">OK</div> 107 108 <div id="attention">漢字は正しく入力してください。</div> 109 110 <script> 111 //問題文と答えの2次元配列↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 112 var que = [ 113 ["「天地創造」「最後の審判」の作者を答えよ。","ミケランジェロ",], 114 ["マキァヴェリの著作において、「君主論」の他に何があるか。","ローマ史論"], 115 ["「聖フランチェスコの生涯」の作者を答えよ。","ジョット"], 116 ["サンタ=マリア大聖堂を完成させた人物を答えよ。","ブルネレスキ"], 117 ["「太陽の都」の作者を答えよ。","カンパネラ"], 118 ["トマス=モアの代表作を答えよ。","ユートピア"], 119 ["「カンタベリ物語」の著者を答えよ。","チョーサー"], 120 ["チョーサーの代表作を答えよ。","カンタベリ物語"], 121 ["ドン・キホーテの作者が参加した戦争をなんというか。","レパントの海戦"], 122 ["西欧人にとっての伝説のキリスト教国を支配していたとされるのは誰か。","プレスター=ジョン"], 123 ["1498年カリカットに到達したポルトガル人を答えよ。","ヴァスコ=ダ=ガマ"], 124 ["ニューファンドランドを探検したイタリアの探検家を答えよ。","カボット"], 125 ["パナマ地峡を横断したスペインの探検家を答えよ。","バルボア"], 126 ["史上2番目に世界周航を達成した人物を答えよ","ドレーク"], 127 ["スペインのフィリピン経営の拠点としてマニラを建設した人物を答えよ。","レガスピ"], 128 ["大航海時代、スペイン領とポルトガル領を分けた条約を答えよ","トルデシリャス条約"], 129 ["トルデシリャス条約締結の一年前、教皇子午線を設置した人物を答えよ。","アレクサンデル6世"], 130 ["大航海時代、西欧諸国が主に用いた船舶の種類を答えよ。","ガレオン船"], 131 ["プランテーションはラテンアメリカでは何という名で普及したか。","アシエンダ制"], 132 ["新大陸の発見後に栄えたスペインの開港都市を答えよ。","セビリャ"], 133 ["宗教改革を引き起こした免罪符の発行をした人物を答えよ。","レオ10世"], 134 ["ルターの代表的著作を答えよ。","キリスト者の自由"], 135 ]; 136 //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 137 138 139 //シャッフルの関数↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 140 function shuffle(array) { 141 var n = array.length, t, i; 142 143 while (n) { 144 i = Math.floor(Math.random() * n--); 145 t = array[n]; 146 array[n] = array[i]; 147 array[i] = t; 148 } 149 150 return array; 151 } 152 //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 153 154 155 //メインの処理↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 156 $(function(){ 157 158 var count = 1; 159 var mondai = function(){ 160 if (count < que.length+1) { 161 162 console.log(count); 163 164 $("#answer").focus(); 165 $("#num").text(count); 166 $("#sentence").text(que[count-1][0]); 167 168 $("#answer").keypress(function(){ 169 var enter = event.keyCode; 170 if(enter === 13){ 171 var $a = $("#answer").val(); 172 $("#answer").val(""); 173 if ($a === que[count-1][1]) { 174 $("#correct1")[0].play(); 175 count += 1; 176 } 177 mondai(); 178 } 179 }); 180 181 $("#button").click(function(){ 182 var $a = $("#answer").val(); 183 $("#answer").val(""); 184 if ($a === que[count-1][1]) { 185 $("#correct1")[0].play(); 186 count += 1; 187 } 188 mondai(); 189 }); 190 191 } else { 192 location.reload(); 193 } 194 } 195 shuffle(que); 196 mondai(); 197 }); 198 199 //↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 200 </script> 201</body> 202</html> 203 204

試したこと

関数の位置を変えたり、$(document).ready(function){}で囲ってみたりしました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

何度も使う関数mondai内でクリックイベントなどイベントを登録しているからです。同じ要素にイベントが複数重ねて登録されることになり、処理が遅くなります。

毎回イベント解除するか、$("#answer").keypress(/*略*/); $("#button").click(/*略*/); を関数mondaiの外に置くようにしてみてください。

投稿2019/03/30 05:49

kei344

総合スコア69364

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

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

pinpin

2019/04/01 02:03

返信が遅れてしまい、申し訳ありません。 おかげ様で、解決致しました。 これほどまで単純明快に導いてくださり、感動すら覚えています。 ありがとうございました????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問