学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码:

1  2  3  4     
      5      6     
      7      8  9 10     
欢迎来到打地鼠小游戏,让我们一起打啊打!11     
     
      12 13     
     
14     
分数为:
15     
     
      16         
      17         
      18     
     
19 20 

接下来是CSS部分代码:

1 body,div{ 2     padding:0; 3     margin:0; 4 } 5 .div1{ 6     width: 400px; 7     height: 400px; 8     background: gray; 9     margin: 0 auto;10 11 }12 .btn{13     height: 35px;14     width: 35px;15     background-image: url("1.jpg");16 }17 p{18     text-align: center;19 }

再往下就是控制这一切的javascript代码:

1 var hitNumber=0; 2 var timer=null; 3 var flag=null; 4 function start(){ 5  6     if(timer==null){ 7         timer=setInterval(function create(){//开始创建每一个地鼠, 8             flag=true;//这里设置flag的原因是用来防止onclick的多次点击累加 9             var newButton = document.createElement("input");10             newButton.type="button";11             newButton.value="地鼠";12             newButton.style.height="40px";13             newButton.style.width="40px";14             newButton.style.backgroundImage="url(CSS/1.jpg)";//给每一个button添加背景图片15             var box = document.getElementById("bgDiv");16             box.appendChild(newButton);17             newButton.οnclick=hit;18 19             newButton.style.marginLeft=randomX();20             newButton.style.marginTop=randomX();21 22             setTimeout(function(){23                 box.removeChild(newButton);24             },1000);25         },2000);26     }27 28 }29 function stop(){//停止打地鼠,但是这里我在下边进行了一个结束时弹出一个结语框30     clearInterval(timer);31     var tip=document.createElement("div");32     tip.style.height="100px";33     tip.style.width="200px";34     tip.style.background="red";35     var box = document.getElementById("bgDiv");36     box.appendChild(tip);37     tip.style.margin="0 auto";38     tip.style.color="white";39     tip.style.fontSize="20px";40     tip.style.textAlign="center";41     tip.style.lineHeight="100px";42     tip.innerHTML="恭喜你获得"+hitNumber+"分"43 }44 function randomX(){45     var leftLength=Math.floor(Math.random()*360)+"px";46     return leftLength;47 }48 function randomY(){49     var topLength=Math.floor(Math.random()*360)+"px";50     return topLength;51 }52 function hit(){//当点击地鼠时,进行打击次数的累加53     if(flag){54         flag=false;55         hitNumber++;56         //var hit1=document.getElementById("event.target.id");57         var text1=document.getElementById("number");58         text1.innerHTML=hitNumber;59     }60 61 }

好了,博友们,今天的分享就到这里,大家有了好的方法可以一起交流呀,今天的代码有很多冗余代码没有精简,不过这样看起来会详细点.