My main recommendations for people who want to do the same, in any language:
- Build an event loop! You want your game to run at a consistent framerate regardless of the browser's animation speed.
- Adapt to different resolutions by having a desired size for the game canvas, calculating a that-sized region, and offsetting all draw operations so they land in that region.
- Write code to draw/fill rectangles, sprites, and text.
- Write code to handle collisions and detect the point/direction of the contact point for rectangles/circles.
- Write code to handle physics. You want to inch each object slowly in the direction of its current motion -- you want to detect collisions, and on collision, you want to figure out how much of its speed is perpendicular to the surface it ran into versus parallel to it. Adding -1x vel_perpendicular will slide along the surface -- adding -2x will bounce!
- This sounds scary, but the cases are actually way simpler if you only have rectangles and circles.
- "Detecting collisions" is way simpler if you have a tile-based level sitting around or if the number of objects is overall fairly small. You want to find a list of all the objects that could possibly collide and touch each exactly once.
- Write code to handle input. I do this in the same code that does drawing, and my rules are:
- Each draw operation should have a depth.
- The draw operation closest to the top should get the first chance to handle the input.
- Draw operations lower than the top should know if one closer to the top already handled it.
I think that once you've done all this, you have an environment that is roughly on the friendliness tier of Pico-8. From there, writing a GameMaker-style event loop is probably your best recourse, although I didn't because I'm used to Pico-8. I didn't include tips about audio because those strongly vary by environment.
I'll probably publish a more detailed guide to some of this as part of the postmortem!