While I’ve been developing Rich Internet Applications for the past five years, it has been a long time since I’ve had to program true HTML5, CSS and JavaScript.  The last time I wrote a legitimate HTML based webpage, the industry standard was laying out the content in tables.  Attempting to dive in and learn all the new pieces seemed daunting.  I decided to start my focus on the Canvas component in HTML5 because of its relative closeness to the Canvas component in Flex.

My goal was to develop something that was animated,  took advantage of keyboard and mouse clicks, and could be used on mobile devices.  I created the classic game Snake. Use your WSDA keys to control the movement.  Alternatively, for mobile devices without key support you can click in the top, bottom, right and left purple squares to move the snake in that direction.

* Update 11/17/2012 – These files seem to have been lost in the move.

Drawing on the Canvas requires you to call the stroke() function. I feel silly even mentioning this, but it  took me at least twenty frustrated minutes thinking my code wasn’t executing at all until I figured this out.  If you do not call this function after creating your paths, nothing shows up on screen…

{code type=javascript}
gDrawingContext.beginPath();
gDrawingContext.strokeStyle = “#FF00FF”;
gDrawingContext.moveTo( 0, yB+ yB);
gDrawingContext.lineTo( gWidth, yB+ yB);
gDrawingContext.stroke(); /* CALL ME */
{/code}

Redrawing on the canvas is slow. At least it is on the iPad and my Droid Incredible.  I had done a previous experiment where I had red squares bouncing all over the screen.  This effect was made by redrawing both the grid and the red pixels each interval.  While it looked smooth on my computer screen, it was extremely choppy on the mobile devices.  To make the Snake game smooth, I’m only redrawing what is necessary.  For the Snake, I’m drawing black squares over the tail, and adding red squares to the head to create the movement effect.  I know that there must be ways to have smooth animations on mobile devices (I’ve seen them!) but they currently elude me.  More research on this to come.

Clicking a Canvas within the mobile device browsers has a significant delay. While it does register the clicks, there is a delay between clicking, and having the snake change directions.  I believe this is an issue with the touch screens trying to determine the intentions of the users finger on the screen within a browser.  I’d like to do further tests to find out if this is something that I can fix, or at least predict exact delays.  I noticed on the Droid Incredible, clicking the Snake game causes the entire Canvas to highlight green, as if its reacting to it like one big button.

There does not seem to be a ‘focus’ in HTML5 Canvas. I had originally programmed the game to use the arrow keys to control the direction of the snake.  I had to change this because there doesn’t appear to be a way to differentiate that the arrows are supposed to control the Snake game (IE: The snake game has focus) and not the scrollbars of the webpage.  So clicking down would send the snake in a downward direction, but it would also scroll your page down.  This is a little difficult to see on my blog, because I am embedding the Snake game in an iFrame to make it work with WordPress.

Thats all for now!  Feel free to browse the project code.  The major code components to this application are:

• http://www.dcholth.com/html5/20101103/snake/snake.html
• http://www.dcholth.com/html5/20101103/snake/snake_code.js

* Update 11/17/2012 – These files seem to have been lost in the move.