JS小游戏（飞机大战）

最新推荐文章于 2023-08-03 20:56:39 发布

浩笑

最新推荐文章于 2023-08-03 20:56:39 发布

阅读量633

点赞数

文章标签： javascript servlet java

本文链接：https://blog.csdn.net/qq_44236920/article/details/125549267

版权

html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="static/index.css"/>
   </head>
   <body>
       <div id="map">
           <div class="score"></div>
           <div class="start_div">
               <h1>飞机大战</h1>
               <button type="button">开始游戏</button>
           </div>
           <div class="fire_div">

           </div>
           <div class="gameover">
               <h1>游戏结束</h1>
               <h2>分数：</h2>
               <button type="button">重新开始</button>
           </div>
       </div>
       <script type="text/javascript" src="static/index.js"></script>
   </body>
</html>

CSS

*{
   padding: 0;
   margin: 0;
}
#map{
   width: 512px;
   height: 650px;
   /* border: 1px solid red; */
   margin: auto;
   background: url(img/bg_1.jpg);
   background-position-y: 0px;
   position: relative;
   overflow: hidden;
}
.start_div{
   text-align: center;
   padding-top: 200px;
}
.start_div h1{
   font-size: 36px;
   color: #fff;
   margin-bottom: 100px;
}
.start_div button,.gameover button{
   width: 100px;
   height: 40px;
   background: #fff;
   border: none;
   outline: none;
   border-radius: 4px;
}
.plane{
   position: absolute;
   top: 0;
   left: 0;
}
.fire,.enemy{
   position: absolute;
}
.score{
   position: absolute;
   right: 10px;
   top: 10px;
   color:#fff;
   z-index: 99;
}
.gameover{
   position: absolute;
   width: 80%;
   height: 200px;
   background: #fff;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   z-index: 100;
   text-align: center;
   padding: 20px;
   display: none;
}
.gameover h2{
   margin: 30px 0;
}
.gameover button{
   background: gainsboro;
}

var startBtn=document.querySelector('.start_div button');
var startDiv=document.querySelector('.start_div');
var fireDiv=document.querySelector('.fire_div');
var map=document.querySelector('#map');
var scoreDiv=document.querySelector('.score');
var overDiv=document.querySelector('.gameover');
var replayBtn=document.querySelector('.gameover button');

var mapOffsetLeft=map.offsetLeft; //map距离浏览器左侧的距离
var score=0;
var plane;
var fireAll=fireDiv.children;

startBtn.οnclick=startGame;
//重新开始游戏
replayBtn.οnclick=function(e){
   overDiv.style.display="none";
   score=0;
   map.removeChild(plane);//清除上一局游戏角色
   var enemy=document.querySelectorAll(".enemy");
   for(var i=0;i<enemy.length;i++){
       map.removeChild(enemy[i]) //清除上一局留下的敌军飞机
   }
   startGame(e)
}

//开始游戏
function startGame(event){
   var pos={
       x:event.clientX-mapOffsetLeft-35,
       y:event.clientY-35
   }
   startDiv.style.display="none";
   mapMove();
   plane=createPlane(pos);
   enemy();
}
//背景移动效果
function mapMove(){
   map.timer=setInterval(function(){
       var y=parseInt(getComputedStyle(map).backgroundPositionY)
       y++
       map.style.backgroundPositionY=y+'px'
   },10)
}
//创建游戏角色
function createPlane(pos){
   var oImg=new Image();
   oImg.src="static/img/plane_0.png";
   oImg.width=70;
   oImg.height=70;
   oImg.className='plane';
   map.appendChild(oImg);
   oImg.style.top=pos.y+"px";
   oImg.style.left=pos.x+"px";
   //鼠标移动事件
   document.οnmοusemοve=function(e){
       var left=e.clientX-mapOffsetLeft-35;
       var top=e.clientY-35;
       var topMin=0,topMax=map.clientHeight-70,
           leftMin=0,leftMax=map.clientWidth-70;
       left=Math.max(left,leftMin)
       left=Math.min(left,leftMax)
       top=Math.max(top,topMin)
       top=Math.min(top,topMax)
       oImg.style.top=top+"px";
       oImg.style.left=left+"px";
   }
   fire(oImg)
   return oImg
}

//创建子弹
function fire(oImg){
   // createFire()
   map.fireInterval=setInterval(createFire,150)
   function createFire(){
       var oBul=new Image();
       oBul.src="static/img/fire.png";
       oBul.height=40;
       oBul.Width=40;
       oBul.className="fire"
       oBul.style.left=oImg.offsetLeft+35-20+"px";
       oBul.style.top=oImg.offsetTop-5+"px";
       fireDiv.appendChild(oBul);
       //子弹移动效果
       move()
       function move(){
           setInterval(function(){
               var top=parseInt(getComputedStyle(oBul).top);
               if(top <= -40){
                   fireDiv.removeChild(oBul)
               }else{
                   top-=5;
                   oBul.style.top=top+"px";
               }
           },10)
       }
   }
}
//创建敌军
function enemy(){
   // createEnemy()
   map.enemyInterval=setInterval(createEnemy,1000)
   var count=0;
   function createEnemy(){
       count++;
       var oEnemy=new Image();
       if(count%20 == 0){
           //大的敌军飞机
           oEnemy.src="static/img/enemy_big.png";
           oEnemy.height=50;
           oEnemy.width=75;
           oEnemy.type=1
       }else{
           //小的
           oEnemy.src="static/img/enemy_small.png";
           oEnemy.height=40;
           oEnemy.width=54;
           oEnemy.type=0
       }
       oEnemy.className="enemy";
       oEnemy.style.top=-oEnemy.height+'px';
       oEnemy.style.left=Math.random()*(512-oEnemy.width)+"px"
       oEnemy.speed=4; //移动速度
       oEnemy.islive=1; //是否存在
       map.appendChild(oEnemy);
       //敌军移动效果
       move()
       function move(){
           setInterval(function(){
               var top=parseInt(getComputedStyle(oEnemy).top);
               if(top>=map.clientHeight){
                   map.removeChild(oEnemy)
                   if(score>0){
                       score--;
                       // scoreDiv.innerText=score+"分";
                   }
               }else{
                   top+=oEnemy.speed;
                   for(var i=0;i<fireAll.length;i++){
                           if(coll(oEnemy,fireAll[i]) && oEnemy.offsetTop>=0){
                               //子弹碰撞了飞机
                               if(oEnemy.islive){
                                   score++; //分数加1
                                   console.log(score)
                               }
                               oEnemy.islive=0; //飞机被消灭
                               //飞机图片变成爆炸图片
                               if(oEnemy.type == 1){
                                   oEnemy.src="static/img/boom_big.png"
                               }else{
                                   oEnemy.src="static/img/boom_small.png"
                               }
                               //清除已被消灭的飞机
                               setTimeout(function(){
                                   if(oEnemy.parentNode){
                                       oEnemy.parentNode.removeChild(oEnemy)
                                   }
                               },500)
                           }else{
                               //判断飞机是否存在
                               if(oEnemy.islive){
                                   oEnemy.style.top=top+"px";
                               }
                           }
                       }
                   // 判断游戏是否结束
                   if(coll(oEnemy,plane)){
                       clearInterval(map.enemyInterval); //停止创建敌军飞机
                       clearInterval(map.fireInterval); //停止发射子弹
                       overDiv.style.display='block';   //显示游戏结束界面
                       document.οnmοusemοve=null; //解除鼠标移动事件
                       overDiv.querySelector("h2").innerText="分数："+score; //展示分数
                   }
               }
           },10)
       }
   }
}
//碰撞函数
function coll(obj1,obj2){
   var top1=obj1.offsetTop,
       left1=obj1.offsetLeft,
       w1=obj1.clientWidth,
       h1=obj1.clientHeight;

   var top2=obj2.offsetTop,
       left2=obj2.offsetLeft,
       w2=obj2.clientWidth,
       h2=obj2.clientHeight;
   //不会碰撞的情况
   var isColl=(top1>top2+h2)||(top2>top1+h1)||(left1>left2+w2)||(left2>left1+w1);

   return !isColl
}