編集履歴

質問編集履歴

HTMLの16-43行目を変えました。文字数の関係で都道府県のjsは消しました。

2023/01/23 15:50

投稿

yore

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,9 +1,8 @@
 ### 前提
 JavaScript,HTML,CSSを使ってタイピングゲームを作っています
-お題セレクトボタンを作り、ゲームをスタートさせたいです
+お題セレクトボタンを作りゲームをスタートさせたいです
-文字数が多くなってしまうため、タイピング問題の量を減らしています
 ### 実現したいこと
-セレクトボタンでお題を選択したらゲームが始まるようにしたい
+セレクトボタンでゲームが始まるようにしたい
 ### 該当のソースコード
 ```HTML
@@ -22,12 +21,34 @@
                 <p class="title">TYPING GAME</p>
             </div>
             <div class="wrap1">
-                <select name="">
+                <select name="" id="odai" onchange="myfunc()">
-                    <option value="">お題</option>
+                    <option disabled selected>      </option>
-                    <option value="ことわざ" onclick="ready1()" style="text-align: center">ことわざ</option>
+                    <option value="ことわざ" style="text-align: center">ことわざ</option>
-                    <option value="国" onclick="ready2()" style="text-align: center">国</option>
+                    <option value="国" style="text-align: center">国</option>
-                    <option value="都道府県" onclick="ready3()" style="text-align: center">都道府県</option>
+                    <option value="都道府県" style="text-align: center">都道府県</option>
                 </select>
+                <script type="text/javascript">
+                    function myfunc() {
+                        var value = document.getElementById("odai").value;
+                        var target = document.getElementById("target");
+                        if(value === 'ことわざ'){
+                            var kotowaza = function ready1(){
+                            }
+                        }
+                        else if(value === '国'){
+                            var country = function ready2(){
+                            }
+                        }
+                        else if(value === '都道府県'){
+                            var pref = function ready3(){
+                            }
+                        }
+                    }
+                </script>
+                <p id="target"></p>
                 <div id="count"></div>
                 <h1><div id="japanese"></div></h1>
                 <h2><div id="word"></div></h2>
@@ -37,8 +58,8 @@
 </html>
 ```
 ```JavaScript
-const WORD_LIST_KOTOWAZA = ["aaiebakouiu", "auhawakarenohajime"];
+const KOTOWAZA = ["ai"];
-    const WORD_LIST_KOTOWAZA_JAPANESE = ["ああ言えばこう言う", "会うは別れの初め"];
+    const KOTOWAZA_JP = ["あい"];
     var wordlist;
     var wordlistJapanese;
     var time_limit = 60;
@@ -50,8 +71,8 @@
     var word_char;
     var random;
     function ready1(){
-        wordlist = WORD_LIST_KOTOWAZA;
+        wordlist = KOTOWAZA;
-        wordlistJapanese = WORD_LIST_KOTOWAZA_JAPANESE;
+        wordlistJapanese = KOTOWAZA_JP;
         readytime = 3;
         scoredis.innerHTML = "";
         kotowaza_button.style.visibility = "hidden";
@@ -128,8 +149,8 @@
 };
 ```
 ```JavaScript
-const WORD_LIST_COUNTRY = ["afghanistan", "argentina"];
+const COUNTRY = ["afu"];
-    const WORD_LIST_COUNTRY_JAPANESE = ["アフガニスタン", "アルゼンチン"];
+    const COUNTRY_JP = ["アフ"];
     var wordlist;
     var wordlistJapanese;
     var time_limit = 60;
@@ -141,8 +162,8 @@
     var word_char;
     var random;
     function ready2(){
-        wordlist = WORD_LIST_COUNTRY;
+        wordlist = COUNTRY;
-        wordlistJapanese = WORD_LIST_COUNTRY_JAPANESE;
+        wordlistJapanese = COUNTRY_JP;
         readytime = 3;
         scoredis.innerHTML = "";
         country_button.style.visibility = "hidden";
@@ -220,99 +241,9 @@
     }
 };
 ```
-```JavaScript
-const WORD_LIST_PREF = ["hokkaido", "aomorikenn"];
-    const WORD_LIST_PREF_JAPANESE = ["北海道", "青森県"];
-    var wordlist;
-    var wordlistJapanese;
-    var time_limit = 60;
-    var readytime = 3;
-    var score;
-    var correct;
-    var mistake;
-    var char_num = 0;
-    var word_char;
-    var random;
-    function ready3(){
-        wordlist = WORD_LIST_PREF;
-        wordlistJapanese = WORD_LIST_PREF_JAPANESE;
-        readytime = 3;
-        scoredis.innerHTML = "";
-        pref_button.style.visibility = "hidden";
-        var readytimer = setInterval(function(){
-            count.innerHTML = readytime;
-            readytime--;
-            if(readytime < 0){
-                clearInterval(readytimer);
-                gameStart();
-            }
-        },1000);
-    }
-    function gameStart(){
-        score = 0.0;
-        mistake = 0;
-        correct = 0;
-        wordDisplay();
-        var time_remaining = time_limit;
-        var gametimer = setInterval(function(){
-            count.innerHTML = "残り時間: " + time_remaining;
-            time_remaining--;
-            if(time_remaining <= 0){
-                clearInterval(gametimer);
-                finish();
-            }
-        },1000)
-    }
-    function wordDisplay(){
-        random = Math.floor(Math.random()*wordlist.length);
-        word.innerHTML = wordlist[random];
-        japanese.innerHTML = wordlistJapanese[random];
-        charInsort();
-    }
-    function charInsort(){
-        word_char = wordlist[random].charAt(char_num);
-    }
-    function finish(){
-        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
-        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
-        count.innerHTML = "";
-        word.innerHTML = "";
-        japanese.innerHTML = "";
-        start_button.style.visibility = "visible";
-        word_char = 0;
-        random = 0;
-        char_num = 0;
-    }
-document.onkeydown = function(e){
-    if(e.keyCode == 189){
-        keyStr = "-";
-    }
-    else if(e.keyCode == 188){
-        keyStr = ",";
-    }
-    else{
-        var keyStr = String.fromCharCode(e.keyCode);
-        keyStr = keyStr.toLowerCase();
-    }
-    if(keyStr == word_char){
-        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
-        char_num++;
-        correct++;
-        charInsort();
-    }
-    else{
-        new Audio('miss.mp3').play();
-        mistake++;
-    }
-    if(char_num == wordlist[random].length){
-        new Audio('correct.mp3').play();
-        char_num = 0;
-        wordDisplay();
-    }
-};
-```
 ### 試したこと
-HTMLのセレクトボタンを作る箇所でvalueの後にonclick="ready○()"のようにとんでほしい場所を書きましたが動きませんでした
+HTMLのセレクトボタンでchangeイベントをいれましたが動きません
 ### 補足情報（FW/ツールのバージョンなど）
-環境はOSで、VScodeを使っています
+環境OS、VScode

ゲーム開発 JavaScript HTML