Cross-platform games HTML5 DOM + CSS vs CANVAS vs both

Question

Over the past few months, I have created several HTML5 games and used createJS and visualized everything on the canvas.

The reasons for choosing a canvas are because it was easier to get it working with a cross platform, because I could just scale the canvas to fit the screen, and everything was perfect. Well, on most devices! Performance is a problem for older Android and ios devices, but not terrifying.

My next HTML5 is biggie, the previous games were just simple and clicky, a quiz style game with a little animation and very few menus. This is a great lunch with a lot more menus, interactive objects, but again only simple animations. But this is due to the possibility of panning (this word).

I was more likely to use DOM and CSS for HUD elements and menus for this, which would overlay on top of the canvas using the main panning environment.

I understand that working with multiple screen resolutions may take longer, using multiple CSS format requests and even different layouts for lower resolutions (for example, hiding certain shortcuts from the HUD or something else)

I am looking for a comparison of technologies for greater performance, as well as to find out which methods are "best practice."

---

It would be nice to see some examples of multi-platform games using these various methods (or even others that I don’t know about) to see how they go about this and test the performance. :)

Answer 1

You must choose for a simple solution. If I were you, I would continue to use the createJS package because it contains everything you need. This is really good and does not give you performance problems if you ask me. There has never been a problem with this.

Answer 2

It definitely depends on the complexity of the game. Last year, I tried to develop a full-fledged DOM game with a pan-map. But I faced so many problems with the performance and inconsistency of the device that I had to refuse. Now I do not remember the exact values, but the number of DOM elements that make the browser unstable is quite small for playing everywhere after "very simple".

I would try, as you mentioned, the DOM interface on top of the canvas environment. And anyway, let it be easy!