源码搜藏网
网站首页
网站源码
加入VIP，免费下载全站VIP素材开通VIP
PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码
CMS模板
加入VIP，免费下载全站VIP素材开通VIP
织梦模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码 pbootcms
安卓源码
加入VIP，免费下载全站VIP素材开通VIP
VIP源码 控件分类 功能分类 技术博客
免费源码
php源码 asp源码 .NET源码 java源码 其他源码
软件下载
电脑软件 安卓下载 安卓游戏 苹果应用 教程资讯
广告合作
●●●
加入VIP，免费下载全站素材开通VIP
设计素材 网页特效 网页设计作业 开发教程
全部作品
全部作品
终身源码
vip源码
安卓源码
开发教程
当前位置：首页 > 开发教程 > js/jQuery教程 >

JavaScript实现前端飞机大战小游戏

时间：2022-05-09 09:31 来源：未知 作者：男人心海底针 收藏

这篇文章主要为大家详细介绍了JavaScript实现前端飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现前端飞机大战的具体代码，供大家参考，具体内容如下

html：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>飞机大战</title>
  <link rel="stylesheet" type="text/css" href="css/commen.css" />
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
  
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 </head>
 <body>
  <div id="stage">
   <div class="bg1"></div>
   <div class="bg2"></div>
   <div class="plain"></div>
   <div class="enemy enemy1"></div>
   <div class="enemy enemy2"></div>
   <div class="enemy enemy3"></div>
   <div class="enemy enemy4"></div>
   <!-- <div class="bullet"></div> -->
   
   <div class="func">功能切换</div>
   <div class="func" style="left: 50px;">背景切换</div>
   <audio id="mp3bg" src="music/background.mp3" autoplay loop>
    当前浏览器不支持audio
   </audio>
   <audio id="mp3shoot" src="music/shoot.mp3" >
    当前浏览器不支持audio
   </audio>
   <audio id="mp3destroy" src="./music/destoryed.mp3" >
    当前浏览器不支持audio
   </audio>
   <button id="buttonmusic" type="button" style="position: absolute;right: 0;bottom: 0;">音乐</button>
  </div>
 
 </body>
</html>

js：

// var pdirection
// var plain

// pdirection = [0, 0, 0, 0, 0];
// var bulletw = 50;
// var bulleth = 65;
// var stage
// var move = 1

// var timerkiss
$(function() {
 //这里写代码的时候是可以控制所有htmldom节点的
 //dom

 var pdirection = [0, 0, 0, 0, 0]; 
 
 //子弹的宽高
 var bulletw = 50;
 var bulleth = 65;
 //运动距离
 var move = 1
 
 
 // var timerkiss
 var stage = document.getElementById("stage"); //获取舞台节点
 var bg1 = stage.getElementsByClassName("bg1")[0]; //获取背景图片
 // console.log(bg1) //检查是否捕获bg1
 var bg2 = stage.getElementsByClassName("bg2")[0]; //获取背景图片
 var topval = -200;
 var topval2 = -968;
 var k = 0;
 //玩家飞机对象
 var plain = stage.getElementsByClassName("plain")[0];
 //定义方向的变量数组，依次表示 上 右 下 左 空格用1表示按下，用0 表示未按下
 // pdirection = [0, 0, 0, 0, 0];

 // 功能切换
 var funcsw=true;//true表示打开键盘 ，关闭鼠标，false表示打开鼠标，关闭键盘
 
 //炮弹对象,宽高速度
 var bullet = stage.getElementsByClassName("bullet")[0];
 // var bulletw = 50;
 // var bulleth = 65;
 var bullets = 10;
 // bg1.style.cssText="top: -30px;"
 var t1 = setInterval(function() {
  k += 1;
  if (k == 768) {
   topval = -968;


  } else if (k == 768 * 2) {
   topval2 = -968;
   k = 0;
  }
  // console.log("ddd")
  // console.log(bg1.style.cssText)
  // bg1.scrollTop=bg1.scrollTop+10;
  $(bg1).css({
   "top": topval
  });
  $(bg2).css({
   "top": topval2
  });


  // bg1.style.cssText="top: "+topval+"px";
  topval++;
  // bg2.style.cssText="top: "+topval2+"px";
  topval2++;
  //topval++背景向下移动 

 }, 3);

 // t1.clearInterval(); //时钟停止


 // 第二章图片
 // var stage=document.getElementById("stage"); //获取舞台节点

 // // console.log(bg1) //检查是否捕获bg1

 // // bg1.style.cssText="top: -30px;"
 // var t1=setInterval(function(){
 //  // console.log("ddd")
 //  // console.log(bg1.style.cssText)
 //  // bg1.scrollTop=bg1.scrollTop+10;
 //  bg2.style.cssText="top: "+topval2+"px";
 //  topval2+=1
 //  //topval++背景向下移动 

 // },70);
 // console.log(plain)
 // var move = 1


 //键盘的监控事件
 document.onkeydown = function(e) {
  // console.log(e)
  //向上运动
  // console.log("444")
  if (e.key == "w") {
   //cons
   //console.log("555")
   pdirection[0] = 1;
   //console.log(pdirection[0]);
   // console.log(parseFloat($(plain).css("top")))
   //if(parseFloat($(plain).css("top"))>=5)
   // plain.style.top.CSSValue=plain.style.top+10
   // $(plain).css({"top":parseFloat($(plain).css("top"))-move});
   // move++

  } else if (e.key == "s") { //向下运动
   pdirection[2] = 1;
   // console.log(parseFloat($(plain).css("top")))
   //if(parseFloat($(plain).css("top"))<=513)
   // plain.style.top.CSSValue=plain.style.top+10
   // $(plain).css({"top":parseFloat($(plain).css("top"))+move});
   // move++

  } else if (e.key == "a") { //向左运动
   pdirection[3] = 1;
   // console.log(parseFloat($(plain).css("top")))

   // plain.style.top.CSSValue=plain.style.top+10
   //$(plain).css({"left":parseFloat($(plain).css("left"))-move});
   // move++

  } else if (e.key == "d") { //向右运动
   pdirection[1] = 1;
   // console.log(parseFloat($(plain).css("top")))

   // plain.style.top.CSSValue=plain.style.top+10
   //$(plain).css({"left":parseFloat($(plain).css("left"))+move});
   // move++

  }
  //else if(e.key==" "){ //炮弹向上运动
  //pdirection[4]=1;
  // console.log(parseFloat($(plain).css("top")))
  // var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
  // console.log($(plain).css("left"))
  //console.log(parseFloat($(plain).css("left")))
  // console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
  //var bullety=parseFloat($(plain).css("top"))-bulleth;

  // plain.style.top.CSSValue=plain.style.top+10
  // $(plain).css({"left":parseFloat($(plain).css("left"))+move});
  // move++
  // $("<div class=\"bullet\"></div>")  转义方法
  //$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);


  //};

 }
 //炮弹单独
 document.onkeypress = function(e) {

  if (e.key == " ") { //炮弹向上运动
   shoot();
  };

 }


 //键盘按键抬起来
 document.onkeyup = function(e) {
  if (e.key == "w") {
   //cons
   //console.log("555")
   pdirection[0] = 0;


  } else if (e.key == "s") { //向下运动
   pdirection[2] = 0;


  } else if (e.key == "a") { //向左运动
   pdirection[3] = 0;


  } else if (e.key == "d") { //向右运动
   pdirection[1] = 0;


  } else if (e.key == " ") { //炮弹向上运动
   pdirection[4] = 0;


  };
  // console.log(pdirection)

 };

 //定义飞机x轴y轴的坐标
  // var plainx=e.clientX;
  // var plainy=e.clientY
 //鼠标移动事件
 stage.onmousemove=function(e){
  if(funcsw) return; //关闭鼠标功能
  var plainX=e.clientX-parseFloat($(stage).css("margin-left"));
  var plainY=e.clientY
  
  //console.log(e)
  //如有必要需要去掉子事件。此处并不需要
  // e.defaultPrevented;
  // e.getPreventDefault()//取消事件默认动作
  // console.log(e.path[1].id);
  // ($(plain[0]).css("top"))=e.clientX+"px"
   $(plain).css({"left":plainX-parseFloat($(plain).width()/2),"top":plainY-parseFloat($(plain).height()/2)});
   //$(plain).css({"top":plainY+parseFloat($(plain).css("height")/2)});
   // $(plain).css({"top":plainy});
   // console.log(e.clientX)
   // console.log(e.clientY)
   // console.log($(plain).css("top"))
 }


 //绑定功能切换键
 $(".func").click(function(){
  if($(this).html()=="功能切换"){
   if(funcsw){ 
    funcsw=false;//关闭键盘 打开鼠标
    clearInterval(timerkey);
    timerfire=setInterval(shoot,170);
    
   }else{
    funcsw=true; //关闭鼠标 ，打开键盘
    clearInterval(timerfire);
    timerkey=monitorkey();
    
   }
  };
  
  
 });

 //控制敌机的时钟
 var enemy = document.getElementsByClassName("enemy");
 setInterval(function() {
  for (var i = 0; i < enemy.length; i++) {
   if ($(enemy[i]).attr("class") == "enemy enemy1") {
    $(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 1);

   } else if ($(enemy[i]).attr("class") == "enemy enemy2") {
    $(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 2);

   } else if ($(enemy[i]).attr("class") == "enemy enemy3") {
    $(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 3);

   } else if ($(enemy[i]).attr("class") == "enemy enemy4") {
    $(enemy[i]).css("top", parseFloat($(enemy[i]).css("top")) + 4);

   }


  }

 }, 10);
 //随机产生敌机
 // setInterval(function(){
 //  var num=parseInt(Math.random()*4)+1;
 //  var rndwidth_stage=parseInt(Math.random()*parseInt($(stage).width()-45));
 //  $("<div class=\"enemy enemy"+num+"\"></div>").css({"left":rndwidth_stage}).appendTo("#stage")

 // },1500);
 //数组写法
 setInterval(function() {
  var num = parseInt(Math.random() * 4) + 1;
  var enemyW = [50, 67, 67, 67];
  var rndwidth_stage = parseInt(Math.random() * $(stage)
 .width()); //展示三木运算符(rndwidth_stage-enemyW[num-1]
  rndwidth_stage = rndwidth_stage > enemyW[num - 1]  rndwidth_stage - enemyW[num - 1] :
   rndwidth_stage;
  $("<div class=\"enemy enemy" + num + "\"></div>").css({
   "left": rndwidth_stage
  }).appendTo("#stage")

 }, 1000);

 //控制子弹的动画时间控件
 setInterval(function() {
  if ($(".bullet").length == 0) return;

  //设置好子弹移出屏幕后，移除子弹节点

  // $(".bullet").css({"top":parseFloat($(".bullet").css("top"))-10})
  // // console.log($(this).css("top"))
  // console.log(parseFloat($(".bullet").css("top")));
  //var bulltop=parseFloat($(".bullet[i]").css("top"));

  //$(".bullet").css({"top":(bulltop-10)+"px"});

  var bullet = $(".bullet");
  // console.log(bullet) 
  // for(var i=0;i<bullet.length;i++){
  //  var bulltop=parseFloat($(bullet[i]).css("top"));
  //  $(bullet[i]).css({"top":(bulltop-10)+"px"});

  // }

  for (i = 0; i < bullet.length; i++) {
   var tmp_bullet = parseFloat($(bullet[i]).css("top"));
   // console.log(tmp_bullet);
   if (tmp_bullet < 0) {
    $(bullet[i]).remove();

   } else {

    var bulltop = parseFloat($(bullet[i]).css("top"));
    $(bullet[i]).css({
     "top": (bulltop - 10) + "px"
    });

   }


  };


 }, bullets);
 //单独监控子弹
 setInterval(function() {
  // var bullet=document.getElementsByClassName("bullet");
  //两种写法都可以
  var bullet = $(".bullet");

  // for(i=0;i<bullet.length;i++){
  //  var tmp_bullet=parseFloat($(bullet[i]).css("top"));
  //  // console.log(tmp_bullet);
  //  if(tmp_bullet<0){
  //   $(bullet[i]).remove();

  //  };


  // };


 }, 400);

 //离开舞台的还记移除dom节点
 setInterval(function() {


  for (i = 0; i < enemy.length; i++) {
   var tmp_enemy = parseFloat($(enemy[i]).css("top"));
   var tmp_stage = $(stage).height();
   // console.log(tmp_enemy);
   // console.log(typeof($(tmp_stage).height()));
   if (tmp_enemy > tmp_stage) {
    $(enemy[i]).remove();
    // console.log("移除成功");

   };

  };
 }, 500);

 //时钟控件监控数组pdirection的值
 var timerkey=monitorkey();

//时钟控件表示每个多少时间发射子弹
//第一种方法 键盘模拟事件
// setInterval(function(){
//  var e=jQuery.Event("keypress");
//  e.key=" "
//  $(document).trigger(e);
 
// },500)

//第二种方法 直接调用函数
 function shoot(){
  $("#mp3shoot")[0].currentTime=0;
  $("#mp3shoot")[0].play();
  pdirection[4] = 1;
  // console.log(parseFloat($(plain).css("top")))
  // var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
  // console.log($(plain).css("left"))
  //console.log(parseFloat($(plain).css("left")))
  // console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
  //var bullety=parseFloat($(plain).css("top"))-bulleth;
  
  // plain.style.top.CSSValue=plain.style.top+10
  // $(plain).css({"left":parseFloat($(plain).css("left"))+move});
  // move++
  // $("<div class=\"bullet\"></div>")  转义方法
  //$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
  //console.log(pdirection[4]);
  var bulletx = parseFloat($(plain).css("left")) + $(plain).width() / 2 - bulletw / 2;
  // console.log($(plain).css("left"))
  // console.log(parseFloat($(plain).css("left")))
  // console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
  var bullety = parseFloat($(plain).css("top")) - bulleth;
  
  // plain.style.top.CSSValue=plain.style.top+10
  // $(plain).css({"left":parseFloat($(plain).css("left"))+move});
  // move++
  // $("<div class=\"bullet\"></div>")  转义方法
  $("<div class='bullet'></div>").css({
   "left": bulletx,
   "top": bullety
  }).appendTo(stage);
  
  
 }
 
 //总结模型
 // function kissAB(A,B){
 //  var iskiss=false;
 //  for(var i=0;i<A.length;i++){
 //   for(var j=0;j<B.length;j++){
 //    // var a=$(A[i]).height()/2+parseFloat($(A[i]).css("top"))-$(B[j]).height()/2-parseFloat($(B[j]).css("top"));
 //    // var b=$(B[j]).width()/2+parseFloat($(B[j]).css("left"))-$(A[i]).width()/2-parseFloat($(A[i]).css("left"));
 //    // //console.log(a)
 //    // var c=$(A[i]).height()/2+$(B[j]).width()/2
 //    // console.log(b);
    
 //    // if(a*a+b*b<c*c){
 //    //  // $(B[j]).remove();
 //    //  // $(A[i]).remove();
 //    //  iskiss=true;
 //    //  break;
 //    // }
    
    
 //   }
   
   
   
 //  }

 // }
 
 //调用模拟键盘函数
  //var timerfire=setInterval(shoot,500);
  //定义变量存储子弹发射的动画
 var timerfire;
 
  //检测是否碰撞

 function kissAB(A,B){
    var iskiss=false;
     var a=$(A).height()/2+parseFloat($(A).css("top"))-$(B).height()/2-parseFloat($(B).css("top"));
     var b=$(B).width()/2+parseFloat($(B).css("left"))-$(A).width()/2-parseFloat($(A).css("left"));
     //console.log(a)
     var c=$(A).height()/2+$(B).width()/2-10;
     //console.log(b);
     if(a*a+b*b<c*c){
      // $(B[j]).remove();
      // $(A[i]).remove();
      iskiss=true; 
    
     }
   
   return iskiss;
   
   
  } 
 
 var timerkiss=monitorkiss();
 
 function monitorkiss(){
  
   //获取子弹
   //检测子弹与敌机是否碰撞
  return setInterval(function(){
   
   var bullets=$(".bullet");
   
   var enemys=$(".enemy");
   for(var i=0;i<bullets.length;i++){
    for(var j=0;j<enemys.length;j++){
     // var a=$(bullets[i]).height()/2+parseFloat($(bullets[i]).css("top"))-$(enemys[j]).height()/2-parseFloat($(enemys[j]).css("top"));
     // var b=$(enemys[j]).width()/2+parseFloat($(enemys[j]).css("left"))-$(bullets[i]).width()/2-parseFloat($(bullets[i]).css("left"));
     // //console.log(a)
     // var c=$(bullets[i]).height()/2+$(enemys[j]).width()/2
     // console.log(b);
     // if(a*a+b*b<c*c){
     //  $(enemys[j]).remove();
     //  $(bullets[i]).remove();
     //  break;
     //console.log("aaa")
     // }
     if (kissAB(bullets[i],enemys[j])){
      //console.log("ttt")
      $("#mp3destroy")[0].play();
      $(enemys[j]).remove();
      $(bullets[i]).remove();
      
       break;
     }
    }
   }
   //检测玩家与敌机是否碰撞
   for(var j=0;j<enemys.length;j++){
    if(kissAB(plain,enemys[j])){
     alert("game over");
     gameover();
     
     break;
     
    }
    
    
   }
   
   
  },1);
  
  
 }
 
 function monitorkey(){
  return setInterval(function() {
   //向上运动
   //默认方向 上 右 下 左 
   if (pdirection[0] == 1) {
    // console.log(parseFloat($(plain).css("top")))
    if (parseFloat($(plain).css("top")) >= 5)
     // plain.style.top.CSSValue=plain.style.top+10
     $(plain).css({
      "top": parseFloat($(plain).css("top")) - move
     });
    else
     $(plain).css({"top":0});
    // move++
  
   }
   if (pdirection[2] == 1) { //向下运动
    // console.log(parseFloat($(plain).css("top")))
    if (parseFloat($(plain).css("top")) <= 513)
     // plain.style.top.CSSValue=plain.style.top+10
     $(plain).css({
      "top": parseFloat($(plain).css("top")) + move
     });
    else
     $(plain).css({"top":$(stage).Height-$(plain).Height});
    // move++
  
   }
   if (pdirection[3] == 1) { //向左运动
    // console.log(parseFloat($(plain).css("top")))
    if (parseFloat($(plain).css("left")) >= -10)
     // plain.style.top.CSSValue=plain.style.top+10
     $(plain).css({
      "left": parseFloat($(plain).css("left")) - move
     });
    // move++
  
   }
   if (pdirection[1] == 1) { //向右运动
    // console.log(parseFloat($(plain).css("top")))
    if (parseFloat($(plain).css("left")) <= 270)
     // plain.style.top.CSSValue=plain.style.top+10
     //console.log(parseFloat($(plain).css("right")))
     $(plain).css({
      "left": parseFloat($(plain).css("left")) + move
     });
    // move++
  
   }
   if (pdirection[4] == 1) { //炮弹向上运动
    // console.log(parseFloat($(plain).css("top")))
    //var bulletx=parseFloat($(plain).css("left"))+$(plain).width()/2-bulletw/2;
    // console.log($(plain).css("left"))
    // console.log(parseFloat($(plain).css("left")))
    // console.log(parseFloat($(plain).css("top"))-parseFloat($(bullet).css("height")));
    //var bullety=parseFloat($(plain).css("top"))-bulleth;
  
    // plain.style.top.CSSValue=plain.style.top+10
    // $(plain).css({"left":parseFloat($(plain).css("left"))+move});
    // move++
    // $("<div class=\"bullet\"></div>")  转义方法
    //$("<div class='bullet'></div>").css({"left":bulletx,"top":bullety}).appendTo(stage);
  
  
   }
  
  }, 1);
 }
 // 载入背景音乐
 // $("#mp3bg").play();
 var mp3bg=document.getElementById("mp3bg");
 // var timerbg= setInterval(function(){
 //  mp3bg.currentTime=0;
 //  // mp3bg.controls
 //  mp3bg.play();
 //  clearInterval(timerbg);
 // })
 $("#buttonmusic").click();
 $("#buttonmusic").click(function(){
  if($(this).html()=="音乐"){
   $(this).html("暂停");
   //mp3bg.currentTime=0;
   // mp3bg.controls
   mp3bg.play();
   //clearInterval(timerbg);
  }else{
   //mp3bg.currentTime=0;
   // mp3bg.controls
   mp3bg.pause();
   $(this).html("音乐");
   
  }
  
 })
 
 
 function startgame(){
  //碰撞检测开始
  timerkiss=monitorkiss();
  //重置方向键盘
  console.log(pdirection);
  pdirection = [0, 0, 0, 0, 0];
  
  //生成玩家飞机
  // var timertmp=setInterval(function(){
   //var aa=$(stage).height()-$(plain).height()*2
   //console.log(aa)
  //  if(parseFloat($(plain).css("top"))<($(stage).height()-$(plain).height()*2)){
  //   //alert("33");
    
  //   console.log("666");
  //   clearInterval(timertmp);
    
  //  }else
  //   plain.style.cssText="top:"+(parseFloat($(plain).css("top"))-5)+"px;left:"+$(stage).width()/2-$(plain).width()/2+"px;";
   
  // });
 }
 
 function gameover(){
  //碰撞检测停止
  clearInterval(timerkiss);
  // alert("gameover");
  //移除玩家飞机
  // plain.remove();
  //移除玩家飞机使用隐藏的方法
  //plain.hidden=true;
  
  //移除所有敌机
  $(".enemy").remove();
  
  // console.log(pdirection)
  //移除玩家飞机，使用隐藏的方法
  // $(plain).hide();
  plain.style.cssText="top:"+$(stage).height()+"px;left:"+($(stage).width()/2-$(plain).width()/2+"px");
  if(confirm("你玩不起，你个小垃圾，你没有实力")){
   startgame();
   
  }
  //重置方向键盘
  pdirection = [0, 0, 0, 0, 0];
  
  
 }
 
});


// 第二章图片
// $(function(){
//  //这里写代码的时候是可以控制所有htmldom节点的
//  //dom

//  var stage=document.getElementById("stage"); //获取舞台节点
//  var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
//  // console.log(bg1) //检查是否捕获bg1
//  var topval=-968;
//  // bg1.style.cssText="top: -30px;"
//  var t2=setInterval(function(){
//   // console.log("ddd")
//   // console.log(bg1.style.cssText)
//   // bg1.scrollTop=bg1.scrollTop+10;
//   bg2.style.cssText="top: "+topval+"px";
//   topval+=1
//   //topval++背景向下移动 

//  },70);

//  // t1.clearInterval(); //时钟停止

// });
// alert("4444")  不使用jq的话无法完全加载再弹弹框

// function myapp(){
//  定义函数的基本格式

// }


// function xxxx (){
//   // console.log("ddd")
//   console.log(bg1.style.cssText)
//   // bg1.scrollTop=bg1.scrollTop+10;
//   bg1.style.cssText="top: "+topval+"px";
//   topval+=1

//  }

css:

#stage{
 width: 320px;
 height: 568px;
 background-color: antiquewhite;
 color: white;
 overflow: hidden;
 margin: auto;
 position: relative;
 
}
.bg1{
 background-image: url(../img/bg_01.png);
 height: 768px;
 width: 100%;
 position: absolute;
 top: -200px;
 /* z-index: 5; */
}
.bg2{
 
 background-image: url(../img/bg_01.png);
 height: 768px;
 width: 100%;
 position: absolute;
 top: -968px;
 /* z-index: 5; */
}
.plain{
 height: 53px;
 width: 67px;
 background-image: url(../img/plane_blue_01.png);
 z-index: 11;
 position: absolute;
 bottom: 0;
 background-size: 100% 100%;
}

.enemy{
 height: 53px;
 width: 67px;
 position: absolute;
 background-size: 100% 100%;
 
}
.enemy1{
 
 background-image: url(../img/enemy_04.png);
 /* z-index: 10; */
 height: 40px;
 width: 50px;
 top:0;
 left: 20px;
}
.enemy2{
 
 background-image: url(../img/enemy_03.png);
 /* z-index: 10; */
 top:0;
 left: 90px;
 
}
.enemy3{
 background-image: url(../img/enemy_02.png);
 /* z-index: 10; */
 top:0;
 left: 160px;
 height: 70px;
}
.enemy4{
 background-image: url(../img/enemy_01.png);
 /* z-index: 10; */
 top:0;
 left: 230px;
 
}
/* 子弹 */
.bullet{
 background-image: url(../img/bullet_01.png);
 width: 50px;
 height: 65px;
 position: absolute;
 /* z-index: 10; */
 
 
 
}
/* 按钮 */
.func{
 width: 40px;
 height: 20px;
 position: absolute;
 z-index: 12;
 background-color: skyblue;
 opacity: 0.6;
 color: white;
 cursor: pointer;
}
.func:hover{
 opacity: 1;
 transition-duration: 1s;
 
 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。


标签：源码网站源码
上一篇：js+canvas实现飞机大战
下一篇：没有了

【JQ】无限滚动条-jquery.infinitescroll.j

query多选下拉框插件 jquery-multiselect(

对JavaScript对象数组按指定属性和排序方向

毕向东Html、css、JavaScript视频教程(黑马

手机站jQuery自动完成插件autoComplete.js

onmouse事件的用法大全

Javascript新手教程：从入门到精通（完整版

js 下拉级联菜单

JavaScript (基本教程)

Adobe AIR教程for HTML/JAVASCRIPT开发者

JS面向对象教程

深入理解JavaScript系列（22）：S.O.L.I.D

js/jQuery教程阅读排行

最新文章

热门源码

  • 源代码
  • asp源码
  • 多多淘宝客
  • 网页作业
  • 登录界面素材
  • html网页模板
  • asp
  • cms源码
  • 企业网页设计模板
  • 手机源码
  • 电脑报电子版
  • 织梦cms模板
  • 社区论坛
  • 学校网站模板
  • 导航条代码
  • asp下载
  • asp源代码
  • 网页制作模板下载
  • 小偷程序
  • 网站源文件
  • asp cms
  • 网页模版
  • 源码大全
  • 商城系统源码
  • asp文件
  • 素材解析平台
  • 简单网页模板
  • 苹果cms10模板
  • 免费网页模板
  • 静态网页
  • 门户网站源码
  • 个人博客模板
  • 网页代码
  • 网站源码出售
  • 小区物业管理系统
  • 网页模板下载
  • 网页制作代码
  • 后台
  • 模板之家
  • html代码大全
  • 网页框架
  • PHP源码
  • asp源代码下载
  • asp.net 源码
  • 网站源代码
  • 帝国网站管理系统
  • 网站 模板
  • html个人主页模板
  • 网站模板
  • 论坛源码

    • 服务咨询

    QQ-xxxxxxxx

    （周一至周六 9:00——18:00） 在线客服
    整站源码
    影视模板 帝国cms模板 商城源码 discuz模板 wordpress模板 其他源码 app源码
    网站模板
    PHP源码 ASP源码 .NET源码 其他VIP源码 手机VIP源码
    免费源码
    协同办公 留言日记 社区论坛 上传下载 电子商务 广告排行 投票调查
    关于我们
    关于我们 免责声明 注册协议 联系我们
    Copyright © 版权所有 本站资源均来自互联网或会员发布，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！