JS实现飞机大战(1)

最新推荐文章于 2024-07-12 15:18:46 发布
最新推荐文章于 2024-07-12 15:18:46 发布
阅读量399 收藏 8
点赞数 5
分类专栏： 程序员 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84092360/article/details/138478956
版权
本文详细介绍了使用JavaScript和HTML5实现的一款简易飞机大战游戏，包括敌方飞机生成、子弹控制、碰撞检测以及提供一套针对Android开发的学习资料，旨在帮助初级工程师提升技能。
摘要由CSDN通过智能技术生成 
</div>

<div id="end">又菜又爱玩</div>

<script>

    var mainEle=document.querySelector('#main')

    var startEle=document.querySelector('#start')

    var scoreEle=document.querySelector('.score')

    var endEle=document.querySelector('#end')

//敌方飞机数组

    var enemyarry=[]

//子弹数组

    var bulletarry=[]

    let score=0

    //封装随机数函数

    function getRandom(m,n){

        return Math.floor(Math.random()*(n-m)+m)

    }

    //开始

    startEle.onclick=function(){

        startEle.style.display='none'

    //创建敌方飞机

    function Enemy(imgsrc,x,y,speed){

        this.imgNode=document.createElement('img')

        this.imgsrc=imgsrc

        this.x=x

        this.y=y

        this.speed=speed

        this.init=function(){

            this.imgNode.src=this.imgsrc

            this.imgNode.style.position='absolute'

            this.imgNode.style.left=this.x+"px"

            this.imgNode.style.top=this.y+"px"

//加入敌方飞机到节点下

            mainEle.appendChild(this.imgNode)

        }

        this.init()

//移动函数

        this.move=function(){

            this.imgNode.style.top=parseInt(this.imgNode.style.top) +this.speed+'px' 

            

        }

    }

    function getEnemy(){

        let newEnemy=new Enemy('images/neemy2.png',getRandom(0,560),-getRandom(0,30),getRandom(0,10)+10)

//创建的敌方飞机加入到敌方数组

        enemyarry.push(newEnemy)

    }

    setInterval(function(){

        getEnemy()

    },1000)

    function enemyMove(){

       for(let i=0;i<enemyarry.length;i++){

//执行移动函数

           enemyarry[i].move()

//判定如果超出画面，移出敌方飞机

           if(parseInt(enemyarry[i].imgNode.style.top)>650){

            mainEle.removeChild(enemyarry[i].imgNode)

            enemyarry.splice(i,1)

            }

       }

    }

    setInterval(enemyMove,50)

    //背景图动画

    function background(){

        

        let a=0;

        setInterval(function(){

            a=a+1

//背景图移动

            mainEle.style.background=`url(images/background.webp) 0px ${a}px`

            if(a==840){

                a=0

            }

        },10)

    }background()

    //创建我方飞机

    function myplane(imgsrc){

        this.myplaneNode=document.createElement('img')

        // myplaneNode.src='images/myplane2png.png'

        this.imgsrc=imgsrc

       

        this.init=function(){

            this.myplaneNode.src=this.imgsrc

            this.myplaneNode.style.position='absolute'

            mainEle.appendChild(this.myplaneNode)

        }            

        this.init()

        this.move=function(){

            setInterval(function(){

//移动时执行X，Y赋值给我方飞机

            document.onmousemove=function(e){

            

            let l1=mainEle.offsetLeft

            let t1=mainEle.offsetTop

            

            let l=myplaneNode.clientWidth/2

            let t=myplaneNode.clientHeight/2

            let x=e.clientX

            let y=e.clientY

            x1=e.clientX-l-l1

            y1=e.clientY-t-t1

            if(x1<-l){

                x1=-l

            }

            if(x1>600-t){

                x1=600-t

            }

        

           myplaneNode.style.top=y1+'px'

           myplaneNode.style.left=x1+'px'

        getBullet(x1,y1)

    //判断游戏结束

        for(let i=0;i<enemyarry.length;i++){

//循环敌方飞机坐标

            let enTop=parseInt(enemyarry[i].imgNode.style.top)

            let enLeft=parseInt(enemyarry[i].imgNode.style.left)

            if(enLeft>=x1 && enLeft<=x1+50 &&enTop>=y1 &&enTop<=y1+60){

//弹出结束界面

                endEle.style.display='block'

//移出画面

                mainEle.remove()

            }

        }

        }

    },50)   

        }

        this.move()

    }

    myplane('images/myplane2png.png')

    function getBullet(x1,y1){

//创建子弹

            let newbullet=new bullet('images/20181227204057448.png',x1+21,y1-20,10)

//创建的子弹加入到子弹数组里

            bulletarry.push(newbullet) 

        }   

    //创建子弹

    function bullet(imgsrc,x,y,speed){

        this.imgNode=document.createElement('img')

        this.imgsrc=imgsrc

        this.x=x

        this.y=y

        this.speed=speed

        this.init=function(){

            this.imgNode.src=this.imgsrc

            this.imgNode.style.position='absolute'

            this.imgNode.style.left=this.x+"px"

            this.imgNode.style.top=this.y+"px"

//子弹加入到页面中

            mainEle.appendChild(this.imgNode)

            

        }

        this.init()

//子弹移动函数

        this.move=function(){

            this.imgNode.style.top=parseInt(this.imgNode.style.top)-this.speed+"px"

            

        }



    }

   function bulletMove(){

//遍历所有子弹判定如果超出界面，移出子弹

       for(let i=0;i<bulletarry.length;i++){

           bulletarry[i].move()

           if(parseInt(bulletarry[i].imgNode.style.top)<-650){

            mainEle.removeChild(bulletarry[i].imgNode)

            bulletarry.splice(i,1)

          

           }

       }

   }

   setInterval(bulletMove,10)

    //碰撞函数

   function crash(){

        for(let i=0;i<bulletarry.length;i++){

            for(let j=0;j<enemyarry.length;j++){

//拿到子弹和敌方飞机X和Y坐标

                let blTop=parseInt(bulletarry[i].imgNode.style.top)

                let blLeft=parseInt(bulletarry[i].imgNode.style.left)

                let enTop=parseInt(enemyarry[j].imgNode.style.top)

                let enLeft=parseInt(enemyarry[j].imgNode.style.left)

                if(blTop>=enTop && blTop<=enTop+30 && blLeft>=enLeft && blLeft<=enLeft+40){

//判定生效移出敌方飞机和子弹

                    mainEle.removeChild(bulletarry[i].imgNode)

                    bulletarry.splice(i,1)

                    mainEle.removeChild(enemyarry[j].imgNode)

                    enemyarry.splice(j,1)

//分数加一

                    score++

                }

            }

        }

        scoreEle.innerHTML=score

   }

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
…(img-pwWZXBKs-1714932134517)]

[外链图片转存中…(img-zR0RzeT1-1714932134517)]

[外链图片转存中…(img-oKDIppJI-1714932134518)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84092360
关注
专栏目录
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
【项目】全民飞机大战-H5版-实训课程
最新发布
yueyehuguang的博客
08-16 1125
它是根据专业教学计划的要求，在教师指导下对学生进行的Web前端技术专业技能的综合训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作能力的培养过程。因此，加强实践教学环节，搞好实训教学，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。上面的代码中，我们分别为上下左右的按键设置了开关，如果按下了上键，就把向上移动的开关打开，让玩家向上移动，如果松开了向上移动的开关，就把向上移动的开关关闭，以此类推。
纯js实现飞机大战飞机大战.zip
06-30
纯js实现飞机大战，原生js手写，分别有键盘版本和鼠标控制版本，ES6实现
js实现飞机大战小游戏
10-14
主要为大家详细介绍了js实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现飞机大战_js飞机大战代码
2401_84435192的博客
07-12 728
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
HTML5游戏全民飞机大战源码-其他
06-12
HTML5游戏全民飞机大战源码，玩法较为简单，飞机掉落速度越来越快，游戏结束后有分数显示，可以用来做分数比拼。 其他功能有需求可以继续开发，比较适合学习使用！
JS实现飞机大战
weixin_64925940的博客
04-06 2910
JS实现飞机大战
JavaScript 实现飞机大战
qqrrjj2011的博客
03-09 1485
JavaScript实现飞机大战示例
JS编程实现-飞机大战游戏
05-04
游戏开发入门项目-飞机大战，使用js语言开发的web项目。
javascript实现飞机大战
01-02
打开html中的start界面开始运行，我方飞机发射子弹攻击敌机，我方飞机可上下左右移动，敌方飞机有小飞机，中飞机，大飞机；一共有5滴血，血量消耗完了之后，游戏结束，有飞机碰撞效果，碰撞期间不掉血，可以暂停游戏——出处（知了堂期末大作业）
用js实现的飞机大战的代码以及素材分享给大家
04-24
用js实现的飞机大战的代码以及素材分享给大家
原生JS简单版飞机大战游戏
11-07
原生JS简单版飞机大战游戏
原声js版飞机大战游戏
03-01
完全原生的js编写的飞机大战游戏，涵盖了所有的js基础知识，是学习js的好帮手，推荐参考。
js实现飞机大战源代码，雷电经典游戏，web高分大作业，小白必看！
02-17
js实现飞机大战源代码，雷电经典游戏，web高分大作业，小白必看！ js实现飞机大战源代码，雷电经典游戏，web高分大作业，小白必看！ js实现飞机大战源代码，雷电经典游戏，web高分大作业，小白必看！ js实现飞机大战...
js实现飞机大战
w909252427的博客
03-14 188
简单版js写的飞机大战
Js实现飞机大战
42384718的博客
07-21 1162
CSS部分的代码： <style> canvas{ border: 1px solid #000; display: block; margin: 50px auto } </style> JavaScript代码： <canvas id="canvas" width="480" height="640"></canvas> <script> // 构造函数 var canvas = document.getElemen
用JS实现飞机大战小游戏
joyouscola的博客
04-06 1055
小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个 先制作好要做好的几步以及背景样式 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var start = 0; // 开始阶段 var starting = 1; // 开始的加载阶段 var running = 2; // 游戏阶段
js 飞机大战
weixin_30256505的博客
09-29 154
完整文件及代码可以在网盘下载，下载链接为：https://pan.baidu.com/s/1hs7sBUs 密码: d83x 飞机大战css定义： <style> #container{　　 width:320px; height:568px; background: url(images/start.png); margin:20px auto; position...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值