在磚頭破碎遊戲中找到最接近磚頭的磚塊

我正在構建一款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，這導致了像bricksArray[1][-1]這樣的東西當然不存在並且會拋出錯誤。或者bricksArray[1][2]，當最近的磚塊實際上是[1][1]，這不是很好，因爲我生氣了。

那麼，我怎樣才能找到最接近我的球的磚？（希望這是做的最好的方式）

另外：我的球，目前在只有4方向移動，因爲_ballDirX和_ballDirY只能採取1或-1。我知道三角形圈的東西，但然後我想知道如果碰撞仍然是「那麼簡單」...

來源

2013-04-20 thibaultcha

你需要檢查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畫布「突圍」的遊戲。

他把衝突以及其問題本especific文章：http://codeincomplete.com/posts/2011/6/12/collision_detection_in_breakout/

上面提到的文章可能不適合您的需求，但你可以有關於如何實現在遊戲中的幾個特點很好的見解。

來源

2013-04-21 07:58:03

在磚頭破碎遊戲中找到最接近磚頭的磚塊

回答

相關問題