6 ms·

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

167 points by susam 4y ago

susam 4y ago
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 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 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.
- sbarre 4y ago
  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. :-(
- password4321 4y ago
  Nice work. Next up: multiplayer!
- acidburnNSA 4y ago
  This is great. Reading the source reminds me of reading the game programming (in C) books I read as a kid. Thanks!
- uxcolumbo 4y ago
  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.
thepangolino 4y ago
Fun little game. Level 3 took me from 0 to 100 with no warning.
benj111 4y ago
I have to say this is really quite good. It looks simple (and it is) but it's been done well.
fedeb95 4y ago
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
mekazu 4y ago
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.
mrlambchop 4y ago
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.
jay-barronville 4y ago
This is really fun — well done!
account-5 4y ago
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.
- posterboy 4y ago
  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.
- klabb3 4y ago
  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.
  - masswerk 4y ago
    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.
- beebeepka 4y ago
  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
theberserker 4y ago
Congrats, good game. I have one suggestion - maybe move the restart button away from left/right keys a bit? Fat fingers here :)
- metadat 4y ago
  Yes, I accidentally keep hitting the reset button. Maybe this is meant to be part of the challenge?
virtualritz 4y ago
Sprites move in sub pixel-grid increments. That immediately destroys the retro feeling for me.
- susam 4y ago
  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 https://github.com/susam/invaders.
  - wiredearp 4y ago
    This article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.
  - murkle 4y ago
    Plot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...
  - JKCalhoun 4y ago
    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.
- susam 4y ago
  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 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.
boredhedgehog 4y ago
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.
rosebay 4y ago
[dead]
gkfasdfasdf 4y ago
I thought requestAnimationFrame was preferred instead of setTimeout? Or is there no advantage in a simple animation like this one?
- sigmoid10 4y ago
  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.
jimmydddd 4y ago
Fun! Nice retro vibe. Great job. Interesting aspects for me are i) automatic shooting and ii) multiple hits required to bring down a ship.
marpstar 4y ago
Did this remind anyone else of Phoenix for the TI-83 calculators? https://www.ticalc.org/archives/files/fileinfo/148/14876.html https://www.ticalc.org/archives/files/fileinfo/148/14876.htm...
heyitsguay 4y ago
Very nice! Reminds me of a little HTML5 Asteroids clone/mutant I wrote a while ago: https://heyitsguay.github.io/asteroids/ https://heyitsguay.github.io/asteroids/ I should figure out how to add sound. It's always inspiring to see the great work of others :)
bitwize 4y ago
It's cute and cool. Reminds me of Demon Attack. It's nice to see somebody take the plunge and just... write a game.
fernly 4y ago
Freezes after a few shots for me -- both Brave and Firefox. Possibly hug of death from HN readers?
zoklet-enjoyer 4y ago
2204 (L5) That got intense at the end there. And the audio was glitching out a bit on my Pixel 7

167 points by susam 4y ago

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

sbarre 4y ago
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. :-(
password4321 4y ago
Nice work. Next up: multiplayer!
acidburnNSA 4y ago
This is great. Reading the source reminds me of reading the game programming (in C) books I read as a kid. Thanks!
uxcolumbo 4y ago
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.

thepangolino 4y ago

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

benj111 4y ago

I have to say this is really quite good. It looks simple (and it is) but it's been done well.

fedeb95 4y ago

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

mekazu 4y ago

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.

mrlambchop 4y ago

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.

jay-barronville 4y ago

This is really fun — well done!

account-5 4y ago

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.

posterboy 4y ago
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.
klabb3 4y ago
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.
- masswerk 4y ago
  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.
beebeepka 4y ago
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

theberserker 4y ago

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

metadat 4y ago
Yes, I accidentally keep hitting the reset button. Maybe this is meant to be part of the challenge?

virtualritz 4y ago

Sprites move in sub pixel-grid increments. That immediately destroys the retro feeling for me.

susam 4y ago
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 https://github.com/susam/invaders.
- wiredearp 4y ago
  This article over on https://developer.mozilla.org/en-US/docs/Games/Techniques/Crisp_pixel_art_look https://developer.mozilla.org/en-US/docs/Games/Techniques/Cr... mentions a CSS property `image-rendering` that could perhaps come in handy.
- murkle 4y ago
  Plot to an image first then use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled https://developer.mozilla.org/en-US/docs/Web/API/CanvasRende...
- JKCalhoun 4y ago
  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.
susam 4y ago
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 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.

boredhedgehog 4y ago

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.

rosebay 4y ago

[dead]

gkfasdfasdf 4y ago

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

sigmoid10 4y ago
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.

jimmydddd 4y ago

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

marpstar 4y ago

Did this remind anyone else of Phoenix for the TI-83 calculators? https://www.ticalc.org/archives/files/fileinfo/148/14876.html https://www.ticalc.org/archives/files/fileinfo/148/14876.htm...

heyitsguay 4y ago

Very nice! Reminds me of a little HTML5 Asteroids clone/mutant I wrote a while ago: https://heyitsguay.github.io/asteroids/ https://heyitsguay.github.io/asteroids/ I should figure out how to add sound. It's always inspiring to see the great work of others :)

bitwize 4y ago

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

fernly 4y ago

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

zoklet-enjoyer 4y ago

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