JavaScript实现飞机大战_js飞机大战代码

于 2024-07-12 15:18:46 发布
阅读量685 收藏 11
点赞数 27
分类专栏： 程序员 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84435192/article/details/140380231
版权

在这里插入图片描述

绘制我方飞机

//创建我机
Plane.prototype.createMyPlane=function() {
    var image,myPlane,sx=0,sy=0,sWidth=132,sHeight=86,dx=200,dy=530,dWidth=132,dHeight=86;
    image = this.imgObj['common']['myplane1'];
    myPlane = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
    this.renderArr2.push(myPlane);
    this.myPlane=myPlane;
    
    //清除自己
    var obj=this;
    myPlane.destory=function(){
        clearInterval(this.timmer);
        clearInterval(this.boomTimmer);
        obj.myPlane=null;
        //游戏结束
        obj.flag='end';
    }
    //爆炸函数
    myPlane.boomIndex=1;
    myPlane.boom=function(){
        obj.boomMusic.play();
        //切换图片，切换完成，清除定时器
        myPlane.boomTimmer = setInterval(doboom,100);
    }

    function doboom(){
        if(myPlane.boomIndex>9){//爆炸完成
            //清除当前飞机
            myPlane.destory();
        }
        myPlane.image = obj.imgObj['myplane'][myPlane.boomIndex++];
    }
}

修改绘制方法

//绘制入口
Plane.prototype.draw=function(){
   this.drawBG();
   this.render();//渲染到页面上
   this.createMyPlane();
   this.render2();
}

运行效果
在这里插入图片描述

鼠标事件（飞机跟随）

  1. 右键事件屏蔽
  2. 加入鼠标移动事件监听
  3. 鼠标移入飞机后，飞机跟随鼠标移动
  4. 边界判断，不允许超出上、下、左、右、边界。
//右键事件
	Plane.prototype.contextMenu=function(e){
		var e = e||window.event;
			//取消右键默认事件
		e.preventDefault && e.preventDefault();
	}

	//鼠标移动事件
	Plane.prototype.mouseMove=function(e){
		var w=132,h=86
		var pos = _.getOffset(e);//获取鼠标位置
		var plane=this.myPlane;
		if(!plane) return ;
		//鼠标在飞机范围内，才会跟随
		if(plane.isPoint(pos)){
			if(isOut.call(this,pos,w,h)){
				return ;
			}
			plane.dx=pos.x-w/2;
			plane.dy=pos.y-h/2;
		}
		//判断超出边界
		function isOut(pos,w,h){
			if(pos.x+w/2>=this.w){//超出右边
				return true;
			}
			if(pos.x-w/2<=0){//超出左边
				return true;
			}
			if(pos.y+h/2>=this.h){//超出下边
				return true;
			}
			if(pos.y-h/2<=0){//超出上边
				return true;
			}

			return false;
		}

	}
  1. 在init方法中加入鼠标监听
//给canvas2画布添加鼠标移动事件（因为画布2在上面）
canvas2.addEventListener('mousemove',this.mouseMove.bind(this));
//给canvas2画布添加鼠标右键事件
canvas2.addEventListener('contextmenu',this.contextMenu.bind(this));
  1. 加入重绘方法
//重新绘制
Plane.prototype.reDraw=function(){
    if(this.flag=='start'){
        this.render2();
    }
}
  1. 加入主线程，用来刷新重绘
//绘制入口
Plane.prototype.draw=function(){
    this.drawBG();
    this.render();//渲染到页面上
    this.createMyPlane();
    this.render2();

    //开启主线程
    this.timmer = setInterval(this.reDraw.bind(this),100);
}

运行效果

在这里插入图片描述

绘制子弹

思路：

  1. 飞机定时创建子单
  2. 每个子单有单独的线程，往上移动
  3. 每次移动后要判断与飞机的碰撞
//创建子弹
Plane.prototype.createBullet=function(plane){
    this.shootMusic.play();
    var image,bullet,sx=0,sy=0,sWidth=20,sHeight=30,dx=0,dy=0,dWidth=20,dHeight=30;
    //计算子弹的位置
    dx=plane.dx+plane.dWidth/2-10;
    dy=plane.dy;
    image = this.imgObj['common']['bullet'];
    bullet = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
    this.renderArr2.push(bullet);
    this.bullets.push(bullet);

    bullet.timmer = setInterval(move.bind(this),80);

    var obj=this;
    bullet.destory=function(){
        clearInterval(bullet.timmer);
        obj.clear(obj.renderArr2,bullet);
        obj.clear(obj.bullets,bullet);
    }

    //子弹的移动
    function move(){
        if(obj.flag!='start'){
            clearInterval(bullet.timmer);
        }
        bullet.dy-=20;
        if(bullet.dy<0){
            //删除当前子弹
            bullet.destory();
            return;
        }

        isHitEnemy(bullet);
    }
    //子弹击中敌机
    function isHitEnemy(bullet){
        var enemys = obj.enemyPlanes;
        var enemy;
        for(var i=0;i<enemys.length;i++){
            enemy=enemys[i];
            if(hitEnemy(bullet,enemy)){//如果某个敌机被击中
                obj.curCount+=10;
                obj.countObj.text=obj.curCount;
                //删除当前子弹
                bullet.destory();
                //飞机爆炸
                enemy.boom();
                if(obj.curCount>obj.count){//胜利
                    clearInterval(obj.myPlane.timmer);
                    obj.endShow('suc');
                    obj.flag='end';
                }
                break;
            }
        }
    }

    function hitEnemy(bullet,enemy){
        //因为子弹比飞机小，所以只需要判断子弹的4个点是否在飞机范围内，如果有则表示碰撞了
        //左上角
        var x1 = bullet.dx;
        var y1 = bullet.dy;
        //右上角
        var x2 = x1+bullet.dWidth;
        var y2 = y1;
        //右下角
        var x3 = x1+bullet.dWidth;
        var y3 = y1+bullet.dHeight;
        //左下角
        var x4 = x1;
        var y4 = y1+bullet.dHeight;
        //只要有一个点在范围内，则判断为碰撞
        if(comparePoint(x1,y1,enemy)|| comparePoint(x2,y2,enemy)||comparePoint(x3,y3,enemy)||comparePoint(x4,y4,enemy) ){
            return true;
        }
        return false;
    }
    //根据坐标判断是否在指定的范围内
    function comparePoint(x,y,plane){
        //大于左上角，小于右下角的坐标则肯定在范围内
        if(x>plane.dx && y >plane.dy
            && x<plane.dx+plane.dWidth && y <plane.dy+plane.dHeight	){
            return  true;
        }
        return false;
    }
}

在这里插入图片描述

定时绘制敌机

  1. 500毫秒创建一个敌机
  2. 有4种敌机，采用随机的方式来获取，创建不同的敌机。
  3. 敌机的x坐标是随机的、y坐标固定为负的图片的宽度。
  4. 飞机创建后开启定时任务向下移动。
  5. 当移动到最下方后，重新回到上方。
  6. 每次移动后会判断是否撞击了我放飞机。
//初始化敌机
Plane.prototype.initEnemyPlane=function(){
    //定时创建敌机
    this.eTimmer = setInterval(this.createEnemyPlane.bind(this),500);
}
//创建敌机
Plane.prototype.createEnemyPlane=function(){
    if(this.flag!='start'){
        clearInterval(this.eTimmer);
    }

    if(this.enemyPlanes.length>10) return ;

    var image,enemyPlane,sx=0,sy=0,sWidth=0,sHeight=0,dx=200,dy=0,dWidth=0,dHeight=0;
    var index = _.getRandom(1,5);

    image = this.imgObj['common']['enemy'+index];
    sWidth=dWidth=image.width;
    sHeight=dHeight=image.height;
    dx = _.getRandom(0,this.w-dWidth);
    dy = -dHeight;

    enemyPlane = new _.ImageDraw({image:image,sx:sx,sy:sy,sWidth:sWidth,sHeight:sHeight, dx:dx, dy:dy ,dWidth:dWidth,dHeight:dHeight});
    //this.renderArr2.push(enemyPlane);
    this.renderArr2.unshift(enemyPlane);
    this.enemyPlanes.push(enemyPlane);
    //清除自己
    var obj=this;
    enemyPlane.destory=function(){
        clearInterval(enemyPlane.boomTimmer);
        clearInterval(enemyPlane.timmer);
        obj.clear(obj.renderArr2,enemyPlane);
        obj.clear(obj.enemyPlanes,enemyPlane);
    }
    //爆炸函数
    enemyPlane.boomIndex=1;
    enemyPlane.boom=function(){
        obj.boomMusic.play();
        //切换图片，切换完成，清除定时器
        enemyPlane.boomTimmer = setInterval(doboom,100);
    }

    function doboom(){
        if(enemyPlane.boomIndex>6){//爆炸完成
            //清除当前飞机
            enemyPlane.destory();
        }
        enemyPlane.image = obj.imgObj['boom'+index][enemyPlane.boomIndex++];
    }
    
    enemyPlane.timmer = setInterval(move.bind(this),50);

    var obj = this;
    //移动
    function move(){
        if(obj.flag!='start'){
            clearInterval(enemyPlane.timmer);
            clearInterval(enemyPlane.boomTimmer);
        }
        enemyPlane.dy+=2;
        if(enemyPlane.dy>obj.h){//出界后重新回到上方
            enemyPlane.dx = _.getRandom(0,obj.w-dWidth);
            enemyPlane.dy = -dHeight;
            return ;
        }
        //判断与我机碰撞
        if(obj.myPlane && !obj.myPlane.hitFlag && hitMyPlane(enemyPlane,obj.myPlane)){
            obj.myPlane.hitFlag=true;
            //清除子弹发射定时器
            clearInterval(obj.myPlane.timmer);
            enemyPlane.boom();
            obj.myPlane.boom();
            obj.endShow('end');
        }
    }

    function hitMyPlane(enemy,myPlane){
        if(!enemy||!myPlane){
            return ;
        }
        //因为子弹比飞机小，所以只需要判断子弹的4个点是否在飞机范围内，如果有则表示碰撞了
        //左上角
        var x1 = enemy.dx;
        var y1 = enemy.dy;
        //右上角
        var x2 = x1+enemy.dWidth;
        var y2 = y1;
        //右下角
        var x3 = x1+enemy.dWidth;
        var y3 = y1+enemy.dHeight;
        //左下角
        var x4 = x1;
        var y4 = y1+enemy.dHeight;
        //只要有一个点在范围内，则判断为碰撞
        if(comparePoint(x1,y1,myPlane)|| comparePoint(x2,y2,myPlane)||comparePoint(x3,y3,myPlane)||comparePoint(x4,y4,myPlane) ){
            return true;
        }
        return false;
    }
    //根据坐标判断是否在指定的范围内
    function comparePoint(x,y,plane){
        //大于左上角，小于右下角的坐标则肯定在范围内
        if(x>plane.dx && y >plane.dy
            && x<plane.dx+plane.dWidth && y <plane.dy+plane.dHeight	){
            return  true;
        }
        return false;
    }
}

运行效果
在这里插入图片描述

碰撞分析（补充）

在这里插入图片描述
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210525184144286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLm

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

NzZG4ubmV0L2RrbTEyMzQ1Ng==,size_16,color_FFFFFF,t_70#pic_center)
从上面几个图可看出什么？因为图片是方形的，他们的4个顶点一定至少有一个在对方的范围内。再看一下从左边撞击的图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

最后加上计分的、胜利、失败等提示就完成了！

看到这里的大佬，动动发财的小手 点赞 + 回复 + 收藏，能【 关注 】一波就更好了。

代码获取方式：
订阅我的专栏《javascript精彩实例》后，可以查看专栏内所有的文章，并且联系博主免费获取你心仪的源代码，专栏的文章都是上过csdn热榜的，值得信赖，了解一下我的专栏！。

热门专栏推荐

【1】Java小游戏（俄罗斯方块、飞机大战、植物大战僵尸等）
【2】JavaWeb项目实战（图书管理、在线考试、宿舍管理等）

总结

  • 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

  • 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

  • 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

  • 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

2401_84435192
关注
专栏目录
JavaScript实现飞机大战
编程界明世隐的博客
08-04 3万+
系列目录 1. JavaScript 贪吃蛇游戏 2. JavaScript 俄罗斯方块 3. JavaScript 扫雷小游戏 4. JavaScript 网红太空人表盘 引言： 之前我有用Java写过一个飞机大战，感觉挺受欢迎的，有的小伙伴想用Javasript写，我这次就按我的思路写了一个版本。 实现思路 分2张画布来实现，画布1仅仅用来绘制背景图，画布2用来绘制游戏相关的动态内容。 创建我方飞机 定时创建敌机 开启主线程，用来刷新画布2. 代码实现 编写页面 <!DOCTYPE html&
用 JavaScript 写一个小游戏打飞机
m0_62241283的博客
08-03 1871
以上就是 基于 js 制作一个飞机大战，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
JS实现飞机大战
06-28
html+css基本框架得搭建，定时器，方法，对象，基本循环语句实现简单的飞机大战
javascript 飞机大战游戏
duanyuehuan
06-07 624
飞机大战游戏
javascript实现飞机大战
01-02
打开html中的start界面开始运行，我方飞机发射子弹攻击敌机，我方飞机可上下左右移动，敌方飞机有小飞机，中飞机，大飞机；一共有5滴血，血量消耗完了之后，游戏结束，有飞机碰撞效果，碰撞期间不掉血，可以暂停游戏——出处（知了堂期末大作业）
JavaScript—飞机大战
diaopinglan6176的博客
05-06 356
今天来写个游戏，飞机大战 1，布局 2，思路 1，动态创建自己的飞机让它在规定的区域，跟着鼠标运动。 2，在自己飞机的上方，间隔1s生成子弹。子弹往上移动当top：0子弹消失 3，每隔1s产生敌机 top 0,left随机，敌机向下移动，敌机超过边距时。敌机消失。 4，子弹和敌机相遇时。子弹和敌机同时消失 3，代码 1，动...
js实现飞机大战小游戏
10-14
总的来说，js实现飞机大战小游戏是一个综合运用HTML、CSS和JavaScript的好例子。它涉及到对象的创建、事件处理、定时器的使用、动态效果的实现以及游戏逻辑的编写等多个方面，对初学者来说是一个很好的学习项目。...
JS网页版飞机大战游戏代码
06-24
《JS网页版飞机大战游戏代码解析》 在网页游戏领域，JS（JavaScript）以其灵活性和强大的功能成为构建交互式体验的首选语言。本篇将详细探讨"JS网页版飞机大战游戏"这一主题，通过深入理解游戏代码，我们将揭示其...
原生JavaScript飞机大战
08-21
通过原生js实现了经典小游戏飞机大战，实现的功能比较简单，包括积分，开始游戏，暂停游戏和重新开始，比较适合刚学习js的朋友看看，希望能利于提升你的js编程。
JS编程实现-飞机大战游戏
05-04
游戏开发入门项目-飞机大战，使用js语言开发的web项目。
html5-fly_HTML5游戏_canvas源码_飞机大战_
10-04
通过阅读代码，可以了解如何组织游戏逻辑，如何利用JavaScript的面向对象编程特性，以及如何有效地使用Canvas进行绘图。此外，源码也可能包含了一些优化技巧，如使用精灵图（sprite sheet）来减少HTTP请求，或者使用...
javascript飞机大战
liu197023的博客
03-21 598
文档结构如下 其中tool文件中只使用了随机数，audio中是存放的音乐文件，images中是己方和敌方飞机的图片。 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view..
javascript 飞机大战
u011563656的博客
03-28 518
飞机大战         布局 -->       // 游戏的初始化 //  获取元素,并且创建画布对象 var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //  定义5个常量,分别表示游戏的5个阶段 const START = 0;
JavaScript制作简易的《飞机大战》
qq_46568518的博客
05-09 1181
JavaScript 碰撞检测 飞机大战
JavaScript 实现飞机大战
最新发布
qqrrjj2011的博客
03-09 1464
JavaScript实现飞机大战示例
js 飞机大战
weixin_30256505的博客
09-29 149
完整文件及代码可以在网盘下载，下载链接为：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、付费专栏及课程。

余额充值