我要评论本文实例为大家分享了javascript canvas实现检测小球碰撞的具体代码，供大家参考，具体内容如下
定义一个canvas标签
<div class="cnavasinfo"> <canvas id="canvas" width="800" height="500" ></canvas> </div>
函数以及相关的逻辑处理
export default {
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() {
let x = 0;
let y = 0;
let width = 100;
let height = 100;
let speedx = 2;
let speedy = 2;
let ctx = 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;
} else if (x < 0) {
speedx *= -1;
}
y += speedy;
if (y > this.canvas.height - height) {
speedy *= -1;
} else if (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;
} else if (x < 0) {
speedx *= -1;
}
y += speedy;
if (y > this.canvas.height - height) {
speedy *= -1;
} else if (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;
} else if (this.x < 0) {
this.speedx *= -1;
}
this.y += this.speedy;
if (this.y > this.canvas.height - this.r) {
this.speedy *= -1;
} else if (this.y < 0) {
this.speedy *= -1;
}
};
},
moverect(){
// 面向对象编程
function rect(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
} else if(this.x < 0){
this.speedx *= -1
}
this.y += this.speedy
if(this.y > this.canvas.height - this.height){
this.speedy *= -1
} else if(this.y < 0){
this.speedy *= -1
}
}
let rect1 = new rect(0,100,100,100,'red',2,2,this.ctx,this.canvas)
let rect2 = new rect(300,100,100,100,'blue',-2,-2,this.ctx,this.canvas)
// rect1.draw();
// rect2.draw()
let animate = ()=>{
this.ctx.clearrect(0,0,this.canvas.width,this.canvas.height)
rect1.draw()
rect1.move()
rect2.draw()
rect2.move()
let rect1min = rect1.x;
let rect1max = rect1.x + rect1.width
let rect2min = rect2.x
let rect2max = rect2.x + rect2.width
let min = math.max(rect1min,rect2min)
let max = math.min(rect1max,rect2max)
if(min < max){
rect1.speedx *= -1;
rect1.speedy *= 1;
rect2.speedx *= -1
rect2.speedy *= 1
}
window.requestanimationframe(animate)
}
animate()
}
}
};
样式控制
#canvas {
border: 1px solid black;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论