javascript - 如何在 Javascript 中检查和更改砖块的状态？

Question

我制作破砖游戏。制作砖的行 = 3，列 = 5。

我想在行 [0] 中制作砖块（它们的状态 = 2）并改变它们的状态，如果它们与球碰撞则颜色。（如果他们的状态 = 2，改变他们的状态 = 1 & 颜色 = “灰色调”）

但我的代码无法正常工作。

我正在尝试修复它，但这并不容易。

这是我的代码：（省略变量声明和无关函数。）

function init(){
    canvas = document.getElementById("myCanvas");
    canvas.width = 500;
    canvas.height = 480;
     if (canvas == null || canvas.getContext == null) return;
    ctx = canvas.getContext("2d");
    ballColor = "black";
    ballRadius = "30";
    changeBallColor();
    changeBallRadius();

    x = canvas.width/2;
    y = canvas.height-30;
    dx = 3;
    dy = -3;

    paddleHeight = ballRadius;
    paddleWidth = 300;
    paddleX = (canvas.width-paddleWidth)/2;
    rightPressed = false;
    leftPressed = false;

    brickRowCount = 3;
    brickColumnCount = 5;
    brickWidth = 80;
    brickHeight = 40;
    brickPadding = 13;
    brickOffsetTop = 10;
    brickOffsetLeft = 20;

    bricks = [];
    for(var c=0; c<brickColumnCount; c++) {
        bricks[c] = [];
        for(var r=0; r<brickRowCount; r++) {
            bricks[c][r] = { x : 0, y : 0, status : 1 };
            if(r==0) {
                bricks[c][r] = { x: 0, y : 0, status : 2 };
            }
        }
    }

    s = 0; //score.
    lives = 2;
}

function collisionDetection() {
  for(var c=0; c<brickColumnCount; c++) {
    for(var r=0; r<brickRowCount; r++) {
      var b = bricks[c][r];
      if(b.status == 2) {
        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
          dy = -dy;
          b.status = 1;
        }
      }
      else if(b.status == 1) {
        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
          dy = -dy;
          b.status = 0;
          s++;
          document.getElementById("score").innerHTML=s;
          if (s == 15) {
            level2();
          }
          if (s == 30) {
            level3();
          }
          if (s == 45) {
            gameClear();
          }
        }
      }
    }
  }
}

function drawBricks() {
  for(var c=0; c<brickColumnCount; c++) {
    for(var r=0; r<brickRowCount; r++) {
        var b = bricks[c][r];
      if(b.status == 2) {
        var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
        var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
      }
      else if(b.status == 1) {
        var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
        var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
        bricks[c][r].x = brickX;
        bricks[c][r].y = brickY;
        ctx.beginPath();
        ctx.rect(brickX, brickY, brickWidth, brickHeight);
        ctx.fillStyle = "EAEAEA";
        ctx.fill();
        ctx.closePath();
      }
    }
  }
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
    drawBricks();
    collisionDetection();

    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
   }

   if(y + dy < ballRadius) {
    dy = -dy;
   }

   else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
      lives--;
      if(!lives) {
        alert("GAME OVER.");
        document.location.reload();
      }
      else {
        x = canvas.width/2;
        y = canvas.height-30;
        dx = 3;
        dy = -3;
        paddleX = (canvas.width-paddleWidth)/2;
       }
     }
   }

   if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 5;
   }
   else if(leftPressed && paddleX > 0) {
        paddleX -= 5;
   }

    x += dx;
    y += dy;
}

ball = setInterval(draw, 10);

标签： javascripthtmlcanvas