效果图：

JavaScript模拟在雷达上用导弹打下敌机，程序员也过过当炮手的瘾！效果图：

实现思路

1.首先实现一个雷达效果，参考前面的文章（https://blog.csdn.net/dkm123456/article/details/114312198）；

2.点击扫描按钮，雷达旋转、同时创建敌机对象，并让敌机运动起来；

3.点击锁定按钮，会在敌机的位置创建锁定的图形，达到锁定的效果（因为雷达和导弹都用了小尾巴效果，所以锁定目标就用了一个新画布）；

4.点击发射按钮，创建导弹对象，导弹根据敌机的位置，不停的调整位置，向目标运动，当到达目标一定范围就判定为命中目标；

5.命中目标后产生爆炸效果，并弹出目标已摧毁，同时清除相关对象，比如导弹、敌机、锁定对象等。

创建敌机对象（雷达上运动的小球）

构造函数（圆或者叫球）

//构造函数
	 function Ball(o){
		this.x=0,//圆心X坐标
		this.y=0,//圆心Y坐标
		this.r=0,//半径
		this.startAngle=0,//开始角度
		this.endAngle=0,//结束角度
		this.anticlockwise=false;//顺时针，逆时针方向指定
		this.stroke=false;//是否描边
		this.fill=false;//是否填充
		this.scaleX=1;//缩放X比例
		this.scaleY=1;//缩放Y比例
		this.rotate=0;
		
		this.init(o);
	 }
	 //初始化
	 Ball.prototype.init=function(o){
		for(var key in o){
			this[key]=o[key];
		}
	}
		 //绘制
	 Ball.prototype.render=function(context){
		var ctx=context;//获取上下文
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x,this.y);
		if(this.fill){
			ctx.moveTo(0,0);
		}
		//ctx.moveTo(this.x,this.y);
		ctx.scale(this.scaleX,this.scaleY);//设定缩放
		ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
		if(this.lineWidth){//线宽
			ctx.lineWidth=this.lineWidth;
		}
		if(this.fill){//是否填充
			this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
			ctx.fill();
		}
		if(this.stroke){//是否描边
			this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
			ctx.stroke();
		}	
		ctx.restore();
	 	
	 	return this;
	 }

创建

//创建敌机
   Radar.prototype.addEnemy=function(){
   		 //绘制敌机
 		var enemy = new Ball({
 			//x:0,y:0,
		 	x:_.getRandom(30,450),//圆心X坐标
			y:_.getRandom(30,450),//圆心X坐标
			r:3,//半径
			startAngle:0,//开始角度
			endAngle:2*Math.PI,//结束角度
			fill:true,//是否填充
			fillStyle:'red'//填充的样式
		 })
		 this.renderArr.push(enemy);
		 this.enemy=enemy;
   }

加入运动

if(!this.anglePi){
		 	this.anglePi=Math.atan2(enemy.y-250,enemy.x-250);
		}
		console.log(this.anglePi)
		var dis=1;
		if(this.anglePi<1/2*Math.PI && this.anglePi>0){//0度-90度
			dis=-1;
		}else if(this.anglePi<-1/2*Math.PI && this.anglePi>-Math.PI){//-180度-90度
			dis=-1;
		}else if(this.anglePi>-1/2*Math.PI && this.anglePi<0){//-90度-0度
			dis=-1;
		}else{//90度-180度
			dis=1;
		}
		
		var disX=Math.cos(this.anglePi)*this.enemySpeed*dis;
		var disY=Math.sin(this.anglePi)*this.enemySpeed*dis;
		//更新敌机的位置
		enemy.x+=disX;
		enemy.y+=disY;

效果

JavaScript模拟在雷达上用导弹打下敌机，程序员也过过当炮手的瘾！效果图：

锁定（绘制几个圆和几个线段来指示被锁定）

//锁定目标(绘制几个圆和几个线段来指示被锁定)
   Radar.prototype.aimWeapon=function() {
   		var aimWeaponDest = this.aimWeaponDest;
		if(aimWeaponDest && aimWeaponDest.length>0){
			return ;
		}
   		var enemy = this.enemy;
   		if(!enemy) return ;
   		
   		var aimWeaponDestArr=[];
   		//根据敌机来创建一个圆
   		var aimWeapon = new Ball({
 			x:enemy.x,//圆心X坐标
 			y:enemy.y,//圆心X坐标
			r:6,//半径
			startAngle:0,//开始角度
			endAngle:2*Math.PI,//结束角度
			stroke:true,//是否描边
			strokeStyle:'red'//样式
		 })
		 this.renderArr2.push(aimWeapon);
		 aimWeaponDestArr.push(aimWeapon);
		 
		 aimWeapon = new Ball({
 			x:enemy.x,//圆心X坐标
 			y:enemy.y,//圆心X坐标
			r:8,//半径
			startAngle:0,//开始角度
			endAngle:2*Math.PI,//结束角度
			stroke:true,//是否描边
			strokeStyle:'red'//样式
		 })
		 this.renderArr2.push(aimWeapon);
		 aimWeaponDestArr.push(aimWeapon);
		 
	     aimWeapon = new Ball({
 			x:enemy.x,//圆心X坐标
 			y:enemy.y,//圆心X坐标
			r:10,//半径
			startAngle:0,//开始角度
			endAngle:2*Math.PI,//结束角度
			stroke:true,//是否描边
			strokeStyle:'red'//样式
		 })
		 this.renderArr2.push(aimWeapon);
		 aimWeaponDestArr.push(aimWeapon);
		 
		 aimWeapon = new Ball({
 			x:enemy.x,//圆心X坐标
 			y:enemy.y,//圆心X坐标
			r:12,//半径
			startAngle:0,//开始角度
			endAngle:2*Math.PI,//结束角度
			stroke:true,//是否描边
			strokeStyle:'red'//样式
		 })
		 this.renderArr2.push(aimWeapon);
		 aimWeaponDestArr.push(aimWeapon);
		 
		 var line = new Line({
			x:enemy.x,
			y:enemy.y,
		 	startX:0,
		 	startY:0,
		 	endX:0,
		 	endY:20,
		 	strokeStyle:'red',
		 	thin:true
		})
		this.renderArr2.push(line);
		aimWeaponDestArr.push(line);
		
		line = new Line({
			x:enemy.x,
			y:enemy.y,
		 	startX:0,
		 	startY:0,
		 	endX:0,
		 	endY:-20,
		 	strokeStyle:'red',
		 	thin:true
		})
		this.renderArr2.push(line);
		aimWeaponDestArr.push(line);
		
	    line = new Line({
			x:enemy.x,
			y:enemy.y,
		 	startX:0,
		 	startY:0,
		 	endX:20,
		 	endY:0,
		 	strokeStyle:'red',
		 	thin:true
		})
		this.renderArr2.push(line);
		aimWeaponDestArr.push(line);
		
		line = new Line({
			x:enemy.x,
			y:enemy.y,
		 	startX:0,
		 	startY:0,
		 	endX:-20,
		 	endY:0,
		 	strokeStyle:'red',
		 	thin:true
		})
		this.renderArr2.push(line);
		aimWeaponDestArr.push(line);
		
		this.aimWeaponDest = aimWeaponDestArr;
   }

这里用了新的画布（两个画布重合在一起）

var canvas2 = document.createElement('canvas');//创建画布
		canvas2.style.cssText="position:absolute;left:0px;";//设置样式
		canvas2.width = W; //设置宽度
		canvas2.height = H;//设置高度
		el.appendChild(canvas2);//添加到指定的dom对象中
		this.ctx2 = canvas2.getContext('2d');
		this.canvas2=canvas2;

跟随敌机运动，同时在旋转

//锁定目标跟随敌机
		var aimWeaponDest = this.aimWeaponDest;
		if(aimWeaponDest && aimWeaponDest.length>0){
			aimWeaponDest.forEach(function(item){
				//锁定图形里面的每个对象xy都跟着变化
				item.x+=disX;
				item.y+=disY;
				
				//同时在旋转
				item.rotate+=0.01*Math.PI;
				if(item.rotate>=2*Math.PI){
					item.rotate=0;
				}
			})
		}

效果

JavaScript模拟在雷达上用导弹打下敌机，程序员也过过当炮手的瘾！效果图：

发射导弹

//发射导弹
    Radar.prototype.launch=function() {
    	if(!this.aimWeaponDest || this.aimWeaponDest.length<=0) return ;//没有锁定就不操作
    	if(this.missile) return ;
    	
    	var missile = new Ball({
 			x:250,//圆心X坐标
 			y:500,//圆心X坐标
			r:2,//半径
			startAngle:0,//开始角度
			endAngle:2*Math.PI,//结束角度
			fill:true,//是否填充
			fillStyle:'white'//样式
		 })
    	
    	this.renderArr.push(missile);
    	this.missile=missile;
    }

导弹根据目标的位置，不停的调整自己的方向

//如果有导弹、导弹朝目标飞行
		var missile=this.missile;
		if(missile){
			//根据导弹和敌机 的位置来计算方向
			var s = this.missileSpeed;
			var mDis=1;
			var anglePi2=Math.atan2(missile.y-enemy.y,missile.x-enemy.x);
			if(missile.y-enemy.y<10 && missile.x-enemy.x<10){//判定为击中目标
				this.destroy();
				return ;
			}
			if(anglePi2>1/2*Math.PI && anglePi2<Math.PI){//90度- 180度
				mDis=-1;
			}else if(anglePi2>-1/2*Math.PI && anglePi2<0){//-90度-0度
				mDis=-1;
			}else if(anglePi2>0 && anglePi2<1/2*Math.PI){//0度-90度
				mDis=-1;
			}else if(anglePi2>-Math.PI && anglePi2<-1/2*Math.PI){//-180度 - -90度
				mDis=1;
			}
			

			var mdisX=Math.cos(anglePi2)*s*mDis;
			var mdisY=Math.sin(anglePi2)*s*mDis;
			
			//更新导弹的位置
			missile.x+=mdisX;
			missile.y+=mdisY;
		}

当导弹与目标接近到一定位置时就判定为命中（摧毁目标）

//目标摧毁、自动消耗
   Radar.prototype.destroy=function(type) {
   		//如果type则表示已经逃跑
   		if(!type){
   			this.ctx.drawImage(this.boom,this.missile.x-80,this.missile.y-80);//显示爆炸效果
   		}
   		//将导弹、敌机对象从renderArr中移出
  		for(var i=0;i<this.renderArr.length;i++){
			var item = this.renderArr[i];
			if( this.missile==item || this.enemy== item ){
				this.renderArr.splice(i,1);
				i--;
			}
		}
			
   		//移除目标锁定对象
   		var aimWeaponDest = this.aimWeaponDest;
		if(aimWeaponDest && aimWeaponDest.length>0){
			aimWeaponDest.length=0;
		}
		this.renderArr2=[];
		
		//移除导弹
		this.missile=null;
		//移除敌机
		this.enemy=null;
		
		clearInterval(this.timmer);
		this.timmer=null;
		
		var msg='目标已摧毁！';
		if(type){
			msg='目标已逃跑！';
		}
		//设定延时提示，如果不设定延时，则爆炸效果没出来就alert了。
		setTimeout(function(){
			alert(msg);
		},200);
	
		
   }

效果如下：

JavaScript模拟在雷达上用导弹打下敌机，程序员也过过当炮手的瘾！效果图：

JavaScript模拟在雷达上用导弹打下敌机，程序员也过过当炮手的瘾！效果图：

效果图：

实现思路

创建敌机对象（雷达上运动的小球）

构造函数（圆或者叫球）

创建

加入运动

效果

锁定（绘制几个圆和几个线段来指示被锁定）

这里用了新的画布（两个画布重合在一起）

跟随敌机运动，同时在旋转

效果

发射导弹

导弹根据目标的位置，不停的调整自己的方向

当导弹与目标接近到一定位置时就判定为命中（摧毁目标）

效果如下：

代码下载、无需积分！

兄弟们顶起来！

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条