A match-3 inspired game created for the js13kGames 2019 competition.
Yes, falling jewels are back... Again.
Didn't you played a match-3 game? Where did you lived until today? š¤£
You just need to click and drag jewels (or touch in case of mobile devices) to create horizontally or vertically matches of the same shape. The game has 13 levels and the win is achieved when reaching score 13000.
The live version served here at Github Pages is improved with some webp images and some mp3 and ogg sounds, all retrieved from opengameart.org.
Since the competition rules consider external assets as part of the 13KB limit, the competition version wiped them out. If you're puritane about the size limit, play the competition version.
The game was created with open Web technologies in mind for the distributable build (i.e. no gaming engine was used), focusing in some bleding edge features since the competition only cares about supporting lastest Firefox and Chrome versions. But for development, there are some interesting things to note:
- Parcel bundler was choose mostly because of its out-of-the-box bundling with tree shaking and preprocessors support. Without Parcel, the work on adjusting the build proccess would not be feasible to deliver in time.
- Pug was used in the source of
index.htmljust because Parcel supports it very well and I liked the simplified syntax. - Stylus is the best CSS preprocessor IMHO. As this game used many CSS solutions - board positioning with CSS Grid, jewels layout and moving, animations, transitions and cool effects - the Stylus features offered a boost in development productivity.
- Web Components are really powerful and are already ready to use in modern browsers. Along with some ECMAScript 2015+ sugars like
class,Promiseandasync/await, it enabled a very modularized code with good encapsulation. Because of the small amount of time to work on this project, there are still many places to improve (as the very bigBoard.jsfile). But I'm happy with how much can be done with pure modern JavaScript this days!
Copyright Ā© 2019.
Licensed under the MIT license.