Make Ten Card Game with Svelte and TypeScript

  • infoFull Project Details
    info_outlineClick for Full Project Details
    Date Posted:
    Oct. 04, 2020
    Last Updated:
    Oct. 04, 2020
  • classTags
    classClick for Tags

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, crossfade and send / receive

Leave a Reply

Your email address will not be published. Required fields are marked *