Adapting Javascript game for mobile

Question

I'm currently developing a Javascript web game for desktop users. It is a sort of tower-defense game that relies on mouse input only, developed on canvas using EaselJS. In the future, or perhaps simultaneously, I would like to adapt the game for mobile devices.

I can see at least 3 potential areas in shifting from desktop to mobile: 1. resolution size and UI rearrangement, 2. converting mouse events to touch events, 3. distribution as native app wrapper or mobile Web.

What would be the best strategy to facilitate this desktop to mobile conversion? For example, should I try to code the game for both platforms, or port the game UI over to mobile by branching the code base. Should I just publish on the mobile Web or wrap the game in a native app framework? And if I were to code for both platforms using the same codebase, should I register both click and touch events, or remap click events to touch using dispatchEvent?

Answer 1

1) Resolution doesn't have to be an issue, depending on your game logic. If your world is "larger" then your screen resolution, simply create some way of moving the world left/right - up/down. You could also implement scaling depending on the resolution.

On a computer you can listen to keydown events, on a tablet you could use the tablets rotation to move the top down camera while you touch the screen on a specific place (button etc.) or you could use swipes to do this.

UI arrangement can indeed be quite different, mobile phones have less space then tablets, which have less space then 24" desktop monitors etc. I would try to make my interface be as 'hideable' as possible -> when you click on a small icon of part of the screen the menu pops up.

2) Converting mouse events shouldn't be that big of an issue unless you are using right mouse button or drag/drop. If your game only responds to clicks then this could work on a mobile device by default.

3) Use phonegap or similar tool to publish html/js apps to multiple platforms at the same time. I don't know the specific requirements for the app to work with phonegap, but their site explains all.