Atmosera

Categories: Blog

The Cascade Game: From Silverlight to HTML5 (part 1)

A few years ago I played a game on Facebook that had a simple premise, but became quite addictive for a while. It consisted of progressing levels of spheres in which the player was tasked with exploding by initiating a chain-reaction. You had one shot. Placement, timing, and luck determined how well you scored. At the time, I was learning Silverlight and thought it would be a good sample project to duplicate the fundamentals of this game in Silverlight, and thus Cascade was born.

Now, with the advent of Html5 and Javascript poised to reclaim the virtual landscape, I decided that it may be a beneficial learning experience to rewrite Cascade as an HTML5 application. The next series of posts will outline my progression in converting the Silverlight version of Cascade into a workable Html5 game.

The first thing I started with in the conversion was the shell for the game, a simple HTML5 page. At this point, it’s still in the rough sketch phase (I’ll add more finalized artwork later). Below is a picture of the game board with very little in the graphics department. The HTML5 markup is pretty basic, but I wanted to put a gradient in the header. With HTML5 and CSS3, gradients are very simple to implement without having to use a repeating graphic image. So, while still possible to achieve this affect with either a large image or a small, repeated one, the new gradient effects in HTML5 /CSS3 are better for two reasons: they look good at all resolutions and are smaller in download size.

Unfortunately, Internet Explorer 9 does not support gradients. However, it does support Scalable Vector Graphics (SVG), as do all the other mainstream browsers. So, while it’s not quite pure HTML5, the SVG background scales just as nicely and is minimal in size: see Robert Biggs’ blog at http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/ for more information. I borrowed and slightly tweaked the Robert’s SVG gradient for my project. And while he mentions customizing the code to only show the SVG for IE9, I’m inclined to let the other browsers use the SVG as well.

There is a good case to be made to support SVG only in Internet Explorer and use the HTML5/CSS3 gradients for all other browsers. However, for the purposes of this project, I’m going to stick with the one method; in a production application, I’d follow Robert’s advice and create the customization since IE will eventually support the feature.

The HTML is rather straight-forward and simplistic: it consists of a few CSS3 styles, a handful of HTML tags, and some Javascript.

   1: <body style="margin: 0">

   2:     <header id="scoreBoard" class="boxSizing">

   3:         <article class="box">

   4:             <div>CASCADE</div>

   5:             <div>powered by Wintellect</div>

   6:             <div id="headerControls" style="display: box">

   7:                 <input type="checkbox">Turn off collisions.</input>

   8:                 <a href="#" style="align: right">Help</a>

   9:             </div>

  10:         </article>

  11:         <article style="margin-top: 15px; vertical-align: bottom">

  12:             <div class="fixedWidthColumn">Score: <span id="score" /></div>

  13:             <div class="fixedWidthColumn">Level: <span id="level" /></div>

  14:             <div class="fixedWidthColumn">Goal: <span id="goalObtained"/> / <span id="goalTarget" /></div>

  15:             <div class="fixedWidthColumn">Total: <span id="total" /></div>

  16:         </article>

  17:     </header>

18:

  19:     <div id="playingBoard" class="boxSizing">></div>

  20: </body>

As you can see, there’s not too much to it. In fact, there isn’t much that’s HTML5 specific (the article and header tags could easily be replaced by standard divs). Also, I’m using a div to represent the playing board, and not a canvas (the reason is that the I’ll be dynamically creating canvases to hold the spheres and animating them individually instead of painting and clearing a single canvas…more on that in the next post).

The elements are styled through CSS3 to provide the image you see in the snapshot above.

   1: <style>

   2:     .boxSizing {

   3:         -moz-box-sizing: border-box;

   4:         -webkit-box-sizing: border-box;

   5:         -o-box-sizing: border-box;

   6:         box-sizing: border-box;

   7:     }

8:

   9:     #scoreBoard {

  10:         background-image: url('background.svg');

  11:         border: 1px solid gray;

  12:         width: 800px;

  13:         height: 120px;

  14:     }

15:

  16:     article {

  17:         font-family: verdana;

  18:         font-size: 14pt;

  19:     }

20:

  21:     .fixedWidthColumn {

  22:         border: 1px dotted white;

  23:         float: left;

  24:         width: 24%;

  25:         margin-left: 0.5%;

  26:         margin-right: 0.5%;

  27:         padding: 2px;

  28:         -moz-box-sizing: border-box;

  29:         -webkit-box-sizing: border-box;

  30:         -o-box-sizing: border-box;

  31:         box-sizing: border-box;

  32:     }

33:

  34:     #playingBoard

  35:     {

  36:         border: 4px solid gray;

  37:         background: black;

  38:         width: 800px;

  39:         height: 480px;

  40:         position:fixed;

  41:     }

  42: </style>

For both the Silverlight game and this one, I fixed the size of the game to be 800×600. My reasoning was that game’s difficulty is dependent upon the number, size, and speed of spheres flying around. Perhaps I’ll adjust the size of the spheres in this version to be proportional to the size of the game board and see how that affects the playability of the game.

One other note is the use of the box-sizing attributes set to border-box. HTML5 allows the developer to change the way boxes are measured. The simplistic answer is that the default method, called content-box (HTML4 and earlier) don’t include the margins and border when you define the width and height. Meaning if you create a 100px wide and 50px tall element and put a 2px border around it, the element would actually appear to take up 104px by 54px on the screen. By setting the box-sizing to border-box, I’m telling the browser to render the border, padding, and margins inside the element. I prefer box sizing since I know that the total space taken by the visual element is what I set it to.

After getting the basic UI of the game in place, I set up the game’s programming framework: basically initialization, start logic, game timing loop, and cleanup. Part 2 of the this blog series will dive into the level initialization and the animation of the spheres.

Sergio Loscialo