HTML学习 - 打地鼠

来源：互联网发布：mac 图片处理除了ps 编辑：程序博客网时间：2024/05/21 22:23
效果图：
代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>简易打地鼠</title>    <script type="text/javascript">        mainscore = 0;        mainretime = 30;        Runtime = 0;        maps = new Array(0,0,0,0,0,0,0,0,0);        function GameStart() {            for (var i = 0; i < 10; i++) {                maps[i] = 0;            }            mainscore = 0;            mainretime = 30;            document.getElementById("score").value = mainscore;            document.getElementById("retime").value = mainretime;            if (Runtime == 0) {                runthing1 = setInterval("Run()", 2000);                runthing2 = setInterval("Run()", 1500);            }            else {                Runtime = 1;                clearInterval(runthing1);                clearInterval(runthing2);            }            setTimeout("TimeDown()", 1000);        }        function GameOver() {            Runtime = 0;            clearInterval(runthing2);            clearInterval(runthing1)if(Runtime == 0) return;            for (var i = 0; i < 9; i++) {                document.getElementById("td[" + i + "]").innerHTML = "";            }            alert("你得到的分数为" + mainscore);        }        function Showmouse(index) {            var Position = document.getElementById("td[" + index + "]");            Position.innerHTML = "<img src = 'image3.png'>";            setTimeout('if(maps[' + index + '] == 0)document.getElementById("td[' + index + ']").innerHTML = "";', 700);        }        function Run() {            var rate = Math.floor(Math.random() * 10);            while (document.getElementById("td[" + rate + "]").innerHTML != "") {                rate /= 2;                rate++;            }            if (rate <= 9 && rate >= 0)                Showmouse(rate);        }        function TimeDown() {            mainretime--;            if (mainretime < 0) {                GameOver();                return;            }            document.getElementById("retime").value = mainretime;            if (mainretime >= 0)                setTimeout("TimeDown(" + mainretime + ")", 1000);        }        function mouseDownRe(index) {            var Position = document.getElementById("td[" + index + "]");            if (Position.innerHTML != "") {                mainscore += 60;                document.getElementById("score").value = mainscore;                Position.innerHTML = "";                document.getElementById("td[" + index + "]").innerHTML = "<img src = image6.jpg width = '50px' height = '50px'>";                setTimeout("document.getElementById('td[" + index + "]').innerHTML = '';maps[" + index + "] = 0;", 1500);                maps[index] = 1;            }        }    </script>    <style type="text/css">        #maincontent {            width: 800px;            margin: auto;            text-align: center;        }        #maintable {            border:0px;            padding:0px;            margin: auto;        }        table:hover {            cursor: url(image4.png),auto;        }        td {            width: 90px;            height: 90px;            padding: 0px;            border: 0px;            background-image: url(image2.png);        }    </style></head><body id="maincontent">    <input type="button" value="开始游戏" onclick="GameStart()" />    <input type="button" value="结束游戏" onclick="GameOver()" />    <form name="form1">        <label>分数：</label>        <input type="text" id="score" size="6" />        <label>倒计时：</label>        <input type="text" id="retime" size="5" />    </form>    <table id="maintable" cellspacing="0px" cellpadding ="0px">        <tr>            <td id="td[0]" onmousedown="mouseDownRe(0)"></td>            <td id="td[1]" onmousedown="mouseDownRe(1)"></td>            <td id="td[2]" onmousedown="mouseDownRe(2)"></td>        </tr>        <tr>            <td id="td[3]" onmousedown="mouseDownRe(3)"></td>            <td id="td[4]" onmousedown="mouseDownRe(4)"></td>            <td id="td[5]" onmousedown="mouseDownRe(5)"></td>        </tr>        <tr>            <td id="td[6]" onmousedown="mouseDownRe(6)"></td>            <td id="td[7]" onmousedown="mouseDownRe(7)"></td>            <td id="td[8]" onmousedown="mouseDownRe(8)"></td>        </tr>    </table>    <script type="text/javascript">        document.getElementById("score").readOnly = true;        document.getElementById("retime").readOnly = true;    </script></body></html>
1 0