我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

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 class="lazy" data-src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script class="lazy" data-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" class="lazy" data-src="music/background.mp3" autoplay loop>
                当前浏览器不支持audio
            </audio>
            <audio id="mp3shoot" class="lazy" data-src="music/shoot.mp3" >
                当前浏览器不支持audio
            </audio>
            <audio id="mp3destroy" class="lazy" data-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;
    
}
.bg2{
    
    background-image: url(../img/bg_01.png);
    height: 768px;
    width: 100%;
    position: absolute;
    top: -968px;
    
}
.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);
    
    height: 40px;
    width: 50px;
    top:0;
    left: 20px;
}
.enemy2{
    
    background-image: url(../img/enemy_03.png);
    
    top:0;
    left: 90px;
    
}
.enemy3{
    background-image: url(../img/enemy_02.png);
    
    top:0;
    left: 160px;
    height: 70px;
}
.enemy4{
    background-image: url(../img/enemy_01.png);
    
    top:0;
    left: 230px;
    
}

.bullet{
    background-image: url(../img/bullet_01.png);
    width: 50px;
    height: 65px;
    position: absolute;
    
    
    
    
}

.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;
    
    
}

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

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

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

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

2024-04-02

javascript实现飞机大战小游戏

2024-04-02

JavaScript实现飞机大战游戏

2024-04-02

javascript实现简单飞机大战小游戏

2024-04-02

java实现飞机大战小游戏

2024-04-02

Vue实现飞机大战小游戏

2024-04-02

用JS实现飞机大战小游戏

2024-04-02

JavaScript实现微信飞机大战游戏

2024-04-02

Python飞机大战小游戏

2023-09-08

python实现简单飞机大战小游戏

2024-04-02

java如何实现飞机大战小游戏

本篇内容介绍了“java如何实现飞机大战小游戏”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！MyPanel类package P;impor
2023-07-01

java实现飞机大战游戏

2024-04-02

原生JS实现飞机大战小游戏

2024-04-02

C语言实现飞机大战小游戏

2024-04-02

Python实战小游戏飞机大战详解

2024-04-02

C++实现飞机大战游戏

2024-04-02

jQuery实现飞机大战游戏

2024-04-02

怎么用Python实现小游戏飞机大战

本篇内容介绍了“怎么用Python实现小游戏飞机大战”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一、环境安装本文是写的游戏代码，基于Pyg
2023-06-25

js+css实现飞机大战游戏

2024-04-02

jquery+css+html实现飞机大战游戏

2024-04-02

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈