隨着html5的興起，那些公司對大型遊戲的開發正在慢慢疏遠，1、開發週期長；2、運營花費高；他們正找一些可以克服這些缺點的替代品。正好，html5的出現能夠改變這些現狀，在淘寶、京東等一些大型電商網站、QQ、微信等聊天軟件都出現了html5的小遊戲，這說明html5愈來愈受到你們的青睞。接下來我用javascript實現一個小型遊戲---打地鼠。javascript
打地鼠其實很好實現，主要思路有：先用表格作一個3*3的九宮格，而後放9張坑的圖片-->設置一個小於等於9的隨機數k，而後讓k的坑的圖片替換成地鼠的圖片-->給地鼠一秒的停留時間讓用戶點擊，若是點中，則加10分，沒點中分數不加進行下一秒的執行-->循環函數；這樣一個簡單的遊戲就作成了。html
遊戲連接地址：http://absunsanfeng.usa3v.com/mouse/99/index.htmlhtml5
素材下載地址：連接：http://pan.baidu.com/s/1pLgXWHd 密碼：y9k9java
代碼以下：微信
<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>