打地鼠游戏

原创 爱学习的笨蛋 译文 游戏 132阅读 2018-09-06 16:12:52 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*
{
padding: 0;
margin: 0;
}
body
{
width: 500px;
margin: 0 auto;
}
td
{
width: 150px;
height: 150px;
}
p
{
text-align: center;

        }
        #box
        {
            width: 600px;
            height: 600px;
            background: red;
            position: absolute;
            opacity: 0.9;
            border-radius: 20px;
            display: none;
            font-size: 50px;
            color: white;
            text-align: center;
            line-height: 500px;

        }
        button
        {
            position: absolute;
            left: 950px;

            width: 100px;
            height: 50px;
        }
    </style>

</head>
<body>
    <div id="box"></div>
    <table>
        <caption style="font-size: 50px; font: '微软雅黑'; color: red;">打地鼠</caption>
        <tr>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>

        </tr>
        <tr>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>

        </tr>
        <tr>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>

        </tr>
        <tr>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>
            <td><img src="img/keng.gif"/></td>

        </tr>
    </table>
    <p id="jishi" style="font-size: 50px;">10</p>
    <p style="font-size: 50px;">分数<span id="sum">0</span></p>

    <button id="btn">开始</button>
</body>   
<script type="text/javascript">

    var imgs=document.getElementsByTagName('img')
    var jishi=document.getElementById('jishi')
    var sum=document.getElementById('sum')
    var btn=document.getElementById('btn')
    var z=10;
    var s;
    s=setInterval(function()
    {
        z--
        jishi.innerHTML=z
        ji()
        var i=Math.floor(Math.random()*imgs.length)
        imgs[i].src="img/dishu.gif"
        imgs[i].setAttribute("onclick","fn("+i+")")
        setTimeout(function()
        {
             imgs[i].src="img/keng.gif"
             imgs[i].removeAttribute("onclick")
        },800)
    },1000)
    function fn(i)
    {
        imgs[i].src="img/shang.gif"
        imgs[i].removeAttribute("onclick")
        sum.innerHTML=parseInt(sum.innerHTML)+10;

    }
    function ji()
    {
        if(z<=0)
        {
            clearInterval(s)
            jishi.innerHTML=0;
            var mz=prompt("游戏结束","请输入名字")
            box.innerHTML=mz+"你的得分:"+sum.innerHTML
            box.style.display="block"
            btn.style.display='block'
        }
    }

    btn.onclick=function()
    {
        location.href="img.html"
    }

</script>

</html>

评论 ( 1 )
最新评论
zhziya 2018-09-08 09:25:55 1F