这篇文章主要介绍了关于使用实现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>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上是使用實作js中打地鼠的遊戲的詳細內容。更多資訊請關注PHP中文網其他相關文章!