在Pong遊戲中通過槳的球

Question

我在製作另一個使用HTML5畫布和JavaScript進行Pong克隆。時遇到的問題可以最好在這個圖中被描述：

如果球是在10px的每幀中移動，我不能只是測試如果球正在觸摸槳，因爲它是可能在該步驟中球已經超過槳。

有什麼方法可以測試球是否與槳相撞？

編輯：只有2個解決方案，我能想到的此刻是：

或

Answer 1

可以通過確定線由定義的檢測碰撞槳和增量運輸線相交。如果他們這樣做，那麼你可以在交點應用反彈邏輯。

希望有所幫助。

鮑勃

到這裏看看：

http://mathcentral.uregina.ca/QQ/database/QQ.09.97/parsons1.html

記住你的幾何形狀簡單，因爲你有一個垂直線爲槳。這裏是簡化（點擊此處查看我的數學）：

// line 1 (x1,y1) to (x2,y2) 
var x1 = -1.0; 
var y1 = 1.0; 
var x2 = 1.0; 
var y2 = -1.0; 
// line 2 (x3,y3) to (x4,y4) 
// note: this is the paddle and y3=y4 
var x3 = -1.0; 
var y3 = 0.5; 
var x4 = 1.0; 
var y4 = 0.5; 

​var ix, iy; 
function calculateIntersection(){ 
    var ixtop = x1*(y2-y3) + x2*(y3-y1); 
    var ixbot = y2 - y1; 
    var ix = ixtop/ixbot; 

    var iy = y3; 
}​ 

我相信這是最有效的方法，並會提供一個準確的答案。如果沒有足夠的分辨率，對角線移動像素矩陣將導致僞像。

Answer 2

每次你的球跳十個像素，你算算確保它不會穿過一個堅實的物體，就像你看到的那樣。

Answer 3

複雜的解決方案，矢量的東西。

簡單的解決方案，而不是如果通過簡單地添加10px的移動球，通過1px的10倍移動它並且檢查每個時間是否碰撞：

for(var i = 0; i < 10; i++) { 
    moveBallByOne(); 
    if (ballCollision()) { // you could check for a simple bounding box overlap here 
     invertBallDirection(); 
     break; 
    } 
} 

Answer 4

我假設你有一個dx和dy這是每個運動的球座標的三角形或者一個角度（比如θ= theta），所以在這種情況下，dx是10 * cos（th），dy是10 *罪（th）。

你只需要看看，x + dx是否超過了槳的X座標，比如說600，如果是這樣，爲了簡單起見，說它需要2/3的dx才能到達那裏，所以你可以使用y + dy *（2/3）來找出當球到達槳的x座標時球終止的位置。

如果y小於槳葉的頂邊（頂部y）或大於槳葉底部邊緣（底部y），那麼這是一個未命中。否則，這是一個打擊。