Converting a desktop game to a web app

Two years ago, I wrote a simple desktop game, Save My Cheese, mainly to explore the A* pathfinding algorithm. In the game you are trying to block the path of mice by puzzle pieces and prevent the mice from reaching the cheese. When you finish the puzzle before the mice reach the cheese, you finish that level.

If you want to run the game you have to

1. Install latest NetBeans & Java bundle (I recommend to download the JavaEE bundle so that you can run the web version below too) .
2. Download project from GitHub.
3. Open project in NetBeans and run it.

Recently, I got interested in web app development and rewrote the game as a web application.

The main challenge during this rewrite was to use the original Java game engine (backend) and write an HTML/Javascript front end.

I first looked at some web frameworks like Play, but did not use them since for my simple app, learning how to use the framework would take longer than to use vanilla Javascript.

Next, I had to find out what protocol to use for communication between the back and front ends. The most logical choice seemed websockets. However, App Engine was not supporting websockets, so I decided to use HTTP.

The downside of HTTP is that it works on the request-response model, i.e. communication only occurs if there is a request from the front end to the backend. This meant that I had to move the game timer out from the Java backend to the Javascript front end. My attempt to make it work on App Engine failed again which made me question the usefulness of App Engine.

I used the gson library to convert objects to json strings and back. I sent json strings between the back and front ends. Since the front end and backend was completely decoupled (i.e. they were separate processes, one working in the JVM, the other in the browser), I had to pass the whole game state as a giant json string from the back end to the front end. I captured mouse events on the HTML/Javascipt side and send them as a json string to Java. This meant that instead of the controller setting the mouse event handler in the view, the controller's job was to respond to requests and convert json strings back and forth, i.e it was an adapter.

Doing web app development was a little frustrating from the debugging point of view because

• I could not set breapoints in JavaScript within NetBeans. I had to use the browsers debugging tools. I made use of a lot of print() statements in Java and alert() calls in JavaScript.
• Sometimes the code changes would not be reflected on the app instantly and I lost time wondering what was wrong. A browser refresh usually resolves it.

Right now my web version only works on local browser. If you want to try it you have to

1. Install latest NetBeans & JavaEE bundle (Note that JavaSE is not enough because it lacks webserver)
2. Download latest gson jar file.
3. Download project from GitHub.
4. Open project in NetBeans.
5. Point gson to the jar file you downloaded in step 2.
6. Run it. The game will launch in your default web browser.

In the future I plan to

• Use websockets and move the game timer back to Java backend.
• Use Play framework to gain experience with using web frameworks.
• Buy a VPS and host my game there.
• Polish the game (sounds, graphics, levels).
• Port it to Android.