javascriptでのモグラたたきアプリ（setIntervalで定期的に関数を実行）

■チェックする画像の設定。
モグラたたきの最低限の操作を考えてみると、①モグラの画像を定期的に、またランダムに表示させる。②その画像をクリックする。③画像をベースのものに戻す。になる。

①では、setInterval で定期的に関数を実行させて、画像を差し替える。４×４のテーブルにそれぞれ固有のidを振っているので（01 ~ 16）、そのidをランダムで取得して差し替える位置を指定する。
コードが下（3000ミリ秒＝3秒に1度に関数を実施）。
Math.random で1～16を取得、1桁の場合は01のように0詰めする。

let interval=3000;

setInterval(function () {
    let id = Math.floor(Math.random() * 16) + 1;
    id = "a" + id.toString().padStart(2, '0');

    let img = document.getElementById(id)
    img.src = "./mogura_normal.png";
        }, interval);
}

②、③では、クリックした際の画像の名前を取得して、if文で処理を分ける。モグラの画像であればベースの画像に差し替える。各画像のidを引数を通して関数に入れる。

function hit_click(id) {

    let img = document.getElementById(id)
    if (img.attributes.src.value==="./mogura_normal.png"){
      img.src = "./mogura_sta.png";
    } else if (img.attributes.src.value==="./mogura_sta.png"){
    } else {
 
    }

実行時の画面が下。画像は適当に作成。

次は、時間経過でベースの画像に戻ったり、クリックしたときにやられた時の画像（これも時間経過でベース画像に戻す）に差し替えたりしたい。