Question

我一直遵循教程https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript来用HTML创建基本的js游戏。我按照本教程进行操作，并使用js创建了游戏，如下所示：

var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var paddleWidth = 75;
    var paddleHeight = 10;
    var paddleX = (canvas.width - paddleWidth)/2;
    var paddleY = (canvas.height - paddleHeight);
    var paddleColour = "#0095DD";
    var drawPaddle = function () {
        ctx.beginPath();
        ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
        ctx.fillStyle = (paddleColour);
        ctx.fill();
        ctx.closePath();
    }
    var rightPressed = false;
    var leftPressed = false;
    var movepaddle = function () {
        document.addEventListener('keydown', keyDownHandler, false);
        document.addEventListener('keyup', keyUpHandler, false);

        function keyDownHandler(e) {
          if(e.keyCode == 39) {
            rightPressed = true;
          }
          else if(e.keyCode == 37) {
            leftPressed = true;
          }
        }
        function keyUpHandler(e) {
          if(e.keyCode == 39) {
            rightPressed = false;
          }
          else if(e.keyCode == 37) {
            leftPressed = false;
          }
        }
        if ( rightPressed && paddleX < canvas.width - paddleWidth ) {
            paddleX += 7;
        }
        else if (leftPressed && paddleX > 0 ) {
            paddleX -= 7;
        }
    }

    var ballRadius = 10;
    var ballColour = "#0095DD";
    var ballX = canvas.width/2;
    var ballY = canvas.height-ballRadius-paddleHeight;
    var dx = 2;
    var dy = -2;
    var drawBall = function () {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = ballColour;
        ctx.fill();
        ctx.closePath();
    }
    var moveBall = function () {
        ballX = ballX + dx;
        ballY = ballY + dy;
    }

    var bricksRowCount = 5;
    var bricksColumnCount = 8;
    var bricksOffsetLeft = 30;
    var brickWidth = 100;
    var brickOffsetTop = 30;
    var brickHeight = 24;
    var bricksArray = [];
    for( let i = 0; i < bricksColumnCount ; i++ ) {
        bricksArray[i] = [];
        for( let j = 0; j < bricksRowCount; j++ ) {
            bricksArray[i][j] = {x: 0, y: 0, status: 1};
        }
    }
    var drawBricks = function () {
        for ( let i = 0; i < bricksColumnCount ; i++ ) {
            for( let j = 0; j < bricksRowCount; j++ ) {
                if(bricksArray[i][j].status == 1) {
                    let b = bricksArray[i][j];
                    b.x = bricksOffsetLeft * (i+1) + brickWidth * i;
                    b.y = brickOffsetTop * (j+1) + brickHeight * j;
                    ctx.beginPath();
                    ctx.rect(b.x, b.y, brickWidth, brickHeight);
                    ctx.fillStyle = "#0095DD";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }

    }


    var collisionDetection = function () {
        if ( ballX + ballRadius > canvas.width || ballX < 0 )
            dx = -dx;
        else if ( ballY + ballRadius > canvas.height || ballY < 0) {
            dy = -dy;
        }
        else if ( ballX > paddleX && ballX < paddleX + paddleWidth && ballY > canvas.height - ballRadius - paddleHeight ) {
            dy = -dy;
        }
        for(let c = 0; c < bricksColumnCount; c++ ) {
            for(let r = 0; r < bricksRowCount; r++ ) {
                if ( ballX > bricksArray[c][r].x && ballX < bricksArray[c][r].x + brickWidth && ballY > bricksArray[c][r].y && ballY < bricksArray[c][r].y + brickHeight ) {
                    dy = -dy;
                    bricksArray[c][r].status = 0;
                }
            }
        }
    }

    var draw = function () {

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();
        moveBall();
        movepaddle();
        drawBricks();
        collisionDetection();
        requestAnimationFrame(draw);
    }
    draw();

问题在于，在我的情况下，球从不可见的块反弹，而球没有从不可见的砖块反弹。而且，有时球沿着水平轨迹运动。谁能在出现此问题的地方帮助我？

Answer 1

进行碰撞检测时，必须添加一个条件，即砖块状态不为0或大于0。否则，尽管不可见砖块参与了碰撞检测并且球仍从该砖块弹起。我希望这有帮助。

var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
 
    var paddleWidth = 75;
    var paddleHeight = 10;
    var paddleX = (canvas.width - paddleWidth)/2;
    var paddleY = (canvas.height - paddleHeight);
    var paddleColour = "#0095DD";
    var drawPaddle = function () {
        ctx.beginPath();
        ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
        ctx.fillStyle = (paddleColour);
        ctx.fill();
        ctx.closePath();
    }
    var rightPressed = false;
    var leftPressed = false;
    var movepaddle = function () {
        document.addEventListener('keydown', keyDownHandler, false);
        document.addEventListener('keyup', keyUpHandler, false);

        function keyDownHandler(e) {
          if(e.keyCode == 39) {
            rightPressed = true;
          }
          else if(e.keyCode == 37) {
            leftPressed = true;
          }
        }
        function keyUpHandler(e) {
          if(e.keyCode == 39) {
            rightPressed = false;
          }
          else if(e.keyCode == 37) {
            leftPressed = false;
          }
        }
        if ( rightPressed && paddleX < canvas.width - paddleWidth ) {
            paddleX += 7;
        }
        else if (leftPressed && paddleX > 0 ) {
            paddleX -= 7;
        }
    }

    var ballRadius = 10;
    var ballColour = "#0095DD";
    var ballX = canvas.width/2;
    var ballY = canvas.height-ballRadius-paddleHeight;
    var dx = 2;
    var dy = -2;
    var drawBall = function () {
        ctx.beginPath();
        ctx.arc(ballX, ballY, ballRadius, 0, Math.PI*2);
        ctx.fillStyle = ballColour;
        ctx.fill();
        ctx.closePath();
    }
    var moveBall = function () {
        ballX = ballX + dx;
        ballY = ballY + dy;
    }

    var bricksRowCount = 5;
    var bricksColumnCount = 8;
    var bricksOffsetLeft = 30;
    var brickWidth = 100;
    var brickOffsetTop = 30;
    var brickHeight = 24;
    var bricksArray = [];
    for( let i = 0; i < bricksColumnCount ; i++ ) {
        bricksArray[i] = [];
        for( let j = 0; j < bricksRowCount; j++ ) {
            bricksArray[i][j] = {x: 0, y: 0, status: 1};
        }
    }
    var drawBricks = function () {
        for ( let i = 0; i < bricksColumnCount ; i++ ) {
            for( let j = 0; j < bricksRowCount; j++ ) {
                if(bricksArray[i][j].status == 1) {
                    let b = bricksArray[i][j];
                    b.x = bricksOffsetLeft * (i+1) + brickWidth * i;
                    b.y = brickOffsetTop * (j+1) + brickHeight * j;
                    ctx.beginPath();
                    ctx.rect(b.x, b.y, brickWidth, brickHeight);
                    ctx.fillStyle = "#0095DD";
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }

    }


    var collisionDetection = function () {
        if ( ballX + ballRadius > canvas.width || ballX < 0 )
            dx = -dx;
        else if ( ballY + ballRadius > canvas.height || ballY < 0) {
            dy = -dy;
        }
      
      
        else if ( ballX > paddleX && ballX < paddleX + paddleWidth && ballY > canvas.height - ballRadius - paddleHeight ) {
            dy = -dy;
        }
      
      
        for(let c = 0; c < bricksColumnCount; c++ ) {
            for(let r = 0; r < bricksRowCount; r++ ) {
              //////////////////////////////////////////////////////
              if(bricksArray[c][r].status > 0){
              ///////////////////////////////////////////////////////
                if ( ballX > bricksArray[c][r].x && ballX < bricksArray[c][r].x + brickWidth && ballY > bricksArray[c][r].y && ballY < bricksArray[c][r].y + brickHeight ) {
                    dy = -dy;
                    bricksArray[c][r].status = 0;
                   
                }
                
              }
            }
          
   
        }
        
      
    }

    var draw = function () {

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawPaddle();
        moveBall();
        movepaddle();
        drawBricks();
        collisionDetection();
        requestAnimationFrame(draw);
    }
    draw();

canvas{border:1px solid}

<canvas id="myCanvas"></canvas>

砖块消失了，但在html5碎砖机游戏中球却从那里反弹了

1 个答案: