JavaScript Brick Breaker, кирпичи в массиве не соединяются?

Question

У меня возникли проблемы с удалением кирпичей. Кирпичи являются частью массива, и мяч непрерывно запускает проверку цикла для проверки того, попал ли он в какие-либо кирпичи. Если это так, он соединяет этот кирпич с массивом. Но кирпичи не исчезают!

//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 of bricks не следует уменьшать после 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--; 
     } 
    }