javascript - 在打砖 block 游戏中找到距离球最近的砖 block

Question

为了好玩，我正在从头开始构建一个 JavaScript 打砖 block 游戏。可以玩演示here 。但是，您会看到所有冲突都没有得到处理。

在尝试通过直接计算(而不是迭代整个砖 block 数组)来处理碰撞时，我需要在每个刻度处找到距离我的球最近的砖 block ，这样我就可以比较它的边界和我的球的边界，查找是否发生碰撞。

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

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很奇怪(因为我没有正确使用它们)。它通常会发现比实际最接近的砖 block 向上 1 或向下 1 的值，这会导致像 bricksArray[1][-1] 这样的东西，当然它不存在并抛出错误。或者bricksArray[1][2]，而最近的砖 block 实际上是[1][1]，这对他们来说不太好，因为我很生气。

那么，我怎样才能找到距离我的球最近的砖 block ？(希望这是最好的方法)

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

Answer 1

您需要检查球每个方向的row 和col 的值。这样您就可以根据球的方向确定球会碰撞到哪个砖 block 。

// 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 canvas 的“突破”游戏的完整实现。

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

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