话不多说,请看代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
 <style type="text/css">
 #content {
 width:960px;
 margin:0 auto;
 text-align:center;
 margin-top:40px;
 }
 #form1 {
 margin:20px 0;
 }
 table {
 margin:0 auto;
 cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;
 }
 td {
 width:95px;
 height:95px;
 background:#00ff33;
 }
 </style>
 <script type="text/javascript">
 var td = new Array(),  //保存每个格子的地鼠
 playing = false,  //游戏是否开始
 score = 0, //分数
 beat = 0, //鼠标点击次数
 success = 0, //命中率
 knock = 0, //鼠标点中老鼠图片的次数
 countDown = 30, //倒计时
 interId = null, //指定 setInterval()的变量
 timeId = null; //指定 setTimeout()的变量
 //游戏结束
 function GameOver(){
 timeStop();
 playing = false;
  clearMouse();
 alert("游戏结束!\n 你获得的分数为:"+score+"\n 命中率为:"+success);
 success = 0;
 score = 0;
 knock = 0;
 beat = 0;
 countDown = 30;
 }
 //显示当前倒计时所剩时间
 function timeShow(){
 document.form1.remtime.value = countDown;
 if(countDown == 0){
 GameOver();
 return;
 }else{
 countDown = countDown-1;
 timeId = setTimeout("timeShow()",1000);
 }
 }
 //主动停止所有计时
 function timeStop() {
 clearInterval(interId);
 clearTimeout(timeId); 
 }
 //随机循环显示老鼠图片
 function show(){
 if(playing){
 var current = Math.floor(Math.random()*25);
 document.getElementById("td["+current+"]").innerHTML = '<img src="/UploadFiles/2021-04-02/115915w6tluu1gq8l1b54h.png">

流程设计:

  • 点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样
  • 分数、命中率显示重置为“0”,倒计时开始(默认为30秒)
  • 老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏
  • 当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果

实例中用到的图片附件下载

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

标签:
js,打地鼠

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“js实现打地鼠小游戏”

暂无“js实现打地鼠小游戏”评论...