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

构造函数（圆或者叫球）

//构造函数

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.enemySpeeddis;

var disY=Math.sin(this.anglePi)this.enemySpeeddis;

//更新敌机的位置

enemy.x+=disX;

enemy.y+=disY;

效果

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

---

//锁定目标(绘制几个圆和几个线段来指示被锁定)

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’);

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。