These past couple of days I have been refactoring Sven vs Robots by dividing code into a set of ApplicationScreens.
An ApplicationScreen can be a title menu, an options menu, actual game screen etc, and essentially has a show() and a hide() method. An ApplicationScreen maintains it’s own state and also keeps a list of inputs to listen to and their corresponding action.Essentially it is a JavaScript interpretation of using the Game and Screen interfaces from the Libgdx api. So far working good, it is a natural way to divide the game into modules.
Also recently realised that creating UI controls with low level Canvas calls might not be such a good idea. In Sven vs Robots there will be a lot of focus on community-parts, like discussions, level editors, user stats and so on. So a lot of UI focus needed. There are not that many Canvas specific UI toolkits. The only one decent one I could find at time of writing is Zebra, which is GPL for non-academic use and I wish to keep my source closed, at least initially.
After browsing around on the topic I realised that the solution to not wanting to create your own low level UI Canvas toolkit is to put HTML controls within the canvas itself. You do this for example with CSS and absolute positioning. For some more info on this check HTML5 Canvas Essentials by David Geary. Currently considering using this for UI components, and also rewriting my existing UI stuff like main and level selection menus, control panel etc with HTML controls.
/Kasper