How to make games with JavaScript? Complete Guide 2022

JavaScript is everywhere, whether it be web, mobile, desktop, or even in games. In fact, some very popular classic games were made using JavaScript – 2048, and Tetris just to name a few. So if you are a JavaScript developer wanting to make games but don’t know where to start then this blog can help you go in the right direction.

One thing to note is that this article is not a tutorial for creating a specific kind of game. Instead, this article aims to show you your available options when it comes to game development in JavaScript, and help you get started with the one that is the perfect fit for you.

Introduction

Before we learn about how to make games using JavaScript, let us look at how these JavaScript-based games work. JavaScript is the language of the browser, and the games developed using JavaScript also run on the browser. That is why these are also called browser-based games.

Like any basic website, the basic foundations of any browser-based game are the following:

HTML
CSS
JavaScript

Specifically, the <canvas> tag in HTML works as a container for all the graphics of the game, and what we draw in the <canvas> is handled using JavaScript. CSS is used to style the overall HTML page.

For example, let us say you want to build a game like Flappy Bird. In this case, you’d create a <canvas> element in your HTML, and handle rendering all the graphics like the bird, sky, and pipes with JavaScript using the Canvas API or the WebGL API. All your game logic like score and physics will also be handled with JavaScript.

Canvas API

The Canvas API is an interface that is used to draw graphics with the HTML <canvas> element and JavaScript. The Canvas API is mostly used for drawing 2D graphics and you can read more about it in the MDN docs.

WebGL API

WebGL stands for Web Graphics Library and it is an interface for rendering hardware-accelerated 3D and 2D graphics within any supported browser that results in a very high-performance graphics rendering using the HTML <canvas> element. You can learn more about the WebGL API through MDN docs.

Your Options

So we briefly learned about how web games work, let us see how we can go about making them.

There are a couple of ways you can start developing web games:

Using pure JavaScript
Using frameworks or game engines

Just by reading this, using a framework sounds like a better option right? Well, not always. Let us find out why.

Using Pure JavaScript

If you want to get a solid understanding of web game development, getting started with pure JavaScript is your best option. In this case, you’ll directly work with the Canvas or WebGL API to draw your graphics and also handle all physics and game logic on your own. The Frameworks that I’ll mention later are built on top of these APIs. So even if you plan to use a framework or game engine later, it’s always good to know how it works under the hood.

Also, if you just want to make a simple game, using a framework will be overkill because you’ll simply not need all the advanced features of the framework. In the end, it comes down to your use case.

Using Frameworks and Game Engines

A game engine provides all the necessary tools and libraries that are required to make a game. This can include a lot of different aspects like:

Graphics rendering
Animations
Audio
Physics
Input
Project management tools

There are also specialized libraries if you need a tool for any one of the above aspects. For example, Matter.js is a 2D physics engine, and PixiJS is an advanced 2D graphics renderer for the web.

There are lots of JavaScript game frameworks and game engines out there, but let us look at some of the most popular ones so that you can pick the one you like the most.

Phaser

Phaser is one of the most popular 2D-focused web game frameworks. With features like physics, graphics, animation, particles, camera, input, sound, etc, it ticks all the boxes of features a game engine should have.

Phaser also has a very big developer community behind it, and there are plenty of easy-to-follow resources to learn from. You can check out their step-by-step guides to learn more.

babylon.js

babylon.js is a fully-featured, open-source 3D-focused game engine with features like advanced PBR rendering, animation, particles, physics, GUI system, audio, etc.

I find the API of babylon.js to be very intuitive, and there is also a very dedicated developer community behind it. You can check out the babylon.js docs to learn more.

Fun fact: Minecraft Classic and the web version of Temple Run 2 are actually created using babylon.js!

PlayCanvas

PlayCanvas is an advanced team-focused 3D game engine that is meant for bigger-scale projects. It has a very developer-friendly UI and nice collaborative tools for developing in teams.

One thing to note is that PlayCanvas is a commercial game engine and is not open source, unlike the ones I mentioned earlier. Although the free plan should be enough for most people. Check out their docs to learn more.

There are a lot of other great frameworks for making web games but the ones mentioned above should be enough for almost all kinds of projects.

Conclusion

We’ve looked at how web games work in the browser and also the several ways we can go about creating browser-based games. Now you can pick and choose different tools based on your requirements.

Basically, if you’re creating a simple game or you’re just starting off, using pure JavaScript with the Canvas API will be more than enough. But if you’re planning to create something more complex, choosing one of the game engines listed above will be your best bet.

All the frameworks and game engines mentioned earlier have really extensive docs and getting started guides for beginners. So if you’re unsure about which one you should choose, I suggest you try out all of them to see which one you’re most comfortable with.

I hope this article has helped you to kickstart your journey as a JavaScript game developer. A long adventure awaits, develop the game you’ve always dreamt of playing!