モグラ叩き　改

<html>
<head>
    <meta charset="utf-8" content="text/html; charset=utf-8">
    <title>元素叩きゲーム</title>
    <style>
#a td {
    width: 100px;
    height: 100px;
    font-size: 30px;
    border: 1px solid #ccc;
    text-align:center;
}
#message {
    font-size:200%;
    font-weight:bold;
    color:#c00;
}
</style>
    
</head>
<body>
<form name="Mogura">
<input type="button" value="Start" onclick="cntStart()">
<input type="button" value="Stop" onclick="cntStop()"><br>
</form>

<table id="a">
        <tbody>
            <tr><td id="b1"></td><td></td><td></td><td></td><td></td><td></td><td></td><td id="b2"></td></tr>
            <tr><td id="b3"></td><td id="b4"></td><td id="b5"></td><td id="b6"></td><td id="b7"></td><td id="b8"></td><td id="b9"></td><td id="b10"></td></tr>
            <tr><td id="b11"></td><td id="b12"></td><td id="b13"></td><td id="b14"></td><td id="b15"></td><td id="b16"></td><td id="b17"></td><td id="b18"></td></tr>
        </tbody>
</table>
<div id="message"></div>
<script>


    //18個のマスのID
    var ids = ['b1','b2','b3','b4','b5','b6','b7','b8','b9','b10','b11','b12','b13','b14','b15','b16','b17','b18'];
    var Element = ["H","He","Li","Be","B","C","N","O","F","Ne","Na","Mg","Al","Si","P","S","Cl","Ar"];
    
    var MyStop=1;

var timer1;

function cntStop() {
    document.Mogura.elements[0].disabled=false;
   clearInterval(timer1);
}
function cntStart() {
    document.Mogura.elements[0].disabled=true;
    timer1=setInterval("moguraDasu()",80);//80msに一度呼ぶ。
}

    //ランダムに元素を出す処理
    function moguraDasu()
    {
        //15%ぐらいの確率で元素を出すことにする
        if (Math.random() < 0.15) {
            var IDNum=Math.floor(Math.random()*18);
            var masu = document.getElementById(ids[IDNum]);
            //ただし元素を出すのは元素がいないマス
            if (masu.innerHTML == '') {
                masu.innerHTML = Element[IDNum];
                setTimeout(function(){moguraKakusu(masu);}, 1500);
            }
        }
    }

    //出した元素を隠す処理
    function moguraKakusu(masu)
    {
        masu.innerHTML = '';
    }

    //たたいた時の処理
    function tataita(e)
    {
        if (e.target.innerHTML != '') {
            document.getElementById('message').innerHTML = '○ あたり！';
            e.target.innerHTML = '';
        } else {
            document.getElementById('message').innerHTML = '× はずれ！';
        }
    }

    //各マスをたたいたときに実行するよう設定しておく
    document.getElementById('b1').addEventListener('click', tataita);
    document.getElementById('b2').addEventListener('click', tataita);
    document.getElementById('b3').addEventListener('click', tataita);
    document.getElementById('b4').addEventListener('click', tataita);
    document.getElementById('b5').addEventListener('click', tataita);
    document.getElementById('b6').addEventListener('click', tataita);
    document.getElementById('b7').addEventListener('click', tataita);
    document.getElementById('b8').addEventListener('click', tataita);
    document.getElementById('b9').addEventListener('click', tataita);
    document.getElementById('b10').addEventListener('click', tataita);
    document.getElementById('b11').addEventListener('click', tataita);
    document.getElementById('b12').addEventListener('click', tataita);
    document.getElementById('b13').addEventListener('click', tataita);
    document.getElementById('b14').addEventListener('click', tataita);
    document.getElementById('b15').addEventListener('click', tataita);
    document.getElementById('b16').addEventListener('click', tataita);
    document.getElementById('b17').addEventListener('click', tataita);
    document.getElementById('b18').addEventListener('click', tataita);
</script>
</body>
</html>

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング > 第3時限：体育

3−１　元素たたきゲーム

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング > 第3時限：体育

3−１ 元素たたきゲーム

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

3−１　元素たたきゲーム