HTML 5 Canvas Game
Posted by Jiri Bakker on 15 December 2011
Tag(s): Hobbyprojecten, Infi, Mobile
As a developer at Infi I am granted a week a year to work on a project of choice. Considering my gaming roots - I hold a Master’s degree in Gaming and Media Technology - I wanted to create a game on a mobile platform. Since my preference was to support as many mobile operating systems as possible, as well as desktop computers, I decided to use HTML 5 as my weapon of choice. HTML 5 which is generally well supported on the current generation’s mobile devices.
HTML 5 supports to use of a canvas element which allows you to render graphics into the browser. Advanced features of this canvas also support shader rendering as well as some other cool techniques.
Since I was only able to spend a week on this game I chose to create a basic game, thereby only using the basic features that the HTML 5 canvas supports. My goal was to get familiar with these basics, which could then aid me if I ever felt like attempting more graphically advanced projects with HTML 5.
My game of choice therefore was a game based upon the popular board game Risk. My game will not be an exact clone, but a strategy game which resembles a lot of the gameplay features found in Risk. I’ve also used some ideas from the flash game Dice Wars, which is a simple yet addictive game, also with a resemblance to Risk.
At first, my idea was to create a randomly generated playing field, which would create a random set of regions which would then be divided amongst the players. After implementing a basic algorithm to generate these maps I ended up with playing fields such as these:
Though very colourful, the regions tend to vary in size quite a lot. Obviously, this could be improved by adjusting the generation algorithm, but I felt that it would still be hard to create a useful playing field, since we would also want to add some game info (such as number of troops) to the regions, which would become quite difficult when the regions are small, or oddly shaped. In addition to this, the balance of the gameplay is harder to control with these random maps, which could decrease the quality of the game.
Therefore, I decided to throw away the randomly generated maps and use a static, and somewhat traditional, world map instead:
Using this map, the gameplay is more balanced and easier to control. I also believe it adds to the presentation of the game: it represents something people recognize, thus grabbing their attention.
Now that the playing field had been created, I needed to implement the actual gameplay, including the feedback to the players what was going on. Using the HTML 5 canvas I built up the game by adding coloured regions, troop info, player info and some other minor things. The resulting game board looks like this:
Since it should be possible to play the game against opponents on other devices, we need to store the game’s state on a server and communicate it back to the separate players. A database on the server contains the state of the regions in the game as well as the current player and other relevant data. Whenever changes are made to this state the players are notified to update their local game state.
In addition to the technical set-up of the game, I also had to decide on how to structure the actual gameplay. Here’s a summary of the current rules of the game:
- A player can attack an opponent’s region connected to a region that he controls himself.
- When attacking, the number of troops on the region designates how many dice are thrown. Similarly, the number of troops on the defending region designates how many dice the defender may throw.
- The winner of a duel is the player with the highest score in the dice roll. If the score is a tie, the defender wins.
- When an attack is successful, all the troops of the attacker, except one, move to the new region.
- When an attack fails, all the troops of the attacking region except for one are removed from the game.
- At the end of the turn, the player receives an amount of troops equal to the largest connected set of regions (see for example the image above, where the red player has 13 connected regions in Europe and Asia, and the blue player only has a maximum of four in Northern America as well as in East Asia).
- The troops received at the end of the turn are randomly distributed amongst the player’s regions.
Now that the game has been implemented, a more aesthetically pleasing lay-out had to be added to the game, since there was only a canvas at this time. I used jQuery Mobile and some of the work that my colleague Scato Eggen had done for his Mobile Chess game to create a partnering system that allows you to partner up with an available opponent. Currently, it just looks for any available player, so you don’t really have control over the matching process. Nevertheless, when two players sign in more or less at the same time, odds are that they will be partnered up.
At this time, the game is in a playable state (assuming your browser supports HTML 5, which most do nowadays), and it can be tested and played at http://jiri.hobby.infi.nl. Any feedback on the game, as well as bugs, is welcome at jiri@infi.nl.
Due to the restricted amount of time I was able to spend on developing this game, there are still a couple of rough edges that need to be worked on. I intend to develop the game further in the future, hopefully ending up with a new competitor to Wordfeud or Angry Birds. We will see!
