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

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;
    }

我相信您可以自己弄清楚其余的东西，这里的教训是： 您应该避免变异 。 在这里阅读有关为什么这是一种不好的做法。

可预测性

突变会隐藏变化，从而产生（意外的）副作用，这可能会导致讨厌的错误。 当您实施不变性时，可以使您的应用程序体系结构和思维模型保持简单，这使您更容易推理出应用程序。