Break brick game will only break the bricks in order

Question

I am making a break brick game. When the ball hits one of the bricks, the brick is supposed to disappear. The problem is it will only break the bricks in the order of the array. So, if you hit the third brick down the line, but the first and second bricks haven't been broken, the ball will just bounce off and the brick doesn't disappear.

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;

            }
        }
    }
}

I've looked through all my code and notes and can't figure it out.

How do I solve this problem?

score 2 · Accepted Answer · answered Apr 29 '19 at 23:27

If you try to debug this, you'll notice that the bricks are actually being destroyed, but then are immediately overwritten in draw function. The game seems to work fine when I comment out 3 lines:

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

I believe you can figure out the rest yourself, the lesson here is: you should avoid mutation. Read here about why it's a bad practice.

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

1 Answers1