Steve and I have been getting our fill of commercial Flash Game development at our new day (and night and weekend) jobs a Zynga, so we have decided to start honing our HTML5 Canvas development skills even more by creating some fun game demos to post on the site.

We are choosing game demos because we really don’t have time to flesh these games out in the manner we would if we were going to release them commercially. This gives us the liberty to just claim a game is complete when we are sick of working on it and move on to the next one with no regrets, but still have the ability to go back and make adjustments if necessary.

This is also helping us create both a large library of game engines as well as a new set of shared game code in Javascript that might one day become a full fledged game library or framework.  The plan is for each game to add some specific utility functions or Prototype objects to the library. We will be explaining and providing the best ones here in the demo game diary blog entries.

For my first game demo I am choosing to make a game similar to the Atari Classic, Centipede. You can read more about the game here:

The Centipede page at StrategyWiki.org

The KLOV Centipede page

I chose Centipede because I like unique shooters and because I worked briefly on an official Atari version with Marty Goldberg about 2 years ago and I have wanted to make my own version since then. I am not using any of the Flash code we created for that game, but I  am instead re-writing all of the centipede movement algorithms from scratch.

Another reason I like creating game demos is that there really is no expectation of polished graphics. Since I love to create my own pixel graphics, but am only an adequate artist at best, this gives me the opportunity to pretend I am David Crane and design my own little 8-bit tile sheets to my hearts content.

So, for this first diary, I will share my the first tiles sets I made in my spare time over the weekend. The is a 16×16 set of tiles blown up inside PixelMator:

 

 

 

The first 4 tiles are the 4 states of a mushroom being destroyed. The blue triangle is currently the player sprite and the next two tiles represent the centipede head and body segments. I also created a single 2×12 missile tile for the player:

 

 

 

 

There is room on this tile sheet for 9 more missile frames. I tend to try and design my tile sheets to be in rows of 10 columns for some reason.

I was also able to create a simple version of the game. I don’t have the centipede working yet, but the slow pace is because I have been taking code from the book and making a gameutils library out of it while I code up the various parts of the game. I am not going to post a working demo yet, but here is a screen shot of what I have completed so far.

The mushrooms are in a 2d array and I use row/column tile-based logic for collision detection between the mushrooms and the player missiles. This conserves logic cycles for rendering. The playfield is a Canvas element, but I am not going to always limit my HTML5 games to just the Canvas. Time will tell if I can find any good applications for other Webkit facilities. The Canvas element (unlike the sound and video elements) is pretty well implemented across all of the various browsers, so it is safe to render using it.  For Flash developers, the Canvas is basically a combination of a BitmapData instance and a Shape instance in one. When you want to draw multiple objects,  you do so by rendering in immediate mode directly to the Canvas. There is no concept of a “Display List”, but I am actually working on creating one of my own in our gameuils library.

That’s it for this time. Next time I plan to have a working centipede that can be shot and split into multiple centipedes. It will follow similar (but not exact) logic to the arcade Centipede game. I don’t plan to spend too much time trying to duplicate the exact movement though. I will have more on this logic in the next entry.