HTML5 Canvas 2D框架專注於碰撞檢測和物理

Question

我正在尋找在畫布上下文中管理對象的最佳方法。對於我的第一個項目，我期待着做以下工作：

1. 繪製地面。
2. 用碰撞檢測和彈性將一個圓圈放到地面上。
3. 讓圓圈「爆炸」減去它下面的地面（爆炸，改變地面給出一個看起來像火山口）。

因此，基本上跟蹤物體的最佳方法是什麼，然後由其他物體改變。我猜你可以跟蹤數組中所有對象的變化，但我很好奇，是否有這樣的好框架。謝謝！

Answer 1

你需要的是JavaScript的2D遊戲引擎 可以在這裏找到 http://www.lukewallin.co.uk/?go=engine 這裏有一個演示： http://www.lukewallin.co.uk/singleplayer_games/sandbox4/sandbox.php?id=21 它甚至有爆炸:)

Answer 2

如果你想建立一個坦克遊戲（即摧毀地面武器），你最好的辦法是不實際跟蹤的是什麼/是不是接地因爲你要與荒謬的最終位置形狀。相反，使用畫布和地面圖像作爲該對象。畫布有一些方法可以在特定點獲取像素顏色，您可以使用它來檢查「是否有地面存在」。然後，您的爆炸只會擦除畫布的一部分，你會運行一個循環做任何浮動地「落」

如果你這樣做，我建議把地面本身在一個單獨的canvas元素，從任何其他元素，這樣你就可以在地面上放置效果/單位等，而不會干擾你的碰撞檢測。

Answer 3

我會看看box2d port for javascript與html5的canvas元素一起使用。過去我已經將它用於閃光燈，它是一個堅實的引擎。它會爲你做所有的碰撞和物理因素，所以你只需要聽取回調並相應地改變圖像。