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)
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.
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.
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.
Project: Pie Chart, Bar Chart, Point Chart
Learn more about positioning and drawing from data.
Creating a Bouncing Ball Animation
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
Tutorials and Examples
Free Art and Assets
Learning Paths and Resource Pages
Thanks for checking this page out!
I would love to hear your feedback or any ideas you might have for new tutorials or series.