–> Here <-- is the latest version of my version of the arcade classic asteroids game written using the Canvas tag introduced in Html5. New features added this time are : 1. Big UFO makes an appearance. Note : It doesn't actually shot yet. 2. Hyperspace works. You should not appear inside any object. 3. You now start the game with 3 lives. You will only re-appear after losing a life when it is safe to do so ( as with hyperspace you will not appear inside an object ). 4. When objects are destroyed debris is produced. Comments / emails are always welcome. Let me know what you think.

Well since my last update things have been very busy and I just havent had the time to work on the Asteroids game.
I have made some progress which I hope to upload very soon.
The latest source code now has a hyperspace ( that will not drop you in the middle of a rock… or anything else ). I have UFO’s making an appearance ( but not shooting ). The game now actually has more lives.. you start the game with three.
Small improvements I admit but things which bring me ever closer to a completed game. Watch this space.. but dont hold your breath unless you can safely do so for days.

With the limited time available I have managed to make more progress with the game. This is now a playable game ( I did say playable and not fun ). This means you start a game, you play it, if your score is good enough you can enter your initials for the high score table. The rocks now break into meduim and small sizes.

Whats left to do ? Plenty. You only get 1 life currently. There are no UFO’s. The collision detection is not good. You’ll notice that for the ship. There may also be a bug in around the high score table logic. All the new code is still quite sloppy so it will need a refactor ( once Im happy with how it is working ). Only tested properly in Google Chrome. Time is too short to test everywhere all the time.

Anyway.. click –> here <-- to try it out and do let me know what you think.

I was thinking about the game and trying to find what the best size I should make it when it dawned on me that this is a vector game it can be any size I want.
A bit of digging around and a bit of tweaking the game now fills the window whatever size it is. Well.. it fills it as best it can without distorting.
I still had a bit of time left over so I had a first stab at firing shots and even collision detection between the rocks and shots. This gave me a bit of a headache because FireFox has decided to implement the isPointInPath command differently to the other browsers. Once again after some surfing I found out that a very simple tweak to the code gets it working in all the browsers again. Phew !. You basically have to reset the transformation matrix before making the check. So head on over to check it out.. or just click -> Here <-

What with this being a bank holiday weekend I finally found some time to re-visit the Asteroids prototype code I wrote a while back.
Since I wrote the original I learnt a bit more about JavaScript so I decided to pretty much start again from scratch. The code is a bit more OO this time.

It still doesn’t actually constitute a game yet but it has been written from the outset to be a fully fledged game. It has various stages from the intro page to the main page, high scores, play game, and enter initials. On screens where the ship is visible you can fly around but thats about it. Pressing the Fire Key will cycle through the game stages.
It can and does now write text and numbers onto the screen. All of which are made up of lines just like the game.
I’m quite pleased with it. I hope you like the progress I have made. I hit a few issues which I had to workaround but the result is that it works in all the big browsers ( FireFox, Chrome, Opera, Safari ) except IE.

Click on the image if you want to give it go.

Very little progress has been made.
The latest version of the code is starting to produce a bit of code smell and I’m not happy with it. It will need a rewrite.

In the meantime if you go to the page you can find the lastest version of the game.

Note : I am drawing a shield on the screen but it doesnt interact with anything yet. That is next on the list of things to do.

Note2 : It has only really been tested with the chrome browser however I did notice the other day that in firefox the base shot is slightly offset. I need to look into why that is.

I’ve had a bit more spare time to look into Html5. The asteroids game was vector graphics. Now I wanted to try raster graphics. To this end I have started on my old favourite Space Invaders. A simple game but it have does have raster graphics, quite a few sprites on the screen at any one time and the bases are destructible. A nice selection of things covered.
Sound will not be covered. As mentioned before sound is not properly defined and until some sort of standard is defined I’m not going to waste time trying to write around what we currently get between the browsers.
The page is very much work in progress and doesn’t look anywhere close to finished. But bear with me.

Although there is a lot more to do to make the Asteroids game complete there is something very important missing that I thought needed adding next. Sound. Even adding the pwep! sound of a shot being fired would make the whole thing seem more complete.

To this end I thought I would take a look at the audio tag. Then it all just started going downhill. It seems each browser has implemented it differently. I had some success getting FireFox and Safari to play a wav file. Opera remained silent regardless of what sound file I gave it. I haven’t had a chance to try Chrome but from what I have read it does not support wav files but can play ogg ( which firefox supports but safari does not). Oh what a pickle. I thought/hoped the standard would specify what formats should be supported and all the browsers would implement it. Instead it seems it only specifies the methods/attributes. As an additional blow the methods available seem a little incomplete. From what I can see ( correct me if I’m wrong ) you can play and pause and carry on playing but you cannot stop and start playing from the beginning again. As I said.. what a pickle. This is going to take longer than I thought. It also explains why so many Html5 demo’s do not play sound or only play sound on specific browsers. BAH!

OK. This has been a busy few days. Don’t get excited. It will slow down again very soon now I have pretty much got everything back up and running.

As a bonus over the last few weeks I have been looking at Html5. As is my way I started writing a game to learn. In this case I have started with Asteroids as it is a good example of line drawing polygons and rotations. I actually already had a large part of an Asteroids game already written but in my haste I only tested in Chrome and it turned out it only partially worked in varying degrees in the other main browsers ( FireFox, Safari, Opera ). I have now started re-writing it but I am testing on all of the four browsers. This slows down development somewhat while I discover the quirks of each one but the result should be working game for you and a much better knowledge of what is currently implemented in all the browsers.

It is just an Html page with some javascript so there is nothing to stop you from saving the page and claiming it as your own work. If you do take all or part of the code I would appreciate a mention and a link back to the original code. Thanks.