Tuesday, June 30, 2015

New version of colors available

A new version of colors - the game is available on the app stores.



colors - the game

   


colors is an HTML5 app wrapped with Cordova to bring it to the app stores. Like we did with F.A.T.Z  we learned a lot of things along the way.

Game part

Many users stopped using the app when they were in the middle of the game. We tried to give them more information to understand the game even if they never played it before.

We also changed the game mode: While in older versions you just were punished for wrong choices now the game ends immediately if you touch a wrong color. We think this will help the player to understand the game even quicker. Also most players abort the game after making an error anyway, because after that there is no chance to break the high score anymore.

Technical part

Our focus was to write clean, readable, maintainable and decoupled javascript code.

We used require.js to support that goal. Even though require.js is a great piece of software, we might use Browserify in the future. It's less boilerplate and integrates in a good way with our node.js work. Even though we don't like the build step that comes with Browserify.

A cool way to integrate cordova with require.js might be the following attempt.

require(["cordova"], function() {
"use strict";
document.addEventListener("deviceready", function() {
require(["app", "fastclick"], function(App, fastclick) {
fastclick.attach(document.body);
new App();
});
});
});

If you declare cordova in the require.js config with optional paths you can easily implement a fallback file for testing in the browser where you have no cordova.

cordova: [
"cordova",
"debug"
], 
As in the past we used Backbone. We separated data, views and game logic in the following structure:

/model
/controller
/viewController
/view
/template

This worked pretty well as we changed the game logic a few times. The hardest part with Backbone is to control your subviews. We've implemented a BaseView that can handle multiple subviews to change them if the model changes or delegate user input to the viewController.

Backbone.localStorage helped us to store user settings and local high scores on the device. For our global high score we used Parse.com.

That's just the tip of the iceberg, but if you have any questions feel free to contact us. We're on Twitter and Facebook.