JavaScript Brick Breaker，阵列中的Bricks没有被拼接？

Question

我在移除积木时遇到了问题。砖块是数组的一部分，球不断运行 for 循环检查它是否撞到任何砖块。如果是这样，它会拼接数组中的那块砖。但是积木不会消失！

    //Helper Functions
    function AABBIntersect(ax, ay, aw, ah, bx, by, bw, bh) {
        return ax < bx+bw && ay < by+bh && bx < ax+aw && by < ay+ah;
    }

    var ball = {
        //A few of the basic variables called by the upcoming function

        update: function() {
            this.x += this.vel.x;
            this.y += this.vel.y;

            if (0 > this.y) {
                var offset = 0 - this.y;
                this.y += 2*offset;
                this.vel.y *= -1;
            }

            if (this.y+this.height > HEIGHT) {
                this.serve();
            }

            if (0 > this.x || this.x+this.size > WIDTH) {
                var offset = this.vel.x < 0 ? 0 - this.x : WIDTH - (this.x+this.size);
                this.x += 2*offset;
                this.vel.x *= -1;
            }

            if (AABBIntersect(this.x, this.y, this.size, this.size, player.x, player.y, player.width, player.height)) {
                var offset = player.y - (this.y+this.size);
                this.y += 2*offset;
                var n = (this.x+this.size - player.x)/(player.width+this.size);
                var phi = 0.25*pi*(2*n - 1);

                var smash = Math.abs(phi) > 0.2*pi ? 1.5 : 1;
                this.vel.x = smash*this.speed*Math.sin(phi);
                this.vel.y = smash*-1*this.speed*Math.cos(phi);
            }

            for (var i = 0; i < bricks.length; i++) {
                var b = bricks[i];
                if (AABBIntersect(this.x, this.y, this.width, this.height, b.x, b.y, b.width, b.height)) {
                    bricks.splice(i, 1);
                    i--;
                    bricks.length--;
                    continue;
                }
            }
        }
    }

    var bricks = [];

    function main() {
        canvas = document.createElement("canvas");
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        ctx = canvas.getContext("2d");
        document.body.appendChild(canvas);

        keystate = {};
        document.addEventListener("keydown", function(evt) {
            keystate[evt.keyCode] = true;
        });
        document.addEventListener("keyup", function(evt) {
            delete keystate[evt.keyCode];
        } );

        init();

        var loop = function() {
            update();
            draw();

            window.requestAnimationFrame(loop, canvas);
        };
        window.requestAnimationFrame(loop, canvas);
    }

    function init() {
        var cols = WIDTH / 40;
        player.x = (WIDTH - player.width) / 2;
        player.y = HEIGHT - (player.height * 2);
        ball.x = (WIDTH - ball.size) / 2;
        ball.y = player.y - ball.size;
        ball.width = ball.size;
        ball.height = ball.size;
        ball.serve();

        for (var i = 0; i < 7; i++) {
            for (var j = 0; j < cols; j++) {
                bricks.push({
                    color: "#f00",
                    x: 2 + j*40,
                    y: 2 + i*20,
                    w: 36,
                    h: 16
                });
            }
        }
    }

    function update() {
        frames++;

        player.update();
        ball.update();
    }

    function draw() {
        ctx.fillRect(0, 0, WIDTH, HEIGHT);
        ctx.save();
        ctx.fillStyle = "#fff";
        player.draw();
        ball.draw();
        for (var i = 0; i < bricks.length; i++) {
            ctx.fillStyle = bricks[i].color;
            ctx.fillRect(bricks[i].x, bricks[i].y, bricks[i].w, bricks[i].h);
        }
        ctx.restore();
    }

    main();

Answer 1

几个问题：

积木对象没有 width 或 height 属性，但有 w 和 h;
拼接不应发生在积木元素 (b) 上，而是发生在积木数组 (bricks) 上；
bricks 的 length 不应在 splice 之后递减，因为该操作已经减少了长度。

所以使用这个循环：

    for (var i = 0; i < bricks.length; i++) {
        var b = bricks[i];
        if (AABBIntersect(this.x, this.y, this.width, this.height, b.x, b.y, b.w, b.h)) {
            bricks.splice(i, 1);
            i--;
        }
    }

JavaScript Brick Breaker，阵列中的Bricks没有被拼接？

JavaScript Brick Breaker, Bricks in array aren't being spliced?

javascript

arrays

collision-detection