JavaScript Game Development Pixel by Pixel

Let's build 2D action games with JavaScript and the HTML5 Canvas, no engine or framework. We'll include all the basics every game needs, like animated sprites, enemies, particles, screen shake and a camera that follows your hero, and we'll write every line together from scratch. When it's done, we'll publish it online so you can send anyone a link to play it.

In this course, you will

• Build a 2D action game from scratch, handcrafting every system in plain JavaScript on the HTML5 Canvas, with no engine or framework

• Bring game characters to life with sprite sheets and a state-based animation system, so every move, hit and defeat plays the right frames

• Unleash enemies that look, move and behave differently, then spawn and recycle them with object pooling

• Add the game feel that makes every hit land: particle bursts, screen shake and knockback

• Create a follow camera that tracks your hero across a world bigger than the window, then ground every character with depth sorting and shadows

• Wire sound, effects and UI together with an event system, so one hit triggers all three without spaghetti code

• Drive your game from data files, so you can retune enemies, swap sounds and sprites, and rewrite missions without touching the game loop

• Wrap it all in a real interface: an HTML and CSS HUD, menus, a pause screen and mission briefings

• Debug with your eyes instead of guesswork by drawing helper shapes over the action

• Publish your finished game online and share it with a single link, so anyone with a browser can play it

If you know the basics of JavaScript and want to try game development on something bigger than a tutorial toy, this workshop is for you. Maybe you have followed a game tutorial and ended up with code you could copy but not change. Maybe you have looked at game engines and wondered what they actually do for you. Either way, the fix is the same: build the game yourself, one small piece at a time, until nothing about it is a mystery.

Tools, art and code

All you need is a modern browser and the free Visual Studio Code editor, and I show how to use it with the Live Server extension. VS Code runs on Windows, macOS and Linux, so you can follow along on whichever you use. Free art assets are included so you can focus on the code. Sprites are described in data files, so you can swap in your own artwork later

Before you start

You should already know the basics of JavaScript: variables, functions, if statements, loops, arrays and objects. You do not need any game development experience. More advanced features such as classes and async/await are introduced briefly where the game uses them, and every line is explained, but I do not teach JavaScript from zero. If you have never written JavaScript before, take a beginner course first and then come back, you will enjoy this one far more.

Who this course is for

• JavaScript learners who know the basics and want a real project that goes well beyond tutorial-sized games

• Web developers curious about game development who want to put their HTML, CSS and JavaScript skills to work

• Programmers from other languages who know a little JavaScript and want to see how a 2D game fits together before choosing an engine

• Hobbyists who want to make browser games they can share with a single link

Who this course is not for

Complete beginners to programming should start with a JavaScript basics course first. This course does not teach Phaser, Unity, Godot or any other engine, and it does not cover 3D or online multiplayer.

Frequently asked questions

Do I need a game engine like Phaser, Unity or Godot?

No. Everything is built with plain (or "vanilla") JavaScript and the HTML5 Canvas, running straight in your browser. If you move on to an engine later, you will recognize what it is doing for you.

Do I need game development experience?

No. You need the JavaScript basics, and I introduce each game development idea at the moment the game needs it.

What if my code does not work?

Compare it with the complete working checkpoint you can download every few lessons, and ask in the course Q&A if you are still stuck.

Can I use my own artwork?

Yes. Sprites are described in data files, so you can swap in your own artwork later.

Ready to build your game?

By the end you will have a playable game, the source code at every stage, and the understanding to reshape it into games of your own. Watch the promo video and the free preview lectures to see the finished game and how I teach, then enroll and let's make games together. Have fun!