zoukankan      html  css  js  c++  java
  • JavaScript—飞机大战

    今天来写个游戏,飞机大战

    1,布局

    2,思路

      1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动。

      2,在自己飞机的上方,间隔1s生成子弹。子弹往上移动 当top:0 子弹消失

      3,每隔1s 产生敌机  top 0,left 随机,敌机向下移动,敌机超过边距时。敌机消失。

      4,子弹和敌机相遇时。子弹和敌机同时消失

    3,代码

       1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动。

      let view = document.getElementById('view');
        // 创建自己的飞机
        let air = document.createElement('div');
        air.id = 'air'
        document.body.appendChild(air)
        document.onmousemove = function (e) {
            e = e || window.event
            // 边距
            let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
            let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
            if (aX&&aY) {
                air.style.left = e.clientX - air.offsetWidth / 2 + 'px';
                air.style.top = e.clientY - air.offsetHeight / 2 + 'px'
            }
        }

     

          2,在自己飞机的上方,间隔1s生成子弹。子弹往上移动 当top:0 子弹消失

      //获取区域
        let view = document.getElementById('view');
        // 创建自己的飞机
        let air = document.createElement('div');
        air.id = 'air'
        document.body.appendChild(air)
        document.onmousemove = function (e) {
            e = e || window.event
            // 边距
            let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
            let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
            if (aX && aY) {
                air.style.left = e.clientX - air.offsetWidth / 2 + 'px';
                air.style.top = e.clientY - air.offsetHeight / 2 + 'px'
                ObJ_billet.bif=true
            }
        }
        let caerBl_time=setInterval(
            function () {
                if (ObJ_billet.bif){
                //在自己飞机的上方
                caeationBillet()
    
                }
            },1000 )
    
        //用来保存子弹数据
        let ObJ_billet = {
            name: 'billet_',
            num: 0,
            //是否在区域
            bif:false,
            arr: []//保存id,xy坐标
        }
    
        function run_Billet(bl,i) {
            let runBl_time=setInterval(function () {
                bl.style.top=bl.offsetTop-1+'px'
                ObJ_billet.arr[i] = bl.id + '|' +bl.offsetLeft + '|' +bl.offsetTop
                if (bl.offsetTop<0){
                    bl.parentNode.removeChild(bl);
    
                    clearInterval(runBl_time)
                }
            },30)
        }
        
        //xy 坐标
        function caeationBillet() {
            let billet = document.createElement('div')
            billet.className = 'bullet'
            billet.id = ObJ_billet.name + ObJ_billet.num;
            document.body.appendChild(billet)
            //子弹在飞机上方
            billet.style.left = air.offsetLeft+air.offsetWidth/2+ 'px'
            billet.style.top =air.offsetTop-billet.offsetHeight-1+ 'px'
            //保存数据
            ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' +billet.offsetLeft + '|' +billet.offsetTop
            //子弹运动
            run_Billet(billet,ObJ_billet.num)
            // 自增1
            ObJ_billet.num+=1
            //挡子弹有最多100个
            if (ObJ_billet.num>=100){
                ObJ_billet.num=0;
            }
    
        }  

     3,每隔1s 产生敌机  top 0,left 随机,敌机向下移动,敌机超过边距时。敌机消失。

    <script>
        //获取区域
        let view = document.getElementById('view');
        // 创建自己的飞机
        let air = document.createElement('div');
        air.id = 'air'
        document.body.appendChild(air)
        document.onmousemove = function (e) {
            e = e || window.event
            // 边距
            let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
            let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
            if (aX && aY) {
                air.style.left = e.clientX - air.offsetWidth / 2 + 'px';
                air.style.top = e.clientY - air.offsetHeight / 2 + 'px'
                ObJ_billet.bif=true
            }
        }
       let caerBl_time=setInterval(
            function () {
                if (ObJ_billet.bif){
                    //在自己飞机的上方
                    caeationBillet()
                    caeationHair()
    
                }
            },1000 )
    
        //用来保存子弹数据
        let ObJ_billet = {
            name: 'billet_',
            num: 0,
            //是否在区域
            bif:false,
            arr: []//保存id,xy坐标
        }
        let ObJ_Hair = {
            name: 'hair_',
            num: 0,
            arr: []//保存id,xy坐标
        }
        // 子弹运动
        function run_Billet(element,i) {
            let runBl_time=setInterval(function () {
                element.style.top=element.offsetTop-1+'px'
                ObJ_billet.arr[i] = element.id + '|' +element.offsetLeft + '|' +element.offsetTop
                // 超出边界消失
                if (element.offsetTop<0){
                    element.parentNode.removeChild(element);
                    clearInterval(runBl_time)
                }
            },30)
        }
    
        // 敌机运动
        function run_Hair(element,i) {
            let runHair_time=setInterval(function () {
                element.style.top=element.offsetTop+1+'px'
                ObJ_Hair.arr[i] = element.id + '|' +element.offsetLeft + '|' +element.offsetTop
                // 超出边界消失
                if (element.offsetTop>view.offsetHeight-element.offsetHeight){
                    element.parentNode.removeChild(element);
                    clearInterval(runHair_time)
                }
            },30)
        }
    
        //创建子弹
        function caeationBillet() {
            let billet = document.createElement('div')
            billet.className = 'bullet'
            billet.id = ObJ_billet.name + ObJ_billet.num;
            document.body.appendChild(billet)
            //子弹在飞机上方
            billet.style.left = air.offsetLeft+air.offsetWidth/2+ 'px'
            billet.style.top =air.offsetTop-billet.offsetHeight-1+ 'px'
            //保存数据
            ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' +billet.offsetLeft + '|' +billet.offsetTop
            //子弹运动
            run_Billet(billet,ObJ_billet.num)
            // 自增1
            ObJ_billet.num+=1
            //挡子弹有最多100个
            if (ObJ_billet.num>=100){
                ObJ_billet.num=0;
            }
        }
        // 创建敌机
        function caeationHair() {
            let hair = document.createElement('div')
            hair.className = 'hair'
            hair.id = ObJ_Hair.name + ObJ_Hair.num;
            view.appendChild(hair)
            //飞机由上往下 left随机大小0到view宽度
            let random_L=randomNum(0,view.offsetWidth-hair.offsetWidth)
            hair.style.left = random_L+ 'px'
            hair.style.top =0+ 'px'
            ObJ_Hair.arr[ObJ_Hair.num] = hair.id + '|' +hair.offsetLeft + '|' +hair.offsetTop
    
            run_Hair(hair,ObJ_Hair.num)
            // 自增1
            ObJ_Hair.num+=1
            //飞机有最多100个
            if (ObJ_Hair.num>=100){
                ObJ_Hair.num=0;
            }
        }
    
        //生成从minNum到maxNum的随机数
        function randomNum(minNum,maxNum){
           return parseInt(Math.random()*(maxNum-minNum+1)+minNum)
    
        }
    
    </script>
    

      

      4,子弹和敌机相遇时。子弹和敌机同时消失

         

    //搜索所有的子弹,相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you     top 子弹<=飞机
    ript>
        //获取区域
        let view = document.getElementById('view');
        // 创建自己的飞机
        let air = document.createElement('div');
        air.id = 'air'
        document.body.appendChild(air)
        document.onmousemove = function (e) {
            e = e || window.event
            // 边距
            let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
            let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
            if (aX && aY) {
                air.style.left = e.clientX - air.offsetWidth / 2 + 'px';
                air.style.top = e.clientY - air.offsetHeight / 2 + 'px'
                ObJ_billet.bif = true
            }
        }
        let caerBl_time = setInterval(
            function () {
                if (ObJ_billet.bif) {
                    //在自己飞机的上方
                    caeationBillet()
                    caeationHair()
                    //搜索所有的子弹,相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you     top 子弹<=飞机
                    for (let i = 0; i < ObJ_billet.arr.length; i++) {
                        let barr=ObJ_billet.arr[i].split('|')
                        for (let j=0;j<ObJ_Hair.arr.length;j++){
                            let harr=ObJ_Hair.arr[j].split('|')//id x y
                            if (document.getElementById(barr[0])&&document.getElementById(harr[0])){
                            let yif=parseInt(barr[2])<=parseInt(harr[2]) //Y相遇
                            let xif=parseInt(barr[1])>=parseInt(harr[1])&&parseInt(barr[1])<=parseInt(harr[1])+34
                            if (yif&&xif){
                            //消失元素 关闭记时器
                                let billet_a=document.getElementById(barr[0])
                                let hair_a=document.getElementById(harr[0])//获取敌机
    
                                billet_a.parentNode.removeChild(billet_a)//删除子弹
                                hair_a.parentNode.removeChild(hair_a)//删除敌机
                                clearInterval(runBl_time)
                                clearInterval(runHair_time)
                            }}
                        }
                    }
                }
            }, 1000)
    
        //用来保存子弹数据
        let ObJ_billet = {
            name: 'billet_',
            num: 0,
            bif: false,
            //是否在区域
            arr: []//保存id,xy坐标
        }
        let ObJ_Hair = {
            name: 'hair_',
            num: 0,
            arr: []//保存id,xy坐标
        }
        let runBl_time=null;//子弹定时器
        let runHair_time=null;//飞机定时器
        // 子弹运动
        function run_Billet(element, i) {
            runBl_time = setInterval(function () {
                element.style.top = element.offsetTop - 1 + 'px'
                ObJ_billet.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop
                // 超出边界消失
                if (element.offsetTop < 0) {
                    element.parentNode.removeChild(element);
                    clearInterval(runBl_time)
                }
            }, 30)
        }
    
        // 敌机运动
        function run_Hair(element, i) {
            runHair_time = setInterval(function () {
                element.style.top = element.offsetTop + 1 + 'px'
    
                ObJ_Hair.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop + '|' + ''
                // 超出边界消失
                if (element.offsetTop > view.offsetHeight - element.offsetHeight) {
                    element.parentNode.removeChild(element);
                    clearInterval(runHair_time)
                }
            }, 30)
        }
    
        //创建子弹
        function caeationBillet() {
            let billet = document.createElement('div')
            billet.className = 'bullet'
            billet.id = ObJ_billet.name + ObJ_billet.num;
            document.body.appendChild(billet)
            //子弹在飞机上方
            billet.style.left = air.offsetLeft + air.offsetWidth / 2 + 'px'
            billet.style.top = air.offsetTop - billet.offsetHeight - 1 + 'px'
            //保存数据
            ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' + billet.offsetLeft + '|' + billet.offsetTop + '|' + '1'
            //子弹运动
            run_Billet(billet, ObJ_billet.num)
            // 自增1
            ObJ_billet.num += 1
            //挡子弹有最多100个
            if (ObJ_billet.num >= 100) {
                ObJ_billet.num = 0;
            }
        }
    
        // 创建敌机
        function caeationHair() {
            let hair = document.createElement('div')
            hair.className = 'hair'
            hair.id = ObJ_Hair.name + ObJ_Hair.num;
            document.body.appendChild(hair)
            //飞机由上往下 left随机大小0到view宽度
            let random_L = randomNum(view.offsetLeft, view.offsetLeft + view.offsetWidth - hair.offsetWidth)
            hair.style.left = random_L + 'px'
            hair.style.top = 0 + 'px'
            ObJ_Hair.arr[ObJ_Hair.num] = hair.id + '|' + hair.offsetLeft + '|' + hair.offsetTop
    
            run_Hair(hair, ObJ_Hair.num)
            // 自增1
            ObJ_Hair.num += 1
            //飞机有最多100个
            if (ObJ_Hair.num >= 100) {
                ObJ_Hair.num = 0;
            }
        }
    
        //生成从minNum到maxNum的随机数
        function randomNum(minNum, maxNum) {
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
    
        }

     总结 

      BUG 有点多 效果可以实现 有点卡顿  等我调试 调试  大战BUG

  • 相关阅读:
    关于在MAC上进行 LARAVEL 环境 Homestead 安装过程记录
    js 贷款计算器
    js 实现阶乘
    js 两点间距离函数
    composer Your requirements could not be resolved to an installable set of packages
    vue 项目优化记录 持续更新...
    vue 项目打包
    vue 真机调试页面出现空白
    vue 真机调试
    谈谈-Android状态栏的编辑
  • 原文地址:https://www.cnblogs.com/ruogu/p/10818882.html
Copyright © 2011-2022 走看看