在浏览器（完整视口）中呈现JavaScript游戏的最佳解决方案是什么？

Question

I think there are two diffrent solutions for the problem:

1) First the solution shown by aves Engine, which renders the whole game with html elements and external stylesheets eg CSS3 transfomations. Pro's are that the event-handling is much easier when working with div's than by rendering on canvas.

2) Like isogenicengine.com shows you could render the game on html5 canvas element. Mabye that's the better solution, because rendering on canvas is the way that millions of 2D-games were written before and in future the industry will optimize the drawing methods eg with hardware acceleration. At the moment the contra is that rendering on canvas is slow if you would like to render in fullscreen. If you would like to render only in a specific area of 200x200px that's okay, but in fullscreen you get stuck with a framerate of 10fps.

What do you think is the better way to create a game for the web?

Thanks for your opinion! PS: If you have some articles about the topic please paste some links

Answer 1

I don't think it's a clear one size fits all kind of thing. I really think it depends on what you want to do with your game.

If you are doing a lot of vector graphic manipulation, perhaps canvas is a better choice vs engine like aves. For tiled based, maybe aves will work better.

Answer 2

You can render fast on fullscreen canvas if you're clever about only re-rendering dirty regions. But if your whole canvas needs to change every frame this obviously isn't going to help much.

Answer 3

I've spent alot of time recently looking into this issue and my conclusion is pretty simple.

Use HTML Elements, lets say that HTML5 actually makes progress and in one year the major browser support it. How long does it then take to get the general user base of the web on the latest browser (IE6 still has a choke hold in some sectors). So making the game available to as many people as possible is key! (In my mind anyways)

If however, your looking to learn and develop, go with canvas.