打破砖块游戏只会打破砖块的顺序

Question

我正在打破砖块游戏。当球击中其中一块砖时，砖应该会消失。问题是它只会按照数组的顺序打破砖块。所以，如果你击中了第三块砖，但是第一块和第二块砖没有被打破，那么球就会反弹而且砖块不会消失。

let xPos = 20;
let yPos = 200;
let xRect = 10;
let yRect = 570;
let xVel = 5;
let yVel = 5;
let xBrick1 = [2];
let xBrick2 = [2];
let xBrick3 = [2];

let yBrick = 0;
let r, g, b, h;
let rS, gS, bS;


function setup() {
    createCanvas(500, 600);
    strokeWeight(5);

    ////////////////////////////////////////////

    r = Math.round(random(255));
    g = Math.round(random(255));
    b = Math.round(random(255));

    if (r == 0) {
        rS = r;
    } else {
        rS = r-20;
    }
    if (g == 0) {
        gS = g;
    } else {
        gS = g-20;
    }
    if (b == 0) {
        bS = b;
    } else {
        bS = b-20;
    }


    ////////////////////////////////////////////////

    makeBricks();

    //////////////////////////////////////////////////
    console.log(r, g, b);
    console.log(rS, gS, bS);
}

function draw() {
    background(000);
    xPos+=xVel;
    yPos+=yVel;
    xRect = mouseX - 100;
    fill("fff");
    stroke("#000");
    rect(xRect, yRect, 150, 30);
    fill("#009900");
    stroke("#000");
    circle(xPos, yPos, 20);

    if (breakBrick() == true) {
        yVel *= (-1);
    }
    //////////////////////////////////////////////////////    
    for (let i = 0; i < 8; i++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        rect(xBrick1[i], 0, 60, 20)
        xBrick1[i+1] = xBrick1[i] + 62;

    }
    for (let q = 0; q < 8; q++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        rect(xBrick2[q], 22, 60, 20);
        xBrick2[q+1] = xBrick2[q] + 62;
    }
    for (let s = 0; s < 8; s++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        rect(xBrick3[s], 44, 60, 20);
        xBrick3[s+1] = xBrick3[s] + 62;
    }


    /////////////////////////////////////////////////////////

    if(xPos > 480 || xPos < 20) {
        xVel *= (-1);
    }

    if(yPos < 20) {
        yVel *= (-1);
    }

    if(hitTest(xPos, yPos, xRect, yRect) == true) {
        yVel *= (-1);
    }

    else if(yPos > 600){
        xPos = 250; 
        yPos = 530;
        yVel *= (-1);
    }
}

function hitTest(xPos, yPos, xRect, yRect) {
    if (xPos +20 > xRect && xPos < xRect + 150) {
        if (yPos + 20 > yRect && yPos < yRect + 30) {

            return true;
        }
    }
    return false;
}

function makeBricks() {

    for (let ip = 0; ip < 8; ip++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        xBrick1.push(xBrick1[ip]);
        rect(xBrick1[ip], 0, 60, 20);
        xBrick1[ip+1] = xBrick1[ip] + 62;

    }
    for (let qp = 0; qp < 8; qp++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        xBrick2.push(xBrick2[qp]);
        rect(xBrick2[qp], 22, 60, 20);
        xBrick2[qp+1] = xBrick2[qp] + 62;
    }
    for (let sp = 0; sp < 8; sp++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        xBrick3.push(xBrick3[sp]);
        rect(xBrick3[sp], 44, 60, 20);
        xBrick3[sp+1] = xBrick3[sp] + 62;
    }

}

function breakBrick() {

    for (let h = 0; h < 8; h++) {
        if (xPos +20 > xBrick3[h] + 20 && xPos < xBrick3[h] + 60) {
            if (yPos +20 > 44 && yPos < 84) {
                xBrick3.splice(h, 1);
                return true;

            }
        } 

        if (xPos +20 > xBrick2[h] + 20 && xPos < xBrick2[h] + 60) {
            if (yPos +20 > 22 && yPos < 62) {
                xBrick2.splice(h, 1);
                return true;

            }
        }
        if (xPos +20 > xBrick1[h] + 20 && xPos < xBrick1[h] + 60) {
            if (yPos +20 > 0 && yPos < 40) {
                xBrick1.splice(h, 1);
                return true;

            }
        }
    }
}

我查看了所有代码和注释，无法弄明白。

我该如何解决这个问题？

Answer 1

如果你试图调试它，你会注意到砖实际上正在被销毁，但随后会被draw函数覆盖。当我评论出3行时，游戏似乎工作正常：

 for (let i = 0; i < 8; i++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        rect(xBrick1[i], 0, 60, 20)
        // xBrick1[i+1] = xBrick1[i] + 62;

    }
    for (let q = 0; q < 8; q++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        rect(xBrick2[q], 22, 60, 20);
        // xBrick2[q+1] = xBrick2[q] + 62;
    }
    for (let s = 0; s < 8; s++) {
        fill(r, g, b);
        strokeWeight(2);
        stroke(rS, gS, bS);
        rect(xBrick3[s], 44, 60, 20);
        // xBrick3[s+1] = xBrick3[s] + 62;
    }

我相信你可以自己弄清楚其余的，这里的教训是：你应该避免变异。阅读here，了解为什么这是一个不好的做法。

可预测性

变异隐藏变化，产生（意外）副作用，这可能导致令人讨厌的错误。当您实施不变性时，您可以简化应用程序架构和心智模型，这样可以更轻松地推断您的应用程序。