質問編集履歴

アドバイスいただいたように書き直しました。

2023/01/13 00:33

投稿

yore

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -191,7 +191,8 @@
     }
 };
 ```
+```JavaScript
-`const WORD_LIST_COUNTRY = ["afghanistan", "argentina", "australia"];
+const WORD_LIST_COUNTRY = ["afghanistan", "argentina", "australia"];
     const WORD_LIST_COUNTRY_JAPANESE = ["アフガニスタン", "アルゼンチン", "オーストラリア"];
 　let wordlist;
     let wordlistJapanese;

ゲーム開発 JavaScript HTML

アドバイス通り書き直しました。

2023/01/13 00:31

投稿

yore

スコア2

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -8,8 +8,10 @@
 ### 発生している問題・エラーメッセージ
 ### 該当のソースコード
 ```JavaScript
-var wordlist = ["aaiebakouiu", "auhawakarenohajime", "abunaihashiwowataru"];
+const WORD_LIST_KOTOWAZA = ["aaiebakouiu", "auhawakarenohajime", "abunaihashiwowataru"];
-    var wordlistJapanese = ["ああ言えばこう言う", "会うは別れの初め", "危ない橋を渡る"];
+    const WORD_LIST_KOTOWAZA_JAPANESE = ["ああ言えばこう言う", "会うは別れの初め", "危ない橋を渡る"];
+    let wordlist;
+    let wordlistJapanese;
     var time_limit = 60;
     var readytime = 3;
     var score;
@@ -19,6 +21,8 @@
     var word_char;
     var random;
     function ready1(){
+　　wordlist = WORD_LIST_KOTOWAZA;
+        wordlistJapanese = WORD_LIST_KOTOWAZA_JAPANESE;
         readytime = 3;
         scoredis.innerHTML = "";
         start_button.style.visibility = "hidden";
@@ -95,10 +99,12 @@
 };
 ```
 ```JavaScript
-var wordlist = ["hokkaido",
+const WORD_LIST_PREF = ["hokkaido",
                  "aomorikenn", "iwatekenn"];
-    var wordJapanese = ["北海道",
+    const WORD_LIST_PREF_JAPANESE = ["北海道",
                          "青森県", "岩手県"];
+　let wordlist;
+    let wordlistJapanese;
     var time_limit = 60;
     var readytime = 3;
     var score;
@@ -108,6 +114,8 @@
     var word_char;
     var random;
     function ready3(){
+　　wordlist = WORD_LIST_PREF;
+        wordlistJapanese = WORD_LIST_PREF_JAPANESE;
         readytime = 3;
         scoredis.innerHTML = "";
         start_button.style.visibility = "hidden";
@@ -183,9 +191,10 @@
     }
 };
 ```
-```JavaScript
-var wordlist = ["afghanistan", "argentina", "australia"];
+`const WORD_LIST_COUNTRY = ["afghanistan", "argentina", "australia"];
-    var wordlistJapanese = ["アフガニスタン", "アルゼンチン", "オーストラリア"];
+    const WORD_LIST_COUNTRY_JAPANESE = ["アフガニスタン", "アルゼンチン", "オーストラリア"];
+　let wordlist;
+    let wordlistJapanese;
     var time_limit = 60;
     var readytime = 3;
     var score;
@@ -195,6 +204,8 @@
     var word_char;
     var random;
     function ready2(){
+　　wordlist = WORD_LIST_COUNTRY;
+        wordlistJapanese = WORD_LIST_COUNTRY_JAPANESE;
         readytime = 3;
         scoredis.innerHTML = "";
         start_button.style.visibility = "hidden";

ゲーム開発 JavaScript HTML

試したソースコードに変更しました。ご指摘ありがとうございます。

2023/01/11 14:16

投稿

yore

スコア2

test CHANGED Viewed

	@@ -1 +1 @@
1	- [JavaScript]タイピングゲームの~~レベル~~選択ボタンを作る
1	+ [JavaScript]タイピングゲームのお題選択ボタンを作る

test CHANGED Viewed

@@ -1,110 +1,15 @@
 ### 前提
-JavaScript,HTML,CSSを使ってタイピングゲームを作っています。
+JavaScript,HTML,CSSを使ってタイピングゲームを作っています
-今のままでは面白みがないため、お題選択ができるものにしたいです。
-※今はことわざのタイピングゲームができています。
+お題選択できるタイピングゲームにしたいです
+文字数が多くなってしまうため、タイピング問題の量を減らしています
 ### 実現したいこと
-・ことわざ、都道府県、国のボタンを作る
+ことわざ、都道府県、国のボタンを作る
-・選択されたお題でタイピングゲームが始まる
+選択されたお題でタイピングゲームが始まる
-・お題選択ボタン→スタートボタンで3,2,1のカウントダウン→問題表示
 ### 発生している問題・エラーメッセージ
 ### 該当のソースコード
 ```JavaScript
-var wordlist = ["aaiebakouiu", "auhawakarenohajime", "abunaihashiwowataru",
+var wordlist = ["aaiebakouiu", "auhawakarenohajime", "abunaihashiwowataru"];
-                "ishinouenimosannen", "isogabamaware", "inumoarukebabouniataru",
-                "ujiyorisodachi", "usotukihadorobounohajimari", "undeinosa",
-                "ebidetaiwoturu", "ennkoutukiwotoru", "ennnoshitanochikaramochi",
-                "oninikanabou", "oninomenimonamida", "oyanokokorokoshirazu",
-                "kaerunokohakaeru", "gakumonnnioudounashi", "kawaiikonihatabiwosaseyo",
-                "kinouhahitonomikyouhawagami", "gyuujiwotoru", "gyofunori",
-                "kusaimononifutawosuru", "kusurimosugirebadokutonaru", "kumonokowochirasu",
-                "keigunnnoikkaku", "keitarigatakuteinarigatashi", "keganokoumyou",
-                "koukaisakinitatazu", "gojyuppohyappo", "korobanusakinotue",
-                "sakehahyakuyakunocyou", "sarumokikaraochiru", "sarumonohaowazu",
-                "shishinokootoshi", "shininnnikuchinashi", "shiranugahotoke",
-                "suigyonomajiwari", "suimoamaimokamiwaketa", "suzumenonamida",
-                "seitennnohekireki", "seniharahakaerarenu", "zennhaisoge",
-                "soukainoichizoku", "soukanoinu", "sojyounouo",
-                "daihasyouwokaneru", "tadayoritakaimonohanai", "tabihamichidure",
-                "chigyonowazawai", "chiwochidearau", "chirimotumorebayamatonaru",
-                "tukitosupponn", "tumenihiwotomosu", "turunohitokoe",
-                "deicyuunohachisu", "tekihahonnnoujiniari", "tennnitubasuru",
-                "toshiyorinohiyamizu", "tobutoriwootosu", "donngurinoseikurabe",
-                "naisodehafurenai", "nagaimononihamakarero", "namekujinishio",
-                "nikaikaramegusuri", "nogashitasakanahaookii", "nidoarukotohasanndoaru",
-                "nukanikugi", "nusuttonioisenn", "nuretedeawa",
-                "nekonikobann", "nekonotemokaritai", "nekowokaburu",
-                "noucyuunokiri", "nokorimononihafukugaaru", "norennniudeoshi",
-                "haisuinojinn", "hanayoridanngo", "haramominouchi",
-                "higenochiriwoharau", "hinonaitokoronikemurihatatanu", "hyakubunnhaikkennnishikazu",
-                "fuuzennnotomoshibi", "fuefukedomoodorazu", "butanishinnjyu",
-                "hesogachawowakasu", "hetanoyokozuki", "bennkeinonakidokoro",
-                "bouzunikukeryakesamadenikui", "hotoketukuttetamashiiirezu", "hotokenokaomosanndo",
-                "magonimoisyou", "mayugewoyomareru", "mayunihigatuku",
-                "mikaradetasabi", "mizutoabura", "misowotukeru",
-                "muikanosyoubu", "musumehitorinimukohachininn", "muneniichimotu",
-                "mekarahanahenukeru", "menihamehanihaha", "mehakuchihodonimonowoiu",
-                "moubosannsennnooshie", "mochihamochiya", "motonomokuami",
-                "yanaginiyukiorenashi", "yabukarabou", "yamiyonoteppou",
-                "yukitosumi", "yukinishirasagi", "yudanntaiteki",
-                "yokunimegakuramu", "yowarimenitatarime",
-                "rakuhakunotanekuharakunotane", "rakuyounoshikawotakamu",
-                "ryoujyounokunnshi", "ryoutenihana", "ryouyakuhakuchininigashi",
-                "ruihatomowoyobu",
-                "reiniyottereinogotoshi",
-                "roudann", "rouwoetesyokuwonozomu", "ronngoyominoronngoshirazu",
-                "watarinifune", "watarusekennnionihanai", "waraukadonihafukukitaru"];
-    var wordlistJapanese = ["ああ言えばこう言う", "会うは別れの初め", "危ない橋を渡る",
+    var wordlistJapanese = ["ああ言えばこう言う", "会うは別れの初め", "危ない橋を渡る"];
-                            "石の上にも三年", "急がば回れ", "犬も歩けば棒に当たる",
-                            "氏より育ち", "嘘つきは泥棒の始まり", "雲泥の差",
-                            "蝦で鯛を釣る", "猿猴月を取る", "縁の下の力持ち",
-                            "鬼に金棒", "鬼の目にも涙", "親の心子知らず",
-                            "蛙の子は蛙", "学問に王道なし", "可愛い子には旅をさせよ",
-                            "昨日は人の身今日は我が身", "牛耳を執る", "漁夫の利",
-                            "臭いものに蓋をする", "薬も過ぎれば毒となる", "蜘蛛の子を散らす",
-                            "鶏群の一鶴", "兄たり難く弟たり難し", "怪我の功名",
-                            "後悔先に立たず", "五十歩百歩", "転ばぬ先の杖",
-                            "酒は百薬の長", "猿も木から落ちる", "去る者は追わず",
-                            "獅子の子落とし", "死人に口なし", "知らぬが仏",
-                            "水魚の交わり", "酸いも甘いも嚙み分けた", "雀の涙",
-                            "青天の霹靂", "背に腹はかえられぬ", "善は急げ",
-                            "滄海の一粟", "喪家の狗", "俎上の魚",
-                            "大は小を兼ねる", "ただより高い物はない", "旅は道連れ世は情け",
-                            "稚魚の災い", "血を血で洗う", "塵も積もれば山となる",
-                            "月と鼈", "爪に火を灯す", "鶴の一声",
-                            "泥中の蓮", "敵は本能寺に在り", "天に唾する",
-                            "年寄りの冷や水", "飛ぶ鳥を落とす", "どんぐりの背比べ",
-                            "無い袖は振れない", "長い物には巻かれろ", "蛞蝓に塩",
-                            "二階から目薬", "逃がした魚は大きい", "二度あることは三度ある",
-                            "糠に釘", "盗人に追い釘", "濡れ手で粟",
-                            "猫に小判", "猫の手も借りたい", "猫を被る",
-                            "嚢中の錐", "残り物には福がある", "暖簾に腕押し",
-                            "背水の陣", "花より団子", "腹も身の内",
-                            "髭の塵を払う", "火のないところに煙は立たぬ", "百聞は一見に如かず",
-                            "風前の灯", "笛吹けども踊らず", "豚に真珠",
-                            "臍が茶を沸かす", "下手の横好き", "弁慶の泣き所",
-                            "坊主憎けりゃ袈裟まで憎い", "仏作って魂入れず", "仏の顔も三度",
-                            "馬子にも衣装", "眉毛を読まれる", "眉に火が付く",
-                            "身から出た錆", "水と油", "味噌を付ける",
-                            "六日の菖蒲", "娘一人に婿八人", "胸に一物",
-                            "目から鼻へ抜ける", "目には目歯には歯", "目は口ほどに物を言う",
-                            "孟母三遷の教え", "餅は餅屋", "元の木阿弥",
-                            "柳に雪折れなし", "藪から棒", "闇夜の鉄砲",
-                            "雪と墨", "雪に白鷺", "油断大敵",
-                            "欲に目が眩む", "弱り目に祟り目",
-                            "楽は苦の種苦は楽の種", "洛陽の紙価を高む",
-                            "梁上の君子", "両手に花", "良薬は口に苦し",
-                            "類は友を呼ぶ",
-                            "例によって例の如し",
-                            "壟断", "隴を得て蜀を望む", "論語読みの論語知らず",
-                            "渡りに船", "渡る世間に鬼はない", "笑う門には福来たる"];
     var time_limit = 60;
     var readytime = 3;
     var score;
@@ -189,6 +94,182 @@
     }
 };
 ```
+```JavaScript
+var wordlist = ["hokkaido",
+                 "aomorikenn", "iwatekenn"];
+    var wordJapanese = ["北海道",
+                         "青森県", "岩手県"];
+    var time_limit = 60;
+    var readytime = 3;
+    var score;
+    var correct;
+    var mistake;
+    var char_num = 0;
+    var word_char;
+    var random;
+    function ready3(){
+        readytime = 3;
+        scoredis.innerHTML = "";
+        start_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();
+    }
+};
+```
+```JavaScript
+var wordlist = ["afghanistan", "argentina", "australia"];
+    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 ready2(){
+        readytime = 3;
+        scoredis.innerHTML = "";
+        start_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
 <!DOCTYPE html>
 <html>
@@ -196,15 +277,18 @@
         <title>タイピングゲーム</title>
         <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="k22136.css" />
+        <script src="kotowaza-k22136.js"></script>
+        <script src="todofukenn-k22136.js"></script>
-        <script src="kadai60-k22136.js"></script>
+        <script src="kuni-k22136.js"></script>
     </head>
         <body>
             <div class="imgt">
                 <p class="title">TYPING GAME</p>
-                <p>〜ことわざ〜</p>
             </div>
             <div class="wrap1">
-                <input type="button" id="start_button" value="スタート" onclick="ready1()" style="text-align: center">
+                <input type="button" id="kotowaza_button" value="ことわざ" onclick="ready1()" style="text-align: center">
+                <input type="button" id="todofukenn_button" value="都道府県" onclick="ready2()" style="text-align: center">
+                <input type="button" id="kuni_button" value="国" onclick="ready3()" style="text-align: center">
                 <div id="count"></div>
                 <h1><div id="japanese"></div></h1>
                 <h2><div id="word"></div></h2>
@@ -213,12 +297,7 @@
         </body>
 </html>
 ```
 ### 試したこと
-ネットでJavaScriptで複数のボタンを使う方法などを調べ、実行しましたがうまく動かなかったです。
+ネットでJavaScriptで複数のボタンを使う方法などを調べ、実行しましたがうまく動かなかったです
 ### 補足情報（FW/ツールのバージョンなど）
-環境はOSで、VScodeを使っています。
+環境はOSで、VScodeを使っています

ゲーム開発 JavaScript HTML