使用实现js中打地鼠的游戏

来源：澳泰情感

这篇文章主要介绍了关于使用实现js中打地鼠的游戏，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

<!DOCTYPE html>
<html lang="">
<head>
 <mata charset = "utf-8" />
<title>打地鼠</title>
<style>
 #tb{
 background:url(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);
 img1=document.getElementsByTagName("img");
 img1[sj].src="dishu.gif";
// 给地鼠图片添加单击事件和打击动作
 img1[sj].setAttribute("onclick","daji()");
 setTimeout("xs()",1000);
 }
// 实现打击地鼠的动作，将地鼠图片更换为击中图片，并且去掉onclick事件，避免出现一只地鼠击中两次，加两次分数的情况
 function daji(){
 img1[sj].src="shang.gif";
 img1[sj].removeAttribute("onclick");
// 更换一次图片积分器加十分
 sum+=10;
// 改变积分器
 document.getElementById("fen").innerHTML=sum/10;
 document.getElementById("fen1").innerHTML=sum;
 }
// 一秒后没击中地鼠，地鼠消失动作
 function xs(){
 img1[sj].removeAttribute("onclick");
 img1[sj].src="keng.gif";
 setTimeout("bh()",1000);
 }
</script>
</head>

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

 </table>
 <p id="fen">击中次数</p>
 <p id="fen1">分数</p>
</center>
</body>
</html>