2024年展望Web前端原生开发的现状，用JavaScript写的贪吃蛇游戏（很简单，前端热修复原理

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

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;

}

绘制蛇头

SnakeProxy.prototype.createHead=function(){

var renderArr = this.renderArr;

var disX = this.disX;

var disY = this.disY;

var x=1,y=0;

var head = new Ball({

x:x*disX+disX/2,

y:y*disY+disY/2,

r:disX/2-2,

startAngle:0,

endAngle:2*Math.PI,

fill:true,

fillStyle:‘#F5DC10’,

lineWidth:1.2

})

renderArr.push(head);

this.snakeArr.push(head);

this.snakePosArr.push({x:x,y:y});

}

蛇身（先不绘制出来，先放代码）

SnakeProxy.prototype.createBody=function(){

var renderArr = this.renderArr;

var disX = this.disX;

var disY = this.disY;

var x=1,y=0;

var body = new Ball({

x:x*disX+disX/2,

y:y*disY+disY/2,

r:disX/3,

startAngle:0,

endAngle:2*Math.PI,

fill:true,

fillStyle:‘#F5DC10’,

lineWidth:1.2

})

renderArr.push(body);

this.snakeArr.splice(1,0,body);//在头部后面添加

}

绘制蛇尾

SnakeProxy.prototype.createEnd=function(){

var renderArr = this.renderAr