Andromeda Invaders: A retro-style game written in HTML5, Canvas, and Web Audio | Hacker News Reader

Andromeda Invaders: A retro-style game written in HTML5, Canvas, and Web Audio

susam.net

167 pointssusam34 comments

The arcade-style computer games of 1980s played a big role in getting me fascinated about computers. Last year, I wrote this game on a weekend to fulfill a childhood dream of writing my own invaders-like game.

It is a standalone HTML page, so you can view source to see the entire source code. Also, see https://github.com/susam/invaders for source code.

The levels appear to get very hard very quickly but my friends who initially played this game were able to reach up to level 5 with some practice and then level 10 or so after some attempts. I could reach level 11 after a week of playing (https://i.imgur.com/c0twMr4.png). I have found that in the later levels, it is best to play each level in two phases: First focus only on avoiding the falling boulders. Try to find regions where there are less invaders hovering and try to be there. After some of the invaders vanish by fluke hits and the level becomes easier, play normally.

Pressing Enter as a key that gets you to the credits but then also restarts the game is a bummer.

I was on L4 and hit Enter accidentally and it reset my game. :-(

I managed to get to Level 10 after the 3rd try.

I'm using Firefox, not sure whether it's easier (slower) on Firefox?

P.S. surprisingly fun game. Now it needs a leader board to go viral ;)

You also seem to be interested in Lisp - maybe do a version in ClojureScript.

This is great. Reading the source reminds me of reading the game programming (in C) books I read as a kid. Thanks!

Nice work. Next up: multiplayer!

This is an great example of how you don’t need fancy graphics for good, playable and engaging games. The music combined with the sound effects works really well too and is very simple.

Disclaimer: not a webdev so I might be speaking nonsense.

I've been reading about Canvas, it seems to get a lot of stick for not being accessible. Certainly a lot of criticism for flutter web using it. When is it good and not good to use? I'm assuming games it's good for.

Complete novice so looking forward to being educated. Thanks.

Generally speaking, it shouldn't be used to implement features that the browser ought to handle, like font support. The criticizm does not seem to apply here.

Canvas is an HTML element for drawing graphics. It's by far the fastest way to draw and animate lots and lots of things. 2d/3d, it's all the same. Performance is not free, though. It eats CPU cycles for breakfast if you let it. And as you were told - you cannot edit it as it's a canvas, not a document.

The reason it's faster is because it is designed for that sort of thing, whereas web pages are meant to be mostly static, which is a good thing. Different use cases

Canvas is for drawing shapes, primarily. It has some basic font support.

The browser can’t really do much with those shapes in terms of accessibility. Perhaps zooming or increasing contrast? The cases where it makes sense are few. Also, svg support has gotten better, and is easier to use, if you need simple animations embedded within a regular, otherwise accessible page.

Hope that helps.

Paths may be hit areas for UI interaction, though. I've no idea to how this translates to accessibility and if any of this can be exposed.

General advice: treat it like an image. If an image is good for the job, a canvas will be as well. Otherwise, if it is essential for navigation or getting the gist of that page, you may consider complementary elements or an all together different approach. However, if there is no sense in an alternative representation (like in the case of an arcade-style game), this type of content should be still allowed.

It has nothing to do with canvas. There's no reason a game like this couldn't be implemented with regular html elements & CSS, but that would do nothing to make it "accessible".

Sprites move in sub pixel-grid increments.

That immediately destroys the retro feeling for me.

This bothered me too! Although all pixel calculation in the code uses integers only, unfortunately HTML5 Canvas can by itself perform subpixel rendering and anti-aliasing. I could not find a way to disable it. If there is a known solution to this that does not add too much complexity to the code, I would love a pull request for it at https://github.com/susam/invaders.

I see you specify a fixed context width/height. That's fine — who can guess what size the user's browser window will be....

I think in that scenario though you ought to create your own "off-screen canvas" to render your sprites/drawing/text to. Then when you have completed the render/loop, draw from your offscreen canvas's context to the browser canvas's context.

As another replied, you can probably change the scaling attribute (turn off imageSmoothingQuality) to get what you want.

This article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.

Plot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...

An update regarding this thread:

I received a pull request that adds pixelated rendering to the game canvas: https://github.com/susam/invaders/pull/4

I have merged it now. Thank you, everyone, for the discussion regarding retro-style rendering on this thread.

L5 got me - I was in the flow, but it seems the enemy shots starting falling like sidewards rain and I lost the ability to do anything but quickly die. I'll let the kids play tomorrow to make sure they don't get as far for personal validation.

Nice game! It's fun. But L4 got me dead almost instantly, maybe avoiding this kind of situation would be an improvement. Or maybe not

I thought requestAnimationFrame was preferred instead of setTimeout? Or is there no advantage in a simple animation like this one?

requestAnimationFrame has a whole bunch of advantages, but you don't technically need it if you don't care about smoothness or efficiency or battery life or users browsing in other tabs or scrolling away. For something so simple, the impact will be minimal.

Did this remind anyone else of Phoenix for the TI-83 calculators?

https://www.ticalc.org/archives/files/fileinfo/148/14876.htm...

I like it!

However, a limitless reward for shooting boulders is a very problematic design decision because it incentivizes an intrinsically boring task.

Also, the amount of randomness is remarkably high for a genre defined by the relentless yet predictable march of the enemy ships.

Congrats, good game. I have one suggestion - maybe move the restart button away from left/right keys a bit? Fat fingers here :)

Yes, I accidentally keep hitting the reset button.

Maybe this is meant to be part of the challenge?

Very nice! Reminds me of a little HTML5 Asteroids clone/mutant I wrote a while ago: https://heyitsguay.github.io/asteroids/

I should figure out how to add sound. It's always inspiring to see the great work of others :)

I have to say this is really quite good.

It looks simple (and it is) but it's been done well.

Fun! Nice retro vibe. Great job. Interesting aspects for me are i) automatic shooting and ii) multiple hits required to bring down a ship.

It's cute and cool. Reminds me of Demon Attack. It's nice to see somebody take the plunge and just... write a game.

Freezes after a few shots for me -- both Brave and Firefox. Possibly hug of death from HN readers?

2204 (L5) That got intense at the end there. And the audio was glitching out a bit on my Pixel 7

This is really fun — well done!

Fun little game. Level 3 took me from 0 to 100 with no warning.

Reply on news.ycombinator.com