[英]hmtl5 canvas collision with multiple objects?
So i am doing a flappy bird clone as coding exercise... and now i got to the part where i have to detect the collision bettwen the bird and the pipes. 所以我正在做一个飞扬的鸟克隆作为编码练习……现在我要去检测那只鸟和水管之间的碰撞。 I would to know how would you suggest be the best way of detecting the collision of the bird with the pipes, taking into account that i am pushing the pipes into an array
考虑到我将管道推入阵列,我想知道您如何建议检测鸟与管道碰撞的最佳方法
this are the main parts of the code 这是代码的主要部分
//Pipes proto that the bird most avoid
function Pipes(x1, y1, height1, width1, dx1, dy1, x2, y2, height2,
width2, dx2, dy2) {
this.x1 = x1;
this.y1 = y1;
this.height1 = height1;
this.width1 = width1;
this.dx1 = dx1;
this.dy1 = dy1;
this.x2 = x2;
this.y2 = y2;
this.height2 = height2;
this.width2 = width2;
this.dx2 = dx2;
this.dy2 = dy2;
this.draw = function () {
c.fillStyle = "green";
c.fillRect(x1, y1, height1, width1)
c.fillStyle = "green";
c.fillRect(x2, y2, height2, width2)
}
this.update = function () {
x1 += -dx1;
x2 += -dx2;
this.draw();
}
}
function Bird(x, y, dx, dy, radius, color, flap) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.radius = radius;
this.color = color;
this.draw = function () {
c.beginPath();
c.arc(x, y, radius, 0, 2 * Math.PI, false);
c.fillStyle = color;
c.fill();
};
this.update = function (){
flap = false;
x += dx
//gravity manager
var gravity = 0.4;
y += dy
dy += gravity;
//Screen collision manager
if (y + dy > innerHeight) {
y = innerHeight - radius;
}
if(radius < crashObj.x1 || radius < crashObj.x2 || radius <
crashObj.x1){
}
this.draw()
}
};
//Main GameLoop
function animate() {
c.clearRect(0, 0, innerWidth, innerHeight);
//canvas Color
c.fillStyle = "#C5D3E2";
c.fillRect(0, 0, window.innerWidth, window.innerHeight);
//Updates pipes
for (var i = 0; i < pipesArr.length; i++) {
pipesArr[i].update();
}
//draw and update bird into the screen
bird.update();
requestAnimationFrame(animate);
}
animate();
thanks in advance fo the answer! 在此先感谢您的答案!
What you are looking for is a circle-rectangle collision. 您正在寻找的是圆角矩形碰撞。
User markE has posted an in-depth answer on how to achieve it , along with a JS Fiddle demonstrating it . 用户markE已发布了有关如何实现此功能的详细答案 ,以及展示该功能的JS Fiddle 。
Then on the update
function, run through all the Pipes
and check each of them for collision. 然后在
update
功能上,遍历所有Pipes
并检查每个Pipes
是否存在碰撞。 For example: 例如:
for(var i = 0; i < pipesArr.length; i++){
...
if(RectCircleColliding(bird, pipe)){
die()
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.