It is with great pride today that we publicly announce the immediate availability of Rvrsit, our very first HTML5 game!
I began development of this game over a year ago, when Sencha Touch 1.0 was in release candidate phase. My initial inspiration came from my experience in teaching my 4.5 year old son (now 6) how to play Othello. Little did I know that it would take over a year to get to this point!
In order to figure out a fast way to get the AI working, I began to think about the rules of game play. Then, I needed to figure out how to get those rules into play. The result was an approach that was different compared to anything that I could find, but extremely fast!
Beginning with Sencha Touch, I decided to create components that could be placed into a game board. The Chip class was constructed to be smart enough to know whether or not it was an edge piece or not and know of its nearest neighbor.
(This version of the game does not come with the necessary A.I. to allow the computer to compete against the player)
Fast forward to 2012
Soon after the turn of the new year, I was able to begin focusing on Rvrsit again! I began by converting the Sencha Touch 1.0 code to 2.0. I was left with the same quick response time but faced CSS3 animation issues. I couldn’t have the silky smooth 3d transition of a two-colored chip that I wanted. This led me down the path of HTML5 game engines.
I gave the prototype to my two boys, Takeshi and Kenji and they were able to play against each other without any issues.
After the migration to ImpactJS, I was able to leverage the Chip connection design to create efficient A.I., allowing the computer to make decisions based on which chips were available to be flipped. In this decision loop, the computer first gathers a list of chips that are currently visible. It then loops through that small list and asks those chips whether or not its neighbors are valid playing options. After it determines all of the valid moves, it figures out which is the biggest gain for it. It then flips the chips that gain it the biggest score, allowing for the human player to make their move. The speed of the AI is evident when playing against the computer, even in the slowest mobile tablets, including the Motorola Xoom, Blackberry Playbook and Kindle Fire.
After this prototyping phase, it was time for design. This is where team member Dave Ackerman came into play. Dave was able to take the initial game prototypes and add much-needed polish. Some of our design inspiration came from our good friend Michael Harris, with his wildly successful HTML5 Sudoku game, which can be found in the Google chrome store today.
That leaves us where we’re at today. A well-designed app that leverages the best HTML5 UI framework with the best HTML5 game framework.
Looking to the future
The Rvrsit evolution is not done! Here’s a list of features that we already have in the works.
- Use of HTML5 sound API for game sounds & in-game music
- Two player game play via the cloud
- Full integration with Silk JS, an up and coming Server side framework
- Multi-device UI layout
- Multiple layouts
In closing, as we progress, we’ll be providing in-depth blog posts. In these blog posts, we’ll be doing deep-dives into how we use each layer of the technology.