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