从数组中删除元素以及在 p5js 中动态显示在屏幕上的问题

Question

我正在使用 p5js 创建一个破砖游戏。我想要完成的是让砖块从阵列中消失，以及当球击中它们时在屏幕上消失。但是，当我控制台记录被球击中的砖块时，我得到了不确定。我相信是因为用来显示我的积木的函数在p5的“绘制”函数中，这使它一遍又一遍地生成新积木，从而导致每次都未定义。

这里是整个项目的github链接https://github.com/NikolaP93/Brick-Breaker

我尝试在 setup 函数中创建积木，但 show 函数由于某种原因在 setup 函数中不起作用。

 for(i=0;i<12;i++) {
    bricks[i] = [];

    for(j=6;j>0;j--) { 
        bricks[i][j] = new Brick(i*50, j*30, 20, 40);
        bricks[i][j].show();

        if(ball.hits(bricks[i][j])) {
            ball.yspeed = 3;
            bricks[i].splice(j,1);
            console.log(bricks[i][j])
        }

    }

}

我相信实际的循环很好，但是，我相信我不知道如何正确显示/隐藏砖块，这导致了问题。当我记录自己的数组时，它显示一个元素实际上已经被拼接，但它并没有从屏幕上消失，让我相信它是一个新创建的数组。

Answer 1

但是，当我控制台记录被球击中的砖块时，我 得到未定义。

这是意料之中的，在移除砖块之前添加一个console.log，你会得到：

Brick {x: 550, y: 150, h: 20, w: 40}

undefined 实质上是进一步确认砖块已从阵列拼接！

您可以比这更进一步，并在使用console.log("bricks") 遇到块时记录数组本身：

(12) [Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), Array(6), Array(5)]

您可以看到该块已被删除，因为其中一个数组只有 5 个元素。

let brick;
let bricks = [];


function setup() {
    createCanvas(600, 400);
    brick = new Brick(300, 350, 10, 50);
    ball = new Ball();


    //create bricks 12x6
    for (i = 0; i < 12; i++) {
        bricks[i] = [];

        for (j = 0; j < 6; j++) {
            bricks[i][j] = new Brick(i * 50, j * 30, 20, 40);
        }
    }

}

function draw() {
    background(255);
    fill(255);

    brick.show();
    brick.move();
    ball.move();
    ball.show();

    //check for collision and change direction between the main brick and the ball
    if (ball.hits(brick)) {
        ball.yspeed = -3
    }

    // display the bricks
    for (i = 0; i < 12; i++) {
        for (j = 0; j < bricks[i].length; j++) {
            bricks[i][j].show();

            
            // remove bricks
            if (ball.hits(bricks[i][j])) {
                ball.yspeed = 3;
                bricks[i].splice(j, 1);
                console.log(bricks)
            } 
        }
    }
 
}

class Brick {
    constructor(x = 300, y = 350, h = 30, w = 50) {
        this.x = x;
        this.y = y;
        this.h = h;
        this.w = w;
    }

    show() {
        rect(this.x, this.y, this.w, this.h);
    }

    // main brick movement
    move() {
        if (this.x > 0) {
            if (keyIsDown(LEFT_ARROW)) {
                this.x -= 10;
            }
        }
        if (this.x < width - 50) {
            if (keyIsDown(RIGHT_ARROW)) {
                this.x += 10;
            }
        }
    }

  

}

class Ball {
    constructor(x = 300, y = 250, r = 10, xspeed = 3, yspeed = 3) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.xspeed = xspeed;
        this.yspeed = yspeed;
    }

    show() {
        fill(0)
        ellipse(this.x, this.y, this.r);
    }

    // check the position of the ball if it's withing boundaries
    move() {

        // if it leaves the width, change direction
        if (this.x > width) {
            this.xspeed = -this.xspeed;
        }
        else if (this.x < 0) {
            this.xspeed = Math.abs(this.xspeed);
        }

        //if it leaves the height, change direction

        if (this.y > height + 50) {
            return true;
        }

        if (this.y < 0) {
            this.yspeed = Math.abs(this.yspeed)
        }

        

        this.x += this.xspeed;
        this.y += this.yspeed;
    }

   

    hits(brick) {

        // check if the circle is intersecting with the brick, still need to test if the ball is inside the brick

        if(this.x + this.r >  brick.x &&
            this.x - this.r < (brick.x + brick.w) &&
            this.y + this.r >  brick.y &&
            this.y - this.r < (brick.y + brick.h)) 
         {  
           return true; 
         }

    }


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>