189 8069 5689

js实现如何打地鼠小游戏

这篇文章将为大家详细讲解有关js实现如何打地鼠小游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

按需策划可以根据自己的需求进行定制,网站设计制作、成都网站建设构思过程中功能建设理应排到主要部位公司网站设计制作、成都网站建设的运用实际效果公司网站制作网站建立与制做的实际意义

请看代码:





打地鼠
 
 #content {
 width:960px;
 margin:0 auto;
 text-align:center;
 margin-top:40px;
 }
 #form1 {
 margin:20px 0;
 }
 table {
 margin:0 auto;
 cursor:url(/upload/otherpic50/77269.png),auto;
 }
 td {
 width:95px;
 height:95px;
 background:#00ff33;
 }
 
 
 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 = '';
 setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000); //使用 setTimeout()实现3秒后隐藏老鼠图片
 }
 }
 //清除所有老鼠图片
 function clearMouse(){
 for(var i=0;i<25;i++){
 document.getElementById("td["+i+"]").innerHTML="";
 }
 }
 //点击事件函数,判断是否点中老鼠
 function hit(id){
 if(playing == false){
 alert("请点击开始游戏!");
 return;
 }else{
 beat += 1;
 if(document.getElementById("td["+id+"]").innerHTML != ""){
 score += 1;
 knock += 1;
 success = knock/beat;
 document.form1.success.value = success;
 document.form1.score.value = score;
 document.getElementById("td["+id+"]").innerHTML = "";
 }else{
 score += -1;
 success = knock/beat;
 document.form1.success.value = success;
  document.form1.score.value = score;
 }
 }
 }
 //游戏开始
 function GameStart(){
 playing = true;
 interId = setInterval("show()",1000); 
 document.form1.score.value = score;
 document.form1.success.value = success;
 timeShow();
 } 
 


 
 
 
 
  
  
  
  
  
  
  
 
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 

流程设计:

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

关于“js实现如何打地鼠小游戏”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


本文名称:js实现如何打地鼠小游戏
文章路径:http://cdxtjz.cn/article/gdijje.html

其他资讯