javascriptで簡単なビンゴゲームを作ってみる

先日、小３の長女から五十音のビンゴゲームを作って欲しいと要望があったので、簡単なWEBアプリを作ってみました。

何か嫌な予感は感じていたのですが、WEBアプリを作るのは久々なので個人的には少し楽しみでもあり、なぜ五十音のビンゴが必要なのか子供に深く追求する事はしませんでした。

アプリは半日ほどで完成しましたが、案の定子供に完成したよと伝えた所、見るまでもなく「やっぱりいらない」とのコメントを頂きました。

ということで、せっかく半日もかけて作ったWEBアプリですので、ここで公開しようかと思います。

出来栄は所詮素人が作ったものなのでしょぼいですが、一応五十音ビンゴアプリにはなっています。

1 プログラム
- 1.1 HTML/CSS
- 1.2 javascript
2 完成

プログラム

HTML/CSS

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oogiri_site</title>
<link rel="stylesheet" href="style.css">
</head>
    
<body>
    
<header>
    <logo>
    <h1>五十音BINGO</h1>
    
    </logo>
        
</header>


<main>
    <div class="gojyu">
    <div id="yomi" class="a">始</div>
    
    </div>
    <div id="start">
    start
    </div>
    
    <div class="pass">
        <div class="p1">
    <div id="0" class="ab"></div>
        <div id="1" class="ab"></div>
        <div id="2" class="ab"></div>
        <div id="3" class="ab"></div>
        <div id="4" class="ab"></div>
        <div id="5" class="ab"></div>
        <div id="6" class="ab"></div>
        <div id="7" class="ab"></div>
        <div id="8" class="ab"></div>
        <div id="9" class="ab"></div>
        <div id="10" class="ab"></div>
        <div id="11" class="ab"></div>
        <div id="12" class="ab"></div>
        <div id="13" class="ab"></div>
        <div id="14" class="ab"></div>
        <div id="15" class="ab"></div>
        <div id="16" class="ab"></div>
        <div id="17" class="ab"></div>
        <div id="18" class="ab"></div>
        <div id="19" class="ab"></div>
            </div>
        <div class="p2">
        <div id="20" class="ab"></div>
        <div id="21" class="ab"></div>
        <div id="22" class="ab"></div>
        <div id="23" class="ab"></div>
        <div id="24" class="ab"></div>
        <div id="25" class="ab"></div>
        <div id="26" class="ab"></div>
        <div id="27" class="ab"></div>
        <div id="28" class="ab"></div>
        <div id="29" class="ab"></div>
        <div id="30" class="ab"></div>
        <div id="31" class="ab"></div>
        <div id="32" class="ab"></div>
        <div id="33" class="ab"></div>
        <div id="34" class="ab"></div>
        <div id="35" class="ab"></div>
        <div id="36" class="ab"></div>
        <div id="37" class="ab"></div>
        <div id="38" class="ab"></div>
        <div id="39" class="ab"></div>
        <div id="40" class="ab"></div>
        
        </div>
        
    
    
    </div>
</main>

    
<footer>
    <h3>footer</h3>
</footer>
<script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>oogiri_site</title>

</head>

<body>

<logo>

<h1>五十音BINGO</h1>

</logo>

</header>

<main>

</div>

start

</div>

</div>

</div>

</main>

<h3>footer</h3>

</footer>

</body>

</html>

html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width; 100%;
}
body {
    max-width: 1500px;
    margin: 0;
    padding: 0;
    background: white;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    -webkit-text-size-adjust: 100%;
    height: 100vh;
    width; 100%;
}

h1, h2, h3, p, ul {
    margin: 0;
    padding: 0;
}
header {
    background: #3cb371;
    padding: 10px;
    text-align: center;
}


.gojyu {
    height: 60vh;
    width: 100%;
     padding-top: 180px;
        height: 30vh;
    
    
}

footer { 
    background: #3cb371;
    padding: 10px;
    text-align: center;
}


    
    
    
    
    main {
        width: 100%;
        margin-left: auto;
        text-align: center;
        height: 80vh;
    }
    
    .a {
    
    font-size: 100px;
    line-height:150px;
    width: 150px;
        border: solid 1px;
    text-align: center;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
       background-color: hotpink;  
}
    .p1, .p2 {
        display: flex;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
    }
    .pass {
        height: 80px;
        width: 100%;
        padding-top: 20px;
    }
    #m1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16, #17, #18, #19, #20, #21, #22, #23, #24, #25, #26, #27, #28, #29, #30, #31, #31, #32, #33, #34, #35, #36, #37, #38, #39, #40, #41, #42, #43, #44, #45, #46, #47, #48, #49, #50 {
        font-size: 20px;
        line-height:20px;
        width: 40px;
        height: 40px;
        border: solid 1px;
        background: black;
        padding-right: 5px;
    }
    .ab {
        font-size: 20px;
        line-height:40px;
        width: 40px;
        height: 40px;
        border: solid 1px;
        margin-right: 5px;
        
    }

html {

margin: 0;

padding: 0;

height: 100vh;

width; 100%;

}

body {

max-width: 1500px;

margin: 0;

padding: 0;

background: white;

font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;

-webkit-text-size-adjust: 100%;

height: 100vh;

width; 100%;

}

h1, h2, h3, p, ul {

margin: 0;

padding: 0;

}

header {

background: #3cb371;

padding: 10px;

text-align: center;

}

.gojyu {

height: 60vh;

width: 100%;

padding-top: 180px;

height: 30vh;

}

footer {

background: #3cb371;

padding: 10px;

text-align: center;

}

main {

width: 100%;

margin-left: auto;

text-align: center;

height: 80vh;

}

.a {

font-size: 100px;

line-height:150px;

width: 150px;

border: solid 1px;

text-align: center;

border-radius: 50%;

margin-left: auto;

margin-right: auto;

background-color: hotpink;

}

.p1, .p2 {

display: flex;

width: 80%;

margin-left: auto;

margin-right: auto;

padding: 5px;

}

.pass {

height: 80px;

width: 100%;

padding-top: 20px;

}

#m1, #2, #3, #4, #5, #6, #7, #8, #9, #10, #11, #12, #13, #14, #15, #16, #17, #18, #19, #20, #21, #22, #23, #24, #25, #26, #27, #28, #29, #30, #31, #31, #32, #33, #34, #35, #36, #37, #38, #39, #40, #41, #42, #43, #44, #45, #46, #47, #48, #49, #50 {

font-size: 20px;

line-height:20px;

width: 40px;

height: 40px;

border: solid 1px;

background: black;

padding-right: 5px;

}

.ab {

font-size: 20px;

line-height:40px;

width: 40px;

height: 40px;

border: solid 1px;

margin-right: 5px;

}

画面が出来ました。

これにjsでイベントを追加していきます。

javascript

const st = document.getElementById("start");
const yomi = document.getElementById("yomi");
let lan= 41;
let x = 0;


let moji = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と", "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ", "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "わ", "を", "ん"];

st.addEventListener("click", function() {
    //let get = moji[Math.floor(Math.random() * moji.length)];
    //roulette = setInterval(function() {
    if (x < 41) {
        let idx = Math.floor(Math.random() * lan);
        let getno = moji[idx];
    console.log(moji[idx]);
        yomi.innerHTML = getno;
    document.getElementById(x).innerHTML = moji[idx];
    moji.splice( idx, 1 );
    lan = lan - 1
    
    x = x + 1;
    console.log(x);
    //}, 100);
//});
} else {
    yomi.innerHTML = "終";           
}
    });
//console.log(get);

const st = document.getElementById("start");

const yomi = document.getElementById("yomi");

let lan= 41;

let x = 0;

let moji = ["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と", "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ", "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "わ", "を", "ん"];

st.addEventListener("click", function() {

//let get = moji[Math.floor(Math.random() * moji.length)];

//roulette = setInterval(function() {

if (x < 41) {