破砖游戏只会按顺序破砖

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

我相信你可以自己想出剩下的，这里的教训是：你应该避免突变。阅读为什么这是一种不好的做法。

Predictability

Mutation hides change, which create (unexpected) side effects, which can cause nasty bugs. When you enforce immutability you can keep your application architecture and mental model simple, which makes it easier to reason about your application.

破砖游戏只会按顺序破砖

Break brick game will only break the bricks in order

javascript

p5.js