利用javascript實現的小游戲-打地鼠

　　　　隨着html5的興起，那些公司對大型游戲的開發正在慢慢疏遠，一、開發周期長；二、運營花費高；他們正找一些能夠克服這些缺點的替代品。正好，html5的出現可以改變這些現狀，在淘寶、京東等一些大型電商網站、QQ、微信等聊天軟件都出現了html5的小游戲，這說明html5越來越受到大家的青睞。接下來我用javascript實現一個小型游戲---打地鼠。

　　　　打地鼠其實很好實現，主要思路有：先用表格做一個3*3的九宮格，然后放9張坑的圖片-->設置一個小於等於9的隨機數k，然后讓k的坑的圖片替換成地鼠的圖片-->給地鼠一秒的停留時間讓用戶點擊，如果點中，則加10分，沒點中分數不加進行下一秒的執行-->循環函數；這樣一個簡單的游戲就做成了。

　　　　游戲鏈接地址：http://absunsanfeng.usa3v.com/mouse/99/index.html

　　　　素材下載地址：鏈接：http://pan.baidu.com/s/1pLgXWHd 密碼：y9k9

　　　　代碼如下：

<html>
<head>
<title>打地鼠</title>
<style>
    #tb{
        background:url(images/beijing.jpg) no-repeat;
    }
    #fen{
        font-weight:bold;
        font-size:60px;
        font-family:迷你簡哈哈;
    }
    #fen1{
        font-weight:bold;
        font-size:60px;
        font-family:迷你簡哈哈;
    }
</style>
<script>
    function kaishi(){
        setTimeout("bh()",3000);
        sum=0;
    }
    function bh(){    
        sj=Math.floor(Math.random()*9);
        var img1=document.getElementsByTagName("img");
        img1[sj].src="images/dishu.gif";
        img1[sj].setAttribute("onclick","daji()");
        setTimeout("xs()",1000);
    }
    function daji(){
        var img1=document.getElementsByTagName("img");
        img1[sj].src="images/shang.gif";    
        img1[sj].removeAttribute("onclick");
        sum+=10;
        document.getElementById("fen").innerHTML=sum/10;
        document.getElementById("fen1").innerHTML=sum;
    }    
    function xs(){    
        var img1=document.getElementsByTagName("img");
        img1[sj].removeAttribute("onclick");
        img1[sj].src="images/keng.gif";    
        setTimeout("bh()",1000);            
    }
</script>
</head>

<body onload="kaishi()">
<center>
    <table id="tb">
        <foction>打地鼠</foction>
        <tr>
            <td><img src="images/keng.gif"></td>
            <td><img src="images/keng.gif"></td>
            <td><img src="images/keng.gif"></td>
        </tr>
        <tr>
            <td><img src="images/keng.gif"></td>
            <td><img src="images/keng.gif"></td>
            <td><img src="images/keng.gif"></td>
        </tr>
        <tr>
            <td><img src="images/keng.gif"></td>
            <td><img src="images/keng.gif"></td>
            <td><img src="images/keng.gif"></td>
        </tr>

    </table>
    <p id="fen">0</p>
    <p id="fen1">0</p>
</center>
</body>
</html>

利用javascript實現的小游戲-打地鼠

免責聲明！