第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-7 击落敌机

最新推荐文章于 2022-09-15 15:42:47 发布
老张谋
最新推荐文章于 2022-09-15 15:42:47 发布
阅读量281
点赞数
分类专栏：前端技术文章标签： JavaScript
本文链接：https://blog.csdn.net/wgf5845201314/article/details/90614960
版权
前端技术专栏收录该内容
111 篇文章 4 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>游戏开发-主游戏区域</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #game{
            width: 400px;
            height: 600px;
            position: relative;
            background: url("./img/10.png") no-repeat 0 -77px;
            overflow: hidden;
        }
        #player{
            position: absolute;
            top: 372px;
            left: 158px;
        }
    </style>
</head>
<body>
    <!-- 背景主图 -->
    <div id="game">
        <!-- 玩家的飞机 -->
        <img src="./img/16.png" alt="" id="player">
        <!-- 敌方飞机   默认隐藏看不见-->
        <img src="./img/e1.png" alt="" id="e0" style="position: absolute;display:none">
        <img src="./img/e2.png" alt="" id="e1" style="position: absolute;display:none">
        <img src="./img/e3.png" alt="" id="e2" style="position: absolute;display:none">
        <img src="./img/e1.png" alt="" id="e3" style="position: absolute;display:none">
        <img src="./img/e2.png" alt="" id="e4" style="position: absolute;display:none">
        <img src="./img/e3.png" alt="" id="e5" style="position: absolute;display:none">
        <!-- 子弹的产生 -->
        <img src="./img/eshot0.png" alt="" id="eshot0" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot1" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot2" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot3" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot4" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot5" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot6" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot7" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot8" style="position: absolute;display:none">
        <img src="./img/eshot0.png" alt="" id="eshot9" style="position: absolute;display:none">
    </div>

    <script>
    // 背景地图移动
       var game = document.getElementById("game");
       var bg_m = -77;
    //通过setInterval 设置地图循环  if 判断地图的位置
       setInterval(function(){
            bg_m+=2;
            if(bg_m>=187){
                bg_m=-77;
            }
            game.style.backgroundPosition="0px"+" "+bg_m+"px";
       },50)

    //    飞机的移动
    //    键盘事件 w a s d 上下左右
    //    飞机向上走    w/向上的箭头  飞机距离屏幕顶部的位置
    //    relative   改变top 的相对位置
       var player = document.getElementById("player");
       //为当前网页添加键盘事件
       window.document.onkeydown = function(ent){
           //兼容火狐和IE
           var event = ent || window.event;
           //获取键盘
           //alert(event.keyCode);
           //  w 87   上 38  D 68  右39
           switch(event.keyCode){
               //飞机的移动
               case 87:   //上
               case 38:
               // offsetTop 获取飞机到屏幕顶部的距离
               // 飞机不能超出屏幕的顶部  top值不能小于0
                   player.style.top = Math.max(0,(player.offsetTop-10))+"px";
               break;
               case 68:    //右
               case 39:
                    player.style.left = Math.min(406,(player.offsetLeft+10))+"px";
                    break;
               case 83:   //下
               case 40:
                    player.style.top = Math.min(424,(player.offsetTop+10))+"px";
                    break;
              case 65:   //左
              case 37:
                    player.style.left = Math.max(0,(player.offsetLeft-10))+"px";
                    break;
            //子弹的发射
            case 32:
            //获取飞机位置
               var x = player.offsetLeft+ 5;
               var y =player.offsetTop;
               doFire(x,y);
               break;
           }

           
           
       }
       //敌机的循环移动
       function doShow(){
               //随机出现敌机  0~5
               var i = Math.ceil(Math.random()*1000)%6;
               //获取对应的敌机
               var ee = document.getElementById("e"+i);
               //判断敌机是否可用
               if(ee.style.display == "none"){
                   ee.style.top = -82+"px";
                   ee.style.left = (Math.ceil(Math.random()*1000)%400)+"px";
                   ee.style.display = "block";
               }
               setTimeout("doShow()",2000);
           }

           //游戏的主线程
           //敌机移动
           function running(){
               //循环所有可见子弹，执行移动
               for(var i=0;i<10;i++){
                   //获取对应得子弹
                    var eshot = document.getElementById("eshot"+i);
                   //判断子弹是否可用
                    if(eshot.style.display=="block"){
                        eshot.style.top=(eshot.offsetTop-5)+"px";
                        if(eshot.offsetTop<-20){
                            eshot.style.display="none";
                            //调用碰撞检测
                            doCheck(eshot);
                            //炮弹飞出屏幕回收
                       if(eshot.offsetTop<-20){
                           eshot.style.display="none";
                       }
                        }
                    }
               }

                //循环所有敌机，执行移动
               for(var i=0;i<6;i++){
                   //获取对应的敌机
                   var ee = document.getElementById("e"+i);
                   //判断是否是可见的敌机  可见的可移动
                   if(ee.style.display=="block"){
                       ee.style.top=(ee.offsetTop+5)+"px";
                       //敌机飞出屏幕回收
                       if(ee.offsetTop>500){
                           ee.style.display="none";
                       }
                   }
               }
               //爆炸的循环
               for(var i=0;i<pplist.length;i++){
                   pplist[i].num++;
                   if(pplist[i].num>5){
                       pplist[i].style.disply="none";
                       pplist.splice(i);
                   }
               }
    
               //定时调用
               setTimeout("running()",30);
           }
   
     //发射子弹
       function doFire(x, y){
           //alert(x);
           //判断子弹是否可见，可见的再发射
           for(var i=0;i<10;i++){
               //获取对应得子弹
               var eshot = document.getElementById("eshot"+i);
               //判断子弹是否可用
               if(eshot.style.display=="none"){
                   eshot.style.left = x+"px";
                   eshot.style.top = y+"px";
                   eshot.style.display = "block";
                   return;
               }
           }
       }
       //定义存放爆炸的数组
       var pplist= new Array();
       //p碰撞检测  敌机和子弹相交
       function doCheck(eshot){
           //遍历素有敌机
           for(var i=0;i<6;i++){
               //获取对应得子弹
               var ee= document.getElementById("eshot"+i);
               //判断子弹是否可见
               if(ee.style.display =="block"){
                   //判断是否相交
                   var ex = ee.offsetLeft+13;
                   var ey = ee.offsetTop+15;
                   var px=eshot.offsetLeft;
                   var py=eshot.offsetTop;
                   if(py<ey && px>=ex && px<=ex+72){
                    ee.style.display ="none";
                    eshot.style.display ="none";
                    //添加爆炸场面
                    var pp=document.createElement("img");
                    pp.src="./img/jd_06.jpg";
                    pp.style.position="absolute";
                    pp.style.top=(py-130)+"px";
                    pp.style.left=(px-190)+"px";
                    pp.num=0;
                    pplist.push(pp);
                    game.appendChild(pp);
                   }
               }
           }
       }

       doShow();
       running();
    </script>
</body>
</html>
老张谋
关注
0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-7 击落敌机

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫
专栏目录