Learn JavaScript for Digital Tabletop Game and Web Development

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, although 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, which should be useful for roleplaying game, 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, as 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. And I’m a big proponent of using digital tabletop games in learning to code, because we’re able to work on a lot of the logic that goes into digitizing those types of games, without having to dive into stuff like 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, and 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!

-M. S. Farzan