因此，此问题与 this 相似但不同。问题所以不要标记为重复问题。 如果我像这样创建两个单独的矩形:
//rec is an object I made for the rectangles
rect1 = new rec(random(width-40), random(height-40), 40, 40);
rect2 = new rec(random(width-40), random(height-40), 40, 40);
我的代码工作正常。
但是如果我像这样创建一个矩形数组:
//r is an array I made and rec is an object I made for the rectangles
for(var i = 0;i < 10;i++) {
r[i] = new rec(random(width-40), random(height-40), 40, 40);
}
我不能像这样调用对象内部的任何变量:
console.log(r[1].x); //returns: Uncaught TypeError: Cannot read property 'x' of undefined
所以，这是我在 p5.js 中为对象碰撞编写的代码:
var rect1;
var r;
var num;
function setup(){
r = [];
num = 2;
createCanvas(windowWidth,windowHeight- 4);
for(var i = 0;i < num; i++){
r = new rec(random(width-40),random(height-40),40,40);
}
}
function draw(){
background(40);
r.show();
console.log(r[1].x);
for(var i = 0;i < num; i++) {
for(var j = 0;j<num; j++){
if(r[i].x + r[i].width+r[i].xa >= r[j].x && r[i].y +r[i].height >=r[j].y && r[i].y<=r[j].y +r[j].height && r[i].x + r[i].xa <= r[j].x + r[j].width){
r[i].xa *= -1;
r[j].xa *= -1;
}
if(r[i].y + r[i].height + r[i].ya>= r[j].y && r[i].x +r[i].width>=r[j].x && r[i].x<=r[j].x + r[j].height && r[i].y + r[i].ya <= r[j].y + r[j].height){
r[i].ya *= -1;
r[j].ya *= -1;
}
}
}
}
function rec(x,y,wid,hei){
this.x = x;
console.log(this.x);
this.y = y;
this.width = wid;
this.height= hei;
this.xa = random(2,5);
this.ya = random(2,5);
this.show = function(){
this.x;
this.y;
fill(255);
noStroke();
rect(this.x,this.y,this.width,this.height);
this.x += this.xa;
this.y += this.ya;
if(this.x > width-this.width||this.x <0){
this.xa *= -1;
if(this.x > width/2){
this.x = width-this.width;
}else{
this.x = 0;
}
}
if(this.y > height-this.height||this.y <0){
this.ya *= -1;
if(this.y > height/2){
this.y = height-this.height;
}else{
this.y = 0;
}
}
}
}
function windowResized(){
createCanvas(windowWidth,windowHeight- 4);
}
最佳答案
在你的代码中，你写:
for(var i = 0;i < num; i++){
r = new rec(random(width-40),random(height-40),40,40);
}
但你应该:
for(var i = 0;i < num; i++){
r[i] = new rec(random(width-40),random(height-40),40,40);
}
此外，在 draw() 中:
r.show();
需要:
r[1].show();
或类似的。
添加:
r[0].show();
您可以看到您的代码正常工作!只需要添加其余的矩形...
这是演示:
var rect1;
var r;
var num;
function setup() {
r = [];
num = 2;
createCanvas(windowWidth, windowHeight - 4);
for (var i = 0; i < num; i++) {
r[i] = new rec(random(width - 40), random(height - 40), 40, 40);
}
}
function draw() {
background(40);
r[0].show();
r[1].show();
for (var i = 0; i < num; i++) {
for (var j = 0; j < num; j++) {
if (r[i].x + r[i].width + r[i].xa >= r[j].x && r[i].y + r[i].height >= r[j].y && r[i].y <= r[j].y + r[j].height && r[i].x + r[i].xa <= r[j].x + r[j].width) {
r[i].xa *= -1;
r[j].xa *= -1;
}
if (r[i].y + r[i].height + r[i].ya >= r[j].y && r[i].x + r[i].width >= r[j].x && r[i].x <= r[j].x + r[j].height && r[i].y + r[i].ya <= r[j].y + r[j].height) {
r[i].ya *= -1;
r[j].ya *= -1;
}
}
}
}
function rec(x, y, wid, hei) {
this.x = x;
this.y = y;
this.width = wid;
this.height = hei;
this.xa = random(2, 5);
this.ya = random(2, 5);
this.show = function() {
this.x;
this.y;
fill(255);
noStroke();
rect(this.x, this.y, this.width, this.height);
this.x += this.xa;
this.y += this.ya;
if (this.x > width - this.width || this.x < 0) {
this.xa *= -1;
if (this.x > width / 2) {
this.x = width - this.width;
} else {
this.x = 0;
}
}
if (this.y > height - this.height || this.y < 0) {
this.ya *= -1;
if (this.y > height / 2) {
this.y = height - this.height;
} else {
this.y = 0;
}
}
}
}
function windowResized() {
createCanvas(windowWidth, windowHeight - 4);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.min.js"></script>关于javascript - 数组碰撞检测中的 p5.js 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46509059/