HTML5 Canvas 2D Frameworks focusing on collision detection and physics

半腔热情 提交于 2019-12-11 12:24:28

问题


I am looking for the best way to manage objects within the canvas context. For my first project I am looking to do the following:

  1. Draw the ground.
  2. Drop a circle onto the ground with collision detection and elasticity.
  3. Have the circle "explode" subtracting the ground below it(Explosion that alters the ground giving a crater like look).

So basically what is the best way to track objects that then get altered by other objects. I'm guessing you could track all of the changes to an object in an array, but I was curious if there are any good frameworks for something like this. Thanks!


回答1:


what you need is the Javascript 2D Game Engine which can be found here http://www.lukewallin.co.uk/?go=engine Here's a demo: http://www.lukewallin.co.uk/singleplayer_games/sandbox4/sandbox.php?id=21 It even has explosions :)




回答2:


If you're trying to build a tank game (weapons that destroy ground), you're best bet is to not actually track the location of what is/is not ground since you're going to end up with absurd shapes. Instead, use a canvas and the image of the ground itself as that object. Canvas has methods to get a pixel color at a specific point that you can use to check "is there ground here". Your explosion would then simply erase part of the canvas and you'd run a loop to make any floating ground "fall"

If you do this, I'd suggest putting the ground itself in a separate canvas element from any other elements so that you can have effects/units/etc on top of the ground without interfering with your collision detection.




回答3:


I would have a look into the box2d port for javascript to use with html5's canvas element. I've used it for flash in the past and it is a solid engine. It will do all the collision and physics for you so all you would have to do is listen for the callbacks and change the image accordingly.



来源:https://stackoverflow.com/questions/6918342/html5-canvas-2d-frameworks-focusing-on-collision-detection-and-physics

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!