[JavaScript]タイピングゲームのお題選択ボタンを作る

前提

JavaScript,HTML,CSSを使ってタイピングゲームを作っています
お題選択できるタイピングゲームにしたいです
文字数が多くなってしまうため、タイピング問題の量を減らしています

実現したいこと

ことわざ、都道府県、国のボタンを作る
選択されたお題でタイピングゲームが始まる

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

該当のソースコード

JavaScript
1const WORD_LIST_KOTOWAZA = ["aaiebakouiu", "auhawakarenohajime", "abunaihashiwowataru"];
2    const WORD_LIST_KOTOWAZA_JAPANESE = ["ああ言えばこう言う", "会うは別れの初め", "危ない橋を渡る"];  
3    let wordlist;
4    let wordlistJapanese;
5    var time_limit = 60;
6    var readytime = 3;
7    var score;
8    var correct;
9    var mistake;
10    var char_num = 0;
11    var word_char;
12    var random;
13    function ready1(){
14　　wordlist = WORD_LIST_KOTOWAZA;
15        wordlistJapanese = WORD_LIST_KOTOWAZA_JAPANESE;
16        readytime = 3;
17        scoredis.innerHTML = "";
18        start_button.style.visibility = "hidden";
19        var readytimer = setInterval(function(){
20            count.innerHTML = readytime;
21            readytime--;
22            if(readytime < 0){
23                clearInterval(readytimer);
24                gameStart();
25            }
26        },1000);
27    }
28    function gameStart(){
29        score = 0.0;
30        mistake = 0;
31        correct = 0;
32        wordDisplay();
33        var time_remaining = time_limit;
34        var gametimer = setInterval(function(){
35            count.innerHTML = "残り時間: " + time_remaining;
36            time_remaining--;
37            if(time_remaining <= 0){
38                clearInterval(gametimer);
39                finish();
40            }
41        },1000)
42    }
43    function wordDisplay(){
44        random = Math.floor(Math.random()*wordlist.length);
45        word.innerHTML = wordlist[random];
46        japanese.innerHTML = wordlistJapanese[random];
47        charInsort();
48    }
49    function charInsort(){
50        word_char = wordlist[random].charAt(char_num);
51    }
52    function finish(){
53        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
54        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
55        count.innerHTML = "";
56        word.innerHTML = "";
57        japanese.innerHTML = "";
58        start_button.style.visibility = "visible";
59        word_char = 0;
60        random = 0;
61        char_num = 0;
62    }
63document.onkeydown = function(e){
64    if(e.keyCode == 189){
65        keyStr = "-";
66    }
67    else if(e.keyCode == 188){
68        keyStr = ",";
69    }
70    else{
71        var keyStr = String.fromCharCode(e.keyCode);
72        keyStr = keyStr.toLowerCase();
73    }
74    if(keyStr == word_char){
75        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
76        char_num++;
77        correct++;
78        charInsort();
79    }
80    else{
81        new Audio('miss.mp3').play();
82        mistake++;
83    }
84    if(char_num == wordlist[random].length){
85        new Audio('correct.mp3').play();
86        char_num = 0;
87        wordDisplay();
88    }
89};

JavaScript
1const WORD_LIST_PREF = ["hokkaido", 
2                 "aomorikenn", "iwatekenn"];
3    const WORD_LIST_PREF_JAPANESE = ["北海道", 
4                         "青森県", "岩手県"];
5　let wordlist;
6    let wordlistJapanese;
7    var time_limit = 60;
8    var readytime = 3;
9    var score;
10    var correct;
11    var mistake;
12    var char_num = 0;
13    var word_char;
14    var random;
15    function ready3(){
16　　wordlist = WORD_LIST_PREF;
17        wordlistJapanese = WORD_LIST_PREF_JAPANESE;
18        readytime = 3;
19        scoredis.innerHTML = "";
20        start_button.style.visibility = "hidden";
21        var readytimer = setInterval(function(){
22            count.innerHTML = readytime;
23            readytime--;
24            if(readytime < 0){
25                clearInterval(readytimer);
26                gameStart();
27            }
28        },1000);
29    }
30    function gameStart(){
31        score = 0.0;
32        mistake = 0;
33        correct = 0;
34        wordDisplay();
35        var time_remaining = time_limit;
36        var gametimer = setInterval(function(){
37            count.innerHTML = "残り時間: " + time_remaining;
38            time_remaining--;
39            if(time_remaining <= 0){
40                clearInterval(gametimer);
41                finish();
42            }
43        },1000)
44    }
45    function wordDisplay(){
46        random = Math.floor(Math.random()*wordlist.length);
47        word.innerHTML = wordlist[random];
48        japanese.innerHTML = wordlistJapanese[random];
49        charInsort();
50    }
51    function charInsort(){
52        word_char = wordlist[random].charAt(char_num);
53    }
54    function finish(){
55        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
56        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
57        count.innerHTML = "";
58        word.innerHTML = "";
59        japanese.innerHTML = "";
60        start_button.style.visibility = "visible";
61        word_char = 0;
62        random = 0;
63        char_num = 0;
64    }
65document.onkeydown = function(e){
66    if(e.keyCode == 189){
67        keyStr = "-";
68    }
69    else if(e.keyCode == 188){
70        keyStr = ",";
71    }
72    else{
73        var keyStr = String.fromCharCode(e.keyCode);
74        keyStr = keyStr.toLowerCase();
75    }
76    if(keyStr == word_char){
77        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
78        char_num++;
79        correct++;
80        charInsort();
81    }
82    else{
83        new Audio('miss.mp3').play();
84        mistake++;
85    }
86    if(char_num == wordlist[random].length){
87        new Audio('correct.mp3').play();
88        char_num = 0;
89        wordDisplay();
90    }
91};

JavaScript
1const WORD_LIST_COUNTRY = ["afghanistan", "argentina", "australia"];
2    const WORD_LIST_COUNTRY_JAPANESE = ["アフガニスタン", "アルゼンチン", "オーストラリア"];
3　let wordlist;
4    let wordlistJapanese;
5    var time_limit = 60;
6    var readytime = 3;
7    var score;
8    var correct;
9    var mistake;
10    var char_num = 0;
11    var word_char;
12    var random;
13    function ready2(){
14　　wordlist = WORD_LIST_COUNTRY;
15        wordlistJapanese = WORD_LIST_COUNTRY_JAPANESE;
16        readytime = 3;
17        scoredis.innerHTML = "";
18        start_button.style.visibility = "hidden";
19        var readytimer = setInterval(function(){
20            count.innerHTML = readytime;
21            readytime--;
22            if(readytime < 0){
23                clearInterval(readytimer);
24                gameStart();
25            }
26        },1000);
27    }
28    function gameStart(){
29        score = 0.0;
30        mistake = 0;
31        correct = 0;
32        wordDisplay();
33        var time_remaining = time_limit;
34        var gametimer = setInterval(function(){
35            count.innerHTML = "残り時間: " + time_remaining;
36            time_remaining--;
37            if(time_remaining <= 0){
38                clearInterval(gametimer);
39                finish();
40            }
41        },1000)
42    }
43    function wordDisplay(){
44        random = Math.floor(Math.random()*wordlist.length);
45        word.innerHTML = wordlist[random];
46        japanese.innerHTML = wordlistJapanese[random];
47        charInsort();
48    }
49    function charInsort(){
50        word_char = wordlist[random].charAt(char_num);
51    }
52    function finish(){
53        score = Math.floor(Math.pow(correct, 2)*Math.pow((correct/(correct + mistake)), 5));
54        scoredis.innerHTML = "スコア: " + score + "<hr>正しいタイプ数: " + correct + "<br>誤ったタイプ数: " + mistake +"<br>正答率: " + (correct/(correct + mistake) * 100).toFixed(1) + "%";
55        count.innerHTML = "";
56        word.innerHTML = "";
57        japanese.innerHTML = "";
58        start_button.style.visibility = "visible";
59        word_char = 0;
60        random = 0;
61        char_num = 0;
62    }
63document.onkeydown = function(e){
64    if(e.keyCode == 189){
65        keyStr = "-";
66    }
67    else if(e.keyCode == 188){
68        keyStr = ",";
69    }
70    else{
71        var keyStr = String.fromCharCode(e.keyCode);
72        keyStr = keyStr.toLowerCase();
73    }
74    if(keyStr == word_char){
75        word.innerHTML = "<span style = 'color: red;'>" + wordlist[random].substr(0, char_num + 1) + "</span>" + wordlist[random].substr(char_num + 1, wordlist[random].length);
76        char_num++;
77        correct++;
78        charInsort();
79    }
80    else{
81        new Audio('miss.mp3').play();
82        mistake++;
83    }
84    if(char_num == wordlist[random].length){
85        new Audio('correct.mp3').play();
86        char_num = 0;
87        wordDisplay();
88    }
89};

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>タイピングゲーム</title>
5        <meta charset="utf-8">
6        <link rel="stylesheet" type="text/css" href="k22136.css" />
7        <script src="kotowaza-k22136.js"></script>
8        <script src="todofukenn-k22136.js"></script>
9        <script src="kuni-k22136.js"></script>
10    </head>
11        <body>
12            <div class="imgt">
13                <p class="title">TYPING GAME</p>
14            </div>
15            <div class="wrap1">
16                <input type="button" id="kotowaza_button" value="ことわざ" onclick="ready1()" style="text-align: center">
17                <input type="button" id="todofukenn_button" value="都道府県" onclick="ready2()" style="text-align: center">
18                <input type="button" id="kuni_button" value="国" onclick="ready3()" style="text-align: center">
19                <div id="count"></div>
20                <h1><div id="japanese"></div></h1>
21                <h2><div id="word"></div></h2>
22                <div id="scoredis"></div>
23            </div>
24        </body>
25</html>

試したこと

ネットでJavaScriptで複数のボタンを使う方法などを調べ、実行しましたがうまく動かなかったです

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

環境はOSで、VScodeを使っています

int32_t

2023/01/11 05:37

> 実行しましたがうまく動かなかったです。うまく動かないコードを開示して質問しましょう。お題選択とカウントダウンは別の問題ですので、別々の質問にしたほうが回答の負担が減ります。

yore

2023/01/11 14:18

ご指摘ありがとうございます。編集しましたので、お時間あれば教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

けっきょくのところ、変数 wordlist wordlistJapanese が目的のものに設定されれば後は何も変更する必要がないので、

ことわざ、都道府県、国の各問題を別のグローバル変数に入れておく。例:

js
1const WORD_LIST_KOTOWAZA = ["aaiebakouiu", ...
2const WORD_LIST_KOTOWAZA_JAPANESE = ["ああ言えばこう言う", ...
3const WORD_LIST_PREF = ["hokkaido",  ...
4const WORD_LIST_PREF_JAPANESE = ["北海道", ...
5const WORD_LIST_COUNTRY = ["afghanistan", ...
6const WORD_LIST_COUNTRY_JAPANESE = ["アフガニスタン", ...
7let wordlist;
8let wordlistJapanese;