Learn JavaScript by Making Digital Tabletop Games and Web Apps

By M. S. Farzan

Building 2D games can be a great way to learn JavaScript, especially when working through the basics of complex tabletop game logic.

In this series, I’m going to introduce you to the basics of programming, with a focus on exposing you to JavaScript development best practices and frameworks. Keep in mind that the things we’re going to learn will be applicable in other programming languages as well.

Throughout this series, I’ll be providing an emphasis on learning to code for digital tabletop game and web development. This should be useful for roleplaying, card game, and board game developers who want to create companion apps or digital versions of their games, as well as all JavaScript newcomers.

After learning JavaScript and some of the frameworks and engines that we’re going to work with, along with some practice projects and outside learning of your own, you’ll be able to:

• run simulations
• make your own apps, games, and websites
• and even develop and deploy multi-user “full stack” projects that you can share with the world.

If you’re not specifically interested in digital tabletop game development, you’ll probably still find this series to be helpful. We’ll be learning core concepts that are central to game and web development that you’ll be able to apply to other programming languages and frameworks.

I’m a big proponent of using digital tabletop games in learning to code. Tabletop games are great because they involve a lot of logic and complex rulesets, but not physics, vector math, animation, and that sort of thing.

We’ll be exploring real programming practices such as setting up an integrated development environment and using GitHub for source control. We'll also be taking on projects that will help you polish the skills that will be fundamental in your long-term development as a coder.

Start by learning the basics (Beginner Series):

Learn more about setting up an integrated development environment (Beginner Tutorial):

Learn how to use GitHub and ES6 to create and structure your code (Intermediate Tutorial):

Learn more about Phaser for digital tabletop game development (Intermediate Tutorial):

Learn more about Vue for digital tabletop web development (Intermediate Tutorial):

Build a multiplayer card game with Phaser 3, Express, and Socket.IO (Advanced Project):

Build a Multiplayer Tabletop Game Simulator with Vue, Phaser, Express, Node, and Socket.IO (Advanced Project):

Build a full stack roleplaying game character generator with MongoDB, Express, Vue, and Node (MEVN) (Advanced Project):

Learn how to deploy a full stack web app to Heroku (Advanced Project):

Happy coding!

If you enjoyed this article, please consider checking out my games and books, subscribing to my YouTube channel, or joining the Entromancy Discord.

M. S. Farzan, Ph.D. has written and worked for high-profile video game companies and editorial websites such as Electronic Arts, Perfect World Entertainment, Modus Games, and MMORPG.com, and has served as the Community Manager for games like Dungeons & Dragons Neverwinter and Mass Effect: Andromeda. He is the Creative Director and Lead Game Designer of Entromancy: A Cyberpunk Fantasy RPG and author of The Nightpath Trilogy. Find M. S. Farzan on Twitter @sominator.