Jake Gordon writes about JavaScript and HTML5 game development, including a racing game, a platformer, Boulder Dash and CSS sprite packing.
HN commenters recommend its JavaScript game write-ups, especially the pong tutorial and the Outrun-style racer, and discuss its bin-packing approach.
Right, but efficient can mean a lot of things.
Though Java was used, this game is inaccessible to Mac, iPhone, and Android users. Porting to all these platforms is inefficient compared to just using the web.
It also requires a 60MB download, which is not very space efficient for a relatively simple 2D game (NES Tetris fit on a 24KB ROM). People have implemented Tetris in as little as 446 bytes [1]. Full color JS versions have been done at 16KB or less [2][3]. A JS version from 2004 came in at 1.5kb [4].
Haven't done memory efficiency analysis, but willing to bet the average JS Tetris implementation has dramatically better memory efficiency as well.
[1] https://hackaday.com/2016/10/06/tetris-in-446-bytes/
[2] https://github.com/cztomczak/jstetris
[3] https://codeincomplete.com/articles/javascript-tetris/
[4] https://joriszwart.nl/games/javascript-tetris-1.5kb
The bin packing problem is NP-hard, but rectangle packing is "merely" NP.
However, most people just use a recursive biggest-fit-first ¹), a simple heuristic that is surprisingly hard to beat for most workloads.
I couldn't figure out what Aseprite is doing from their website or documentation, but if it's not that then it might be worth it writing your own sprite packer.
¹) https://codeincomplete.com/articles/bin-packing/
Jake Gordon at Codeincomplete.com has lots of great write ups about javascript game development. It's worth checking out. Start with the pong implementation to see the most basic parts of a game including game loop, painting to canvas, and collision detection. http://codeincomplete.com/games/
There are other JS FSM libraries, but I ran into this one recently, which has an online demo:
The blogpost about it:
http://codeincomplete.com/posts/2011/8/19/javascript_state_machine_v2/
The online demo:
http://codeincomplete.com/posts/2011/8/19/javascript_state_machine_v2/example/
Here is another example of making a 3D look with 2D graphics using JavaScript from the CodeIncomplete blog building an Outrun type car racer game, https://codeincomplete.com/articles/javascript-racer/.
I have purchased a few tracks from Lucky Lion studios in the past for some personal projects (http://codeincomplete.com/) and been very happy.
I highly recommend them.
Good luck(y lion)!