用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>打地鼠的小游戏</title> 6 <link rel="stylesheet" href="CSS/comment.css"> 7 <script src="Javascript/JavaScript.js"></script> 8 </head> 9 <body> 10 <p style="height: 30px;font-size: 20px;color: #EEEEEE;background: #445566;">欢迎来到打地鼠小游戏,让我们一起打啊打!</spap> 11 <div id="bgDiv" class="div1"> 12 13 </div> 14 <p>分数为:<span id="number"></span></p> 15 <div style="width: 200px;height: 50px;background:black;text-align: center;margin: 0 auto ;"> 16 <input style="height: 50px;color: #ffffff;font-size: 16px;background: red;" type="button" value="开始游戏"onclick="start()"> 17 <input style="height: 50px;color: #ffffff;font-size: 16px;background: green;" type="button" value="结束游戏" onclick="stop()"> 18 </div> 19 </body> 20 </html>
接下来是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.onclick=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 }
好了,博友们,今天的分享就到这里,大家有了好的方法可以一起交流呀,今天的代码有很多冗余代码没有精简,不过这样看起来会详细点.
