[英]p5.js rect circle collision, cant seem to get it to detect
有人可以幫我嗎,我似乎無法在球陣列和矩形對象之間進行碰撞檢測。
var balls = [];
var obstacle;
function setup() {
createCanvas(windowWidth, windowHeight);
obstacle = new Obstacle();
}
function draw() {
background(75);
obstacle.display();
for(var i = 0; i < balls.length; i++) {
balls[i].display();
balls[i].update();
balls[i].edges();
}
}
function mousePressed() {
balls.push(new Ball(mouseX, mouseY));
}
function Ball(x, y) {
this.x = x;
this.y = y;
this.r = 15;
this.gravity = 0.5;
this.velocity = 0;
this.display = function() {
fill(255, 0 , 100);
stroke(255);
ellipse(this.x, this.y, this.r*2);
}
this.update = function() {
this.velocity += this.gravity;
this.y += this.velocity;
}
this.edges = function() {
if (this.y >= windowHeight - this.r*2) {
this.y = windowHeight - this.r*2;
this.velocity = this.velocity* -1;
this.gravity = this.gravity * 1.1;
}
}
}
function Obstacle() {
this.x = windowWidth - windowWidth;
this.y = windowHeight / 2;
this.w = 200;
this.h = 25;
this.display = function() {
fill(0);
stroke(255);
rect(this.x, this.y, this.w, this.h);
}
}
function RectCircleColliding(Ball, Obstacle) {
var distX = Math.abs(Ball.x - Obstacle.x - Obstacle.w / 2);
var distY = Math.abs(Ball.y - Obstacle.y - Obstacle.h / 2);
if (distX > (Obstacle.w / 2 + Ball.r)) {
return false;
console.log("no hit");
}
if (distY > (Obstacle.h / 2 + Ball.r)) {
return false;
console.log("no hit");
}
if (distX <= (Obstacle.w / 2)) {
return true;
console.log("hit");
}
if (distY <= (Obstacle.h / 2)) {
return true;
console.log("hit");
}
var dx = distX - Obstacle.w / 2;
var dy = distY - Obstacle.h / 2;
return (dx * dx + dy * dy <= (Ball.r * Ball.r));
}
我似乎無法檢測到任何東西,我將不勝感激。 我正在使用p5.js庫。 我似乎無法檢測到任何東西。
在您提供的代碼中,永遠不會調用檢查碰撞的函數,當碰撞發生時,它將不起作用。
這是我的嘗試。 更改了RectCircleColliding方法,並在draw中調用它。
var balls = [];
var obstacle;
function setup() {
createCanvas(windowWidth, windowHeight);
obstacle = new Obstacle();
}
function draw() {
background(75);
obstacle.display();
for(var i = 0; i < balls.length; i++) {
balls[i].display();
balls[i].update();
balls[i].edges();
console.log(RectCircleColliding(balls[i], obstacle));
}
}
function mousePressed() {
balls.push(new Ball(mouseX, mouseY));
}
function Ball(x, y) {
this.x = x;
this.y = y;
this.r = 15;
this.gravity = 0.5;
this.velocity = 0;
this.display = function() {
fill(255, 0 , 100);
stroke(255);
ellipse(this.x, this.y, this.r*2);
}
this.update = function() {
this.velocity += this.gravity;
this.y += this.velocity;
}
this.edges = function() {
if (this.y >= windowHeight - this.r*2) {
this.y = windowHeight - this.r*2;
this.velocity = this.velocity* -1;
this.gravity = this.gravity * 1.1;
}
}
}
function Obstacle() {
this.x = windowWidth - windowWidth;
this.y = windowHeight / 2;
this.w = 200;
this.h = 25;
this.display = function() {
fill(0);
stroke(255);
rect(this.x, this.y, this.w, this.h);
}
}
function RectCircleColliding(Ball, Obstacle) {
// define obstacle borders
var bRight = Obstacle.x + Obstacle.w;
var bLeft = Obstacle.x;
var bTop = Obstacle.y;
var bBottom = Obstacle.y + Obstacle.h;
//compare ball's position (acounting for radius) with the obstacle's border
if(Ball.x + Ball.r > bLeft)
if(Ball.x - Ball.r < bRight)
if(Ball.y + Ball.r > bTop)
if(Ball.y - Ball.r < bBottom)
return(true);
return false;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.