How to Get It!
🃏 Online Game: make-ten-card-game.netlify.app
💾 Source Code: GitHub
What Is It?
I built this at the request of an elementary student tutor, who, due to the current pandemic, is running her sessions over Zoom. “Make Ten” is a simple card game, where you have to get rid of all the cards on the table by making sets that equal ten – for example, an 8 of spades, and a 2 of hearts. The cards are divided up into stacks, and once a stack is “cleared”, you can use its spot as a free place to move cards to in order to get them off the top of a stack.
This is meant for students that are learning the basics of addition, so that is about as complex as the game gets.
It also features typical game functionality like a built-in game timer, pause / resume / restart buttons, and fun animations. I built it as a SPA (single-page application), with Svelte and TypeScript.
Tools Used
- Svelte (I learned it as I built this; it is my first Svelte project!)
- TypeScript
- JavaScript
- HTML
- CSS
- IndexedDB (with localForage)
- Netlify (automatic deployments from Github)
Development
This was my first Svelte project, so I was learning the framework as I built the application. Honestly, I had a great time learning Svelte and will very likely use it in future applications; it was a joy to use, and made building components feel very natural and easy. In fact, the entire game was built in about two days, despite having to learn Svelte as I worked!
The most complex parts of building the game were:
- Managing the state of cards / stack
- I ended up using a multidimensional array, with identifiers for each card
- I had to be extra careful when moving the cards around; there are some particular nuances of how Svelte handles mutations
- Animations
- There are some fancy animations in the game (cards being selected, moved between stacks, discarded)
- Svelte fortunately has a lot of built-in helpers to assist with complex animations; for example,
crossfadeandsend/receive
