Question

我正在从头开始构建一个JavaScript砖块游戏以获得乐趣。可以播放演示here。但是，您将看到未处理所有冲突。

试图通过直接计算处理碰撞（而不是遍历整个砖块阵列），我需要在每个刻度线找到最接近我的球的砖块，所以我可以比较它的界限和我的球的界限。发现是否发生了碰撞。

我有一个2D bricksArray，我这样做是为了找到最近的砖块：

var col = Math.floor((_ballX + _ballDirX * Breakoid.BALL_SIZE) / (_brickWidth + Breakoid.EMPTY_SPACE))
var row = Math.floor((_ballY + _ballDirY * Breakoid.BALL_SIZE) / (Breakoid.BRICK_HEIGHT + Breakoid.EMPTY_SPACE))

我建议您see the code in its context清楚地了解我要做的事情。（我提交了我的试验和调试内容供你查看，并且可能比我更了解我的问题。第208和246行之间发生混乱。）

实际上，那两个Math.floor非常奇怪（因为我没有正确使用它们）。它通常会找到比实际最接近的砖低1或者1的值，这导致像bricksArray[1][-1]这样的东西当然不存在并抛出错误。或bricksArray[1][2]当最近的砖块实际上是[1][1]时，由于我生气了，所以它们并不是很好。

那么，我怎样才能找到最接近我球的砖？（希望这是最好的方法）

另外：我的球目前仅在4个方向移动，因为_ballDirX和_ballDirY只能1或-1。我知道三角形的东西，但后来我想知道碰撞是否仍然“那么简单”......

Answer 1

您需要为每个方向检查row和col的值。通过这种方式，您可以确定球将根据其方向碰撞的砖块。

// Bricks collision stuff
if (topBall <= Breakoid.NBROWS * (Breakoid.BRICK_HEIGHT + Breakoid.EMPTY_SPACE) {               

    // find the closest brick based on direction of ball
    if(_ballDirX==1 && _ballDirY==1) {
        var col = Math.floor((rightBall + _brickWidth) / (_brickWidth + Breakoid.EMPTY_SPACE))-1
        var row = Math.floor((bottomBall) / (Breakoid.BRICK_HEIGHT + Breakoid.EMPTY_SPACE))
    }
    else if(_ballDirX==1 && _ballDirY==-1) {
        var col = Math.floor((rightBall + _brickWidth) / (_brickWidth + Breakoid.EMPTY_SPACE)) -1
        var row = Math.floor((topBall + Breakoid.BRICK_HEIGHT) / (Breakoid.BRICK_HEIGHT + Breakoid.EMPTY_SPACE)) - 1
    }
    else if(_ballDirX==-1 && _ballDirY==1) {
        var col = Math.floor((leftBall + _brickWidth) / (_brickWidth + Breakoid.EMPTY_SPACE))-1 
        var row = Math.floor((bottomBall) / (Breakoid.BRICK_HEIGHT + Breakoid.EMPTY_SPACE))
    }
    else if(_ballDirX==-1 && _ballDirY==-1) {
        var col = Math.floor((leftBall + _brickWidth) / (_brickWidth + Breakoid.EMPTY_SPACE))-1
        var row = Math.floor((topBall + Breakoid.BRICK_HEIGHT) / (Breakoid.BRICK_HEIGHT + Breakoid.EMPTY_SPACE)) - 1
    }

    // avoid wrong values of row and col
    // when the player is over the game borders.    
    try{
        var brick = _bricksArray[row][col]

        // check for collision
        if (_bricksArray[row][col].present) {
            if (topBall == brick.bottomBorder) {
                console.log("top hit")
                _ballDirY = 1
                _bricksArray[row][col].present = false
            } else if (rightBall == brick.leftBorder) {
                console.log("right hit")
                _ballDirX = -1
                _bricksArray[row][col].present = false
            } else if (bottomBall == brick.topBorder) {
                console.log("bottom hit")
                _ballDirY = -1
                _bricksArray[row][col].present = false
            } else if (leftBall == brick.rightBorder) {
                console.log("left hit")
                _ballDirX = 1
                _bricksArray[row][col].present = false
            }
        }

    }catch(e){
        // console.log("row: " + row + " col: " + col)
    }   
}

也许您会在此代码中发现一些问题，因为它尚未经过全面测试。不过希望你明白这个想法。

我强烈推荐Jake Gordon的这个“突破”教程：
http://codeincomplete.com/posts/2011/6/11/javascript_breakout/

它涵盖了使用html5画布完全实现“突破”游戏。

他在这篇具体文章中讨论了碰撞及其问题：http://codeincomplete.com/posts/2011/6/12/collision_detection_in_breakout/

上面引用的文章可能不符合您的需求，但您可以对如何在游戏中实现多种功能有深入了解。

在破砖游戏中找到最接近球的砖块

1 个答案: