1

我正在从头开始构建一个 JavaScript 砖块破坏游戏，以获得乐趣。可以在这里播放演示。但是，您会看到所有冲突都没有得到处理。

为了尝试通过直接计算（而不是遍历整个砖块阵列）来处理碰撞，我需要在每个滴答声中找到离我的球​​最近的砖块，这样我就可以比较它的边界和我的球的边界，看看是否有是一次碰撞。

我有一个 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))

我建议您在其上下文中查看代码，以清楚地了解我要做什么。（我提交了我的试验和调试的东西让你看到，也许比我更能理解我的问题。混乱发生在第 208 行和第 246 行之间）。

实际上，这两个Math.floor很奇怪（因为我没有正确使用它们）。它通常会找到比实际最近的砖高 1 或低 1 的值，这会导致诸如此类的事情bricksArray[1][-1]当然不存在并引发错误。或者bricksArray[1][2]当最近的砖实际上是[1][1]，这对他们来说不是很好，因为我生气了。

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

另外：我的球目前只能向 4 个方向移动，_ballDirX并且_ballDirY只能采用1或-1。我知道三角圆的东西，但我想知道碰撞是否仍然会“那么简单”......

4

1 回答 1

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)
    }   
}

也许您会在这段代码中发现一些问题，因为它没有经过全面测试。尽管如此，希望你明白这一点。

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

它涵盖了使用 html5 画布的“突围”游戏的完整实现。

他在这篇特别的文章中处理了碰撞及其问题：http: //codeincomplete.com/posts/2011/6/12/collision_detection_in_breakout/

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

于 2013-04-21T07:58:03.400 回答