[HN Gopher] Andromeda Invaders: A retro-style game written in HT...
___________________________________________________________________
Andromeda Invaders: A retro-style game written in HTML5, Canvas,
and Web Audio
Author : susam
Score : 152 points
Date : 2023-01-21 08:28 UTC (14 hours ago)
(HTM) web link (susam.net)
(TXT) w3m dump (susam.net)
| benj111 wrote:
| I have to say this is really quite good.
|
| It looks simple (and it is) but it's been done well.
| jimmydddd wrote:
| Fun! Nice retro vibe. Great job. Interesting aspects for me are
| i) automatic shooting and ii) multiple hits required to bring
| down a ship.
| fedeb95 wrote:
| 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
| gkfasdfasdf wrote:
| I thought requestAnimationFrame was preferred instead of
| setTimeout? Or is there no advantage in a simple animation like
| this one?
| sigmoid10 wrote:
| 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.
| account-5 wrote:
| 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 wrote:
| 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.
| tantalor wrote:
| 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".
| klabb3 wrote:
| 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 wrote:
| 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 wrote:
| 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
| mekazu wrote:
| 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 wrote:
| 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.
| theberserker wrote:
| Congrats, good game. I have one suggestion - maybe move the
| restart button away from left/right keys a bit? Fat fingers here
| :)
| metadat wrote:
| Yes, I accidentally keep hitting the reset button.
|
| Maybe this is meant to be part of the challenge?
| heyitsguay wrote:
| 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 :)
| bitwize wrote:
| It's cute and cool. Reminds me of Demon Attack. It's nice to see
| somebody take the plunge and just... write a game.
| zoklet-enjoyer wrote:
| 2204 (L5) That got intense at the end there. And the audio was
| glitching out a bit on my Pixel 7
| fernly wrote:
| Freezes after a few shots for me -- both Brave and Firefox.
| Possibly hug of death from HN readers?
| boredhedgehog wrote:
| 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.
| susam wrote:
| 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.
| sbarre wrote:
| 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.
| :-(
| acidburnNSA wrote:
| This is great. Reading the source reminds me of reading the
| game programming (in C) books I read as a kid. Thanks!
| password4321 wrote:
| Nice work. Next up: multiplayer!
| uxcolumbo wrote:
| 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.
| virtualritz wrote:
| Sprites move in sub pixel-grid increments.
|
| That immediately destroys the retro feeling for me.
| susam wrote:
| 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.
| murkle wrote:
| Plot to an image first then use
| https://developer.mozilla.org/en-
| US/docs/Web/API/CanvasRende...
| JKCalhoun wrote:
| 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.
| wiredearp wrote:
| 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.
| marpstar wrote:
| Did this remind anyone else of Phoenix for the TI-83 calculators?
|
| https://www.ticalc.org/archives/files/fileinfo/148/14876.htm...
| thepangolino wrote:
| Fun little game. Level 3 took me from 0 to 100 with no warning.
| jay-barronville wrote:
| This is really fun -- well done!
| rosebay wrote:
| [dead]
___________________________________________________________________
(page generated 2023-01-21 23:01 UTC)