javascriptでのモグラたたきアプリ（試作品）

■動作ロジックも入れてとりあえず完成した。
画面例は変わらず下のような感じ。

時間は60秒。Normalでは、1ターン（もぐらが出るロジック１回）を1.2秒に1回にしたので、ざっと50回。ただ、どこに出るかはランダムで決めていて、もし出現している所とかぶったらその回はとばす。ので、期待値的には47回くらいになると思う。予告の動作があって、その後に出現する。

Hardでは、1ターンを0.9秒に1回にしている。また、出てくるパターンをランダムで決めていて、①通常、②フェイント、③黄色もぐら、のどれかになる。②フェイントの場合、出てくる予告の動作の後、出てこない。この時にクリックしても得点にはならない（Normalでは点になる）。時間が40秒を切ったら、出現するもぐらを増やすよう時間で条件分けしている。

点数は、通常のもぐらが20pt、黄色もぐらが50pt。

最終的な結果はコンソール画面に表示している。

イメージしていた内容はこんなところかなー。効果音を入れたり、得点のランキングを作ったりとかへ発展できそうだけど、そこまではやらないと思う。

htmlへのリンクを下のボタンに貼ってみた。

あと、今回のメインとなる javascript のコードが下の通り。

let point = 0;
let clicked_mog = 0;
let clicked_mogB = 0;
let idpool = ["a01", "a02", "a03", "a04", "a05", "a06", "a07", "a08", "a09", "a10", "a11", "a12", "a13", "a14", "a15", "a16"];
let runpool = [];
let timeout = 0;
let clickCnt = 0;
let setStandardImage = function (image, id) {
    let img = document.getElementById(id);
    img.src = image;
};

let setImage = function (image, id) {
    let img = document.getElementById(id);
    img.src = image;
    setTime1 = setTimeout(setStandardImage, 1400, "./mogura_sta.png", id);
};


function game_start() {

    point = 0;
    clicked_mog = 0;
    clicked_mogB = 0;
    const interval = 1000;
    let count = 60;
    let rand = -1;
    let preid = -1;
    let moguraSet;
    let moguraCnt = 0;
    let moguraCntB = 0;
    clickCnt = 0;

    console.log("=====  Game Start  =====");

    let diff_val = document.getElementsByName('diff');

    if (diff_val[0].checked) {
        moguraSet = setInterval(function () {
            do {
                rand = Math.floor(Math.random() * 16);
                if (rand == -1 || preid != rand) {
                    break;
                }
            } while (true)
            preid = rand;
            let id = idpool[rand];
            let img = document.getElementById(id);

            if (img.attributes.src.value === "./mogura_sta.png") {
                img.src = "./mogura_normal_pre2.png";
                moguraCnt++;
                runpool[id] = setTimeout(setImage, 800, "./mogura_normal.png", id);
            }

        }, interval * 1.2);

    } else {

        let pattern = 1;

        moguraSet = setInterval(function () {

            pattern = Math.floor(Math.random() * 10 + 1);

            do {
                rand = Math.floor(Math.random() * 16);
                if (rand == -1 || preid != rand) {
                    break;
                }
            } while (true)


            preid = rand;
            let id = idpool[rand];
            let img = document.getElementById(id);

            if (img.attributes.src.value === "./mogura_sta.png" && pattern > 4) {
                img.src = "./mogura_normal_pre3.png";
                moguraCnt++;
                runpool[id] = setTimeout(setImage, 400, "./mogura_normal.png", id);
            } else if (img.attributes.src.value === "./mogura_sta.png" && pattern >= 2 && pattern <= 4) {
                img.src = "./mogura_normal_pre3.png";
                setTimeout(setStandardImage, 600, "./mogura_sta.png", id);
            } else if (img.attributes.src.value === "./mogura_sta.png" && pattern == 1) {
                img.src = "./mogura_special.png";
                moguraCntB++;
                runpool[id] = setTimeout(setStandardImage, 800, "./mogura_sta.png", id);
            }

            let rand2;
            let preid2;
            if (count < 40 && pattern > 7) {
                do {
                    rand2 = Math.floor(Math.random() * 16);
                    if (preid != rand2 && preid2 != rand2 && rand != rand2) {
                        break;
                    }
                } while (true)

                preid2 = rand2;
                let id2 = idpool[rand2];
                let img2 = document.getElementById(id2);

                if (img2.attributes.src.value === "./mogura_sta.png") {
                    img2.src = "./mogura_normal_pre3.png";
                    moguraCnt++;
                    runpool[id2] = setTimeout(setImage, 600, "./mogura_normal.png", id2);
                }
            }
        }, interval * (9 / 10));

    }

    const timer = setInterval(function () {
        document.getElementById('time').innerHTML = count;
        if (count-- <= 0) {
            clearInterval(moguraSet);
            clearInterval(timer);
            setTimeout(() => {
                if (diff_val[0].checked) {
                    console.log("=====  Result  =======");
                    console.log("Difficult: Normal");
                    console.log("Mogura: " + clicked_mog + "/" + moguraCnt);
                    console.log("Click: " + clickCnt);
                    console.log("Point: " + point);
                    console.log("=====  Game End  =====");
                } else {
                    console.log("=====  Result  =======");
                    console.log("Difficult: Hard");
                    console.log("Mogura: " + clicked_mog + "/" + moguraCnt);
                    console.log("Mogura(B): " + clicked_mogB + "/" + moguraCntB);
                    console.log("Click: " + clickCnt);
                    console.log("Point: " + point);
                    console.log("=====  Game End  =====");
                }
            }, 1000);
        }
    }, interval);
}


function hit_click(id) {

    let img = document.getElementById(id)
    clickCnt++;

    if (img.attributes.src.value === "./mogura_normal.png" || img.attributes.src.value === "./mogura_normal_pre2.png") {
        point = point + 20;
        clicked_mog++;
        img.src = "./mogura_normal_check.png";
        clearTimeout(runpool[id]);
        setTimeout(setStandardImage, 4000, "./mogura_sta.png", id);
    } else if (img.attributes.src.value === "./mogura_special.png") {
        point = point + 50;
        clicked_mogB++;
        img.src = "./mogura_special_check.png";
        clearTimeout(runpool[id]);
        setTimeout(setStandardImage, 4000, "./mogura_sta.png", id);
    } else if (img.attributes.src.value === "./mogura_normal_pre3.png") {
        setTimeout(setStandardImage, 100, "./mogura_sta.png", id);
    }
    document.getElementById('point').innerHTML = point;
}