用原生javascript做的一个打地鼠的小游戏

时间：2021-06-10 20:09:38

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>打地鼠的小游戏</title>

     <link rel="stylesheet" href="CSS/comment.css">

     <script src="Javascript/JavaScript.js"></script>

 </head>

 <body>

     <p style="height: 30px;font-size: 20px;color: #EEEEEE;background: #445566;">欢迎来到打地鼠小游戏,让我们一起打啊打!</spap>

     <div id="bgDiv" class="div1">

     </div>

     <p>分数为:<span id="number"></span></p>

     <div style="width: 200px;height: 50px;background:black;text-align: center;margin: 0 auto ;">

         <input style="height: 50px;color: #ffffff;font-size: 16px;background: red;" type="button" value="开始游戏"onclick="start()">

         <input style="height: 50px;color: #ffffff;font-size: 16px;background: green;" type="button" value="结束游戏" onclick="stop()">

     </div>

 </body>

 </html>

接下来是CSS部分代码:

 body,div{

     padding:;

     margin:;

 }

 .div1{

     width: 400px;

     height: 400px;

     background: gray;

     margin: 0 auto;

 }

 .btn{

     height: 35px;

     width: 35px;

     background-image: url("1.jpg");

 }

 p{

     text-align: center;

 }

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

 var hitNumber=0;

 var timer=null;

 var flag=null;

 function start(){

     if(timer==null){

         timer=setInterval(function create(){//开始创建每一个地鼠,

             flag=true;//这里设置flag的原因是用来防止onclick的多次点击累加

             var newButton = document.createElement("input");

             newButton.type="button";

             newButton.value="地鼠";

             newButton.style.height="40px";

             newButton.style.width="40px";

             newButton.style.backgroundImage="url(CSS/1.jpg)";//给每一个button添加背景图片

             var box = document.getElementById("bgDiv");

             box.appendChild(newButton);

             newButton.onclick=hit;

             newButton.style.marginLeft=randomX();

             newButton.style.marginTop=randomX();

             setTimeout(function(){

                 box.removeChild(newButton);

             },1000);

         },2000);

     }

 }

 function stop(){//停止打地鼠,但是这里我在下边进行了一个结束时弹出一个结语框

     clearInterval(timer);

     var tip=document.createElement("div");

     tip.style.height="100px";

     tip.style.width="200px";

     tip.style.background="red";

     var box = document.getElementById("bgDiv");

     box.appendChild(tip);

     tip.style.margin="0 auto";

     tip.style.color="white";

     tip.style.fontSize="20px";

     tip.style.textAlign="center";

     tip.style.lineHeight="100px";

     tip.innerHTML="恭喜你获得"+hitNumber+"分"

 }

 function randomX(){

     var leftLength=Math.floor(Math.random()*360)+"px";

     return leftLength;

 }

 function randomY(){

     var topLength=Math.floor(Math.random()*360)+"px";

     return topLength;

 }

 function hit(){//当点击地鼠时,进行打击次数的累加

     if(flag){

         flag=false;

         hitNumber++;

         //var hit1=document.getElementById("event.target.id");

         var text1=document.getElementById("number");

         text1.innerHTML=hitNumber;

     }

 }

用原生javascript做的一个打地鼠的小游戏

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

相关文章