Distant Orbit – a new HTML5 game based loosely on Atari Stealth

Distant OrbitNow that Dragons is finally complete I’m going to have a bit of fun in returning to my first love – the retro style shoot ’em up.
Note: Dragons suffers some terrible performance on iOS and I intend to look in to this. When iOS5 is released to the masses next month I hope to see vastly improved CANVAS performance.
This time for my inspiration I’ve taken a classic 8-bit Atari game called Stealth. Stealth was a Broderbund hit around 1984 and at the time was probably competing with titles like Archon and Ballblazer for my attention. I adored these games and have always wanted to recreate them in some way shape or form with HTML5 and JavaScript.
So I took the Galactians code and sprite sheets and started to look at how I might achieve the effect of a moving pseudo 3D landscape.

Initially I started to play with around 8 stripes tumbling down the screen. On setup each stripe was either dark blue or light blue and I’d resize them based on their y position on screen.
But I then realised that it was pointless and I could half my drawing by simply colouring the background with CSS as the “off” stripe colour. The effect is the same. So now I just have to deal with 4 stripes hurtling down the screen at pace.

I looked long and hard at Stealth and its use of positioning and terrain handling and decided to break with the style a little. I wanted my fighter to sweep left and right and also to bank the nearer it was to the screen’s edge. Stealth moves the distant mountains and alters the way the terrain comes whizzing under your fighter. I didn’t want to do that. Not yet anyway. Not until I’ve exhausted my preferred method. We’ll see.

So just now I have some rotation going on with the main fighter sprite. I also go to the trouble of resizing the shadow that is beneath the fighter. When the fighter is banking at its sharpest angle I shrink the shadow to be quite tiny.

Once I was happy with terrain and fighter I added the lasers. For me the lasers needed to disappear to nothing and look as though they’re headed off to the distance. I shrink them based on their time on screen and then kill() them when they get to zero. The rest of it is just playing with numbers.

Finally, at least in terms of my initial tests, I spawned the aliens to emerge from the horizon, raise a little and then swoop off down the screen. They scale up as they descend – which in itself is an issue since we have some blurring to contend with – and then get kill()ed as they disappear off the bottom.

There’s so much work to be done here but I’m very happy with the initial tests. I suspect I will need to add a distance attribute to each alien and laser so that I can accurately gauge when and where any collision took place.

%d bloggers like this: