用JS编程飞机大战游戏的过程和代码是什么

本文实例为大家分享了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;
    ibullet.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;
    ibullet.length;
i++){
    
  //  var tmp_bullet=parsefloat($(bullet[i]).css("top"));
    
  //  // console.log(tmp_bullet);

  //  if(tmp_bullet0){
    
  //   $(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;
    ia.length;
i++){
    
 //   for(var j=0;
    jb.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*bc*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*bc*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;
    ibullets.length;
i++){
    
    for(var j=0;
    jenemys.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*bc*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;
    jenemys.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;

 
 
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！