HTML学习 - 打地鼠

效果图:

HTML学习 - 打地鼠_第1张图片

代码:

<!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>


你可能感兴趣的:(HTML学习 - 打地鼠)