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）;
length的{{1}}不应在bricks之后递减，因为该操作已经减少了长度。

所以使用这个循环：

splice

JavaScript Brick Breaker，数组中的砖没有被拼接？

1 个答案: