Rocks in Spaace
Rocks in Spaace

I had a week off where I revisted the Game Engine. Sounds in particular. I have a better idea of the quirks when dealing with sound. I just have not come up with a simple way to deal with it.

Anyway… I missed writing a game so this week I wrote a simplified version of asteroids ( bet you didn’t think it could get any simpler! ). It still has a few rough edges which I may revisit sometime. I guess it depends on how popular it turns out to be.

So… here it is… this weeks game is Asteroids… I mean… here it is…  Rocks in Spaace!


QB Asteroids - Now with sound... sometimes

Its been a long time since I have had any time to look at this code so I figured I would just post up where I got to.

This is pretty much the same game as before but now it tries to play sounds. In keeping with the rest of this project the sounds are not an external resource. It is all generated with code.

It sounds a bit raspy in Chrome and Opera remains silent.

Still… its progress of sorts.

You can find this latest version here

The time between updates is huge but this is still being worked on.

My current goal is implementing some sort of sounds. In keeping with the general theme of ‘no external media’ the first challenge was how ( if possible ) can you create and play a sound in javascript. The answer is that it is possible. You can create a wav file in memory and then get the audio tag to reference it.

A big thank you must be given to Steven Wittens (Here) for showing how this can be done.

 The bad news is that for some reason Opera doesnt want to play ball. So for sounds I am now reduced to a list of Firefox, Safari and Chrome as browser platforms. I’m hoping that eventually Opera will fall in line.

 Of course next I needed some way of generating sounds. I wanted to work it out for myself and I have something that allows me to make something approaching usable sounds. There is also the issue of having several sounds playing. The control of the audio tag is still currently very limited so I need to try out a few different ways to come up with what I think works best.

The code I have is still very much rough and ready and until I clean it up a little bit I dont want to release it.

So… to sum up… I have something… but Im not sharing… yet.

–> 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.

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!