Canvas and Game Development with JavaScript

Learn to build games with Vanilla JavaScript, Phaser, p5.js, PixiJS, and more.

Hey, thanks for checking this page out! This series is very early in the development stages and right now you’re on the index / tutorial list page. You can see some planned tutorials below.

Update

This series is on hold for a bit as I’m currently working on a course and book. If anyone is actually interested in this series, let me know in the comments along with which part you’re most interested in and I’ll try to make time for it.

Prerequisites and Introduction

You should have a decent understanding of JavaScript / ES6+ I will not be focusing on explaining JS methods in this series. However, I will be explaining how to use the canvas API and other related methods. A decent understanding of maths would be helpful, but not required.

We’ll be using Classes heavily throughout this series. I suggest you get familiar with them but don’t worry about it too much. (you’ll be a master of classes after a few tutorials)

Classes

Game Development is HARD

Let me start by saying this is not intended to scare you away. I want to be upfront and let you know right now, game development is hard. It’s difficult because it’s a combination of many different fields; art, graphics, math, sounds, AI, writing, programming on the client-side and the server, etc. The difficulty is amplified if you’re working on a game solo or with a small team. Take a look at this roadmap if you feel like being overwhelmed.

Now that you’re overwhelmed and contemplating whether you should make that game you’ve been thinking about, let me bring it back a bit. You don’t need to be a master in every area. You can be an average programmer who is terrible at math and still make a great game. In fact, if you don’t want to do any programming or math there are easier tools such as Game Maker that let you develop games using a graphical interface. This series is about developing games that can be played anywhere, using JavaScript. Other great alternatives are Godot and Unity.

Disclaimer:
I’m not great at game development, I am that average programmer who is terrible at math. My inspiration for writing this series comes from the lack of up to date, good tutorials online (or at the very least my inability to find any). I’ll do my best to share what I know and to learn and grow with the community here. 😄

This series will be a long and difficult journey, but if you stick around, you will find all the tools you need to develop your own games.

How to Read this Series/Course?

I try to order the tutorials you should do first starting at the top to bottom, but you can skip around and each tutorial will have a prerequisites section of its own.

You should code along with the tutorials and attempt to do the challenges/projects on your own. (it’s the best way to learn)

One more thing to keep in mind, everything here is a work in progress (including this page) which means some parts may be missing or incomplete and it should only be considered a draft for now. If you notice any issues, then please point them out.

Getting Help

Don’t be afraid to ask for help. Ask questions in the comments section and provide a link to your code on GitHub or CodePen. You can also ask me on Twitter.

Help improve This Series

Before starting, let me know your current skill level on the topics by filling out this form. You can also leave a comment or question on Medium or DM me on Twitter. Thanks and good luck!

MDN Game Dev

I found this hidden gem on the MDN Web Docs, and it’s actually very thorough. Make sure to check the contents on the left. (Introduction, APIs, Techniques, Examples, etc) You can use this as an introduction to game development and reference alongside this series.

Game Tutorials MDN (vanilla & Phaser 2.0)

Vanilla JavaScript

Tutorials using JS only without any rendering/game frameworks. We will be remaking some of these using a framework for comparison later. Before we get into game development tutorials, we are going to master the HTML5 Canvas. (which is used for game development)

HTML / CSS / JS Primer

For complete beginners.

Setting up the Boilerplate Code

Most tutorials will start with this starter code, it will be updated as the series goes on.

Setup a Canvas Starter Boilerplate

Creating and Drawing on a Canvas

We’ll learn about what the canvas is and then jump right into it by learning how to set up a project and draw different shapes.

Creating and Drawing on an HTML5 Canvas using JavaScript

Project: Pie Chart, Bar Chart, Point Chart

Learn more about positioning and drawing from data.

Creating a Bouncing Ball Animation

Creating a Bouncing Ball Animation Using JavaScript and Canvas

Project: Let’s Design a Few Animated Landing Pages

You’ve probably seen a few animated landing pages that also have mouse interactivity, let’s make some of our own.

Project: Let’s Make a Drawing App

We’ll use everything we’ve learned to create a basic drawing app similar to Microsoft Paint, Gimp, Photoshop, etc.

The Anatomy of an HTML5 Game

Basically a quick version of the above MDN pages. Covers setting up a project, the main methods involved in a game loop, object management, etc.

Let’s Make Our First Game, Circle Shooter

We’ll use what we learned from the canvas tutorials to make a simple target shooting game. Players will use the mouse to click on targets as they appear which sounds simple, but targets will disappear shortly after spawning, and this process is sped up over time. Missing 3 targets is game over.

With this project, you’ll learn more about collision detection (point to circle), animation, tracking scores, working with sounds, perhaps some skill-based game theory, and it’ll be our first actual game project.

Vanilla Pong

Pong, ping-pong, table tennis… you’ve probably heard of this game. There will be one player and one AI player each with their own paddle used to hit a ball back and forth. Letting the ball slip through on your side causes the opponent to gain a point.

We will learn circle to rectangle collision detection, how to make a basic AI, managing score and resetting the game when a certain score is reached, etc.

Vanilla Platformer Game

We’ll learn more about collision detection, gravity, making evil creatures, etc.

Vanilla Top-Down Game

This will probably be some form of asteroids or a bullet-hell game.

NodeJS Primer

We’ll be making use of NodeJS for our multiplayer games.

Command Line Text Adventure

Taking a break from the web and canvas API, we’ll get our feet wet working with NodeJS.

Highscore API

Continuing with NodeJS we’ll create a high score API to allow our players to share their high scores with friends.

Chat Application

Key topics include working with WebSockets, registering users, logging in / authentication, creating separate “rooms”, etc.

Graphic Engines

PixiJS

TBA

p5.js

TBA

Working with Phaser.js (v3+)

Using Phaser as a framework.

Phaser.js Basics

TBA

Pong with Phaser.js

TBA

Pong Royale (online 4 player pong, elimination-style)

TBA

Multiplayer Top-Down Shooting Game

TBA

Other Games (not sure on framework yet)

Idle Game

Something like Venture Capitalist.

Tic Tac Toe

Learn about the Minimax algorithm and use it to make a Tic Tac Toe AI

Let’s Make a Chessboard

Learn about game grids

10x Simon Says

Classic Simon game but with more colors

Miscellaneous Tutorials

Standalone tutorials that don’t have a category.

Math Basics for Games and Cheatsheet

TBA

Manipulating Images

TBA

How to Make a “Camera” that Follows a Player or Target Object

TBA

Creating Simple 2D Game Art

TBA

Let’s Create a Tool to Draw Animated Diagrams / Images for Tutorials

TBA

Discord Bot Game

TBA

Hacking Games and Securing them

TBA

Let’s Create a Voice Chat (not game dev specific)

TBA

Working with 3D Objects (not game dev specific)

TBA

Working with Virtual Reality (not game dev specific)

TBA

An Interview with an Indie Game Developer

TBA

Case Studies and Analyzing Successful Games

Let’s take a look at what makes a game good and then dive into how the technical details and mechanics might be implemented.

Resources

More will be added as the series goes on.

Cheatsheets

HTML5 Canvas Cheat Sheet

Tutorials and Examples

Game Dev Tutorials MDN

Tutorials, Videos, Docs and more - Learn - Phaser

Open-Source Web Games @Github

leereilly/games

Free Art and Assets

OpenGameArt.org

ellisonleao/magictools

Learning Paths and Resource Pages

Learn-Anything.xyz Game Development

miloyip/game-programmer

utilForever/game-developer-roadmap

Thanks for checking this page out!

I would love to hear your feedback or any ideas you might have for new tutorials or series.