javascript canvas检测小球碰撞

2023-07-27 01:08:14 69

exportdefault{ data(){ return{ canvas:null, ctx:null, arcObj:{} }; }, mounted(){ this.canvas=document.getElementById("canvas"); this.ctx=this.canvas.getContext("2d"); //this.move();//矩形的边缘碰撞函数 //this.moveArc();//绘制碰撞圆形，对象形式 this.moveRect() }, methods:{ move(){ letx=0; lety=0; letwidth=100; letheight=100; letspeedX=2; letspeedY=2; letctx=this.ctx; ctx.fillStyle="red"; ctx.fillRect(x,y,width,height); setInterval(()=>{ ctx.clearRect(x,y,this.canvas.width,this.canvas.height); x+=speedX; if(x>this.canvas.width-width){ speedX*=-1; }elseif(x<0){ speedX*=-1; } y+=speedY; if(y>this.canvas.height-height){ speedY*=-1; }elseif(y<0){ speedY*=-1; } ctx.fillRect(x,y,width,height); },10); //this.requestmove(x,y,width,height,ctx,speedX,speedY);//请求帧的动画过程 }, requestmove(x,y,width,height,ctx,speedX,speedY){ ctx.clearRect(x,y,this.canvas.width,this.canvas.height); x+=speedX; if(x>this.canvas.width-width){ speedX*=-1; }elseif(x<0){ speedX*=-1; } y+=speedY; if(y>this.canvas.height-height){ speedY*=-1; }elseif(y<0){ speedY*=-1; } ctx.fillRect(x,y,width,height); window.requestAnimationFrame( this.requestmove(x,y,width,height,ctx,speedX,speedY) ); }, moveArc(x,y,r,speedX,speedY){ this.x=x; this.y=y; this.r=r; this.speedX=speedX; this.speedY=speedY; this.moveUpdata=function(){ this.x+=this.speedX; if(this.x>this.canvas.width-this.r){ this.speedX*=-1; }elseif(this.x<0){ this.speedX*=-1; } this.y+=this.speedY; if(this.y>this.canvas.height-this.r){ this.speedY*=-1; }elseif(this.y<0){ this.speedY*=-1; } }; }, moveRect(){ //面向对象编程 functionRect(x,y,width,height,color,speedX,speedY,ctx,canvas){ this.x=x; this.y=y; this.width=width; this.height=height; this.color=color this.speedX=speedX this.speedY=speedY this.ctxRect=ctx this.canvas=canvas } Rect.prototype.draw=function(){ this.ctxRect.beginPath(); this.ctxRect.fillStyle=this.color this.ctxRect.fillRect(this.x,this.y,this.width,this.height) this.ctxRect.closePath(); } Rect.prototype.move=function(){ this.x+=this.speedX if(this.x>this.canvas.width-this.width){ this.speedX*=-1 }elseif(this.x<0){ this.speedX*=-1 } this.y+=this.speedY if(this.y>this.canvas.height-this.height){ this.speedY*=-1 }elseif(this.y<0){ this.speedY*=-1 } } letrect1=newRect(0,100,100,100,'red',2,2,this.ctx,this.canvas) letrect2=newRect(300,100,100,100,'blue',-2,-2,this.ctx,this.canvas) //rect1.draw(); //rect2.draw() letanimate=()=>{ this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height) rect1.draw() rect1.move() rect2.draw() rect2.move() letrect1Min=rect1.x; letrect1Max=rect1.x+rect1.width letrect2Min=rect2.x letrect2Max=rect2.x+rect2.width letmin=Math.max(rect1Min,rect2Min) letmax=Math.min(rect1Max,rect2Max) if(min

样式控制

#canvas{
border:1pxsolidblack;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

javascript canvas检测小球碰撞

热门推荐

随机推荐