How to make an HTML5 game

Learn how to make an HTML5 game with JavaScript, step by step and for free. Find out how a browser game works, what you need to get started and when a game engine helps. Then follow the series and build each part of your own game.

This page is the start of the Spicy Yoghurt tutorial series about HTML5 game development. You'll find out what an HTML5 game really is and which parts every game needs. You'll also read how to get your game on a phone and publish it online. For each part of a game, there's a link to the tutorial that explains it step by step. So you can follow the whole series, or go straight to the part you need.

What is an HTML5 game?

An HTML5 game is a game that runs in a web browser, made with the standard techniques of the web: HTML, CSS and JavaScript. There's nothing to install and no plugin is needed. You open a page and play, on a computer, a tablet or a phone.

The name is a bit misleading though. HTML is a markup language. It describes the structure and content of a web page, but it can't run any game logic. And HTML isn't even called HTML5 anymore. Version 5 became an official standard in 2014, and today HTML is a living standard without a version number. So when people talk about an HTML5 game, or just an HTML game, they mean a game made with the whole modern web platform.

Here's what each part does in a game:

• HTML - Puts a <canvas> element on the page. That's the drawing board for your game.
• JavaScript - The programming language that holds the game logic. It moves your objects and draws them on the canvas.
• CSS - Styles the page around your game, like the background and the position of the canvas. For the game itself, CSS doesn't do much: everything inside the canvas is drawn with JavaScript.
• Browser APIs - Tools that are built into the browser, which you control with JavaScript. Like the Canvas API for 2D graphics, the Web Audio API for sound and WebGL for 3D.

Most of the time, you'll be writing JavaScript. HTML creates the drawing board and JavaScript draws your game on it.

How does an HTML5 game work?

If you haven't programmed a game before, it requires a new way of thinking. On a normal web page, code only runs when something happens. You click a button, the code behind it runs once, and then it waits for the next click. A game runs its code over and over, many times per second, even when the player does nothing. Every time, it draws a new image on the screen. Such an image is called a frame.

Every HTML5 game is built from the same parts. Here they are, in the order of this tutorial series:

• Canvas - An HTML element you can draw on with JavaScript. Every game starts with one. Learn how to set up an HTML5 canvas that fits every screen and stays sharp.
• Drawing - Shapes, lines, text and colors. In the beginning, your game objects can be simple rectangles and circles. See how to draw on the canvas.
• Game loop - The heart of every game. It updates your objects and draws them again, 60 times per second or more. You'll build one in the JavaScript game loop tutorial.
• Animation - Your objects should move at the same speed on every screen, whether it shows 60 or 144 frames per second. That's why you move them based on time. Learn how in smooth canvas animation, and try different kinds of motion with the animation tool for easing functions.
• Collision detection and physics - Every frame, the game checks which objects touch each other and decides what happens next. A ball bounces off a wall, a player loses a life. Read all about 2D collision detection and physics.
• Images and sprites - Pictures replace the shapes. A sprite sheet holds all the frames of an animation in one image. Learn how to draw images and sprite animations.
• User input - The player controls the game with a keyboard, a mouse or a touchscreen. This part isn't in the series yet, but you'll find a short introduction to touch controls further down this page.
• Sound - Sound effects and music, played with the Web Audio API or a simple <audio> element.

The game loop ties all of this together. Every frame it updates the objects, checks for collisions, clears the canvas and draws everything again:

Not every game needs all of these parts. Take Conway's Game of Life for example. It has no collisions or input, just a canvas, a grid of cells and a loop. That makes it a nice first project. And when your game needs a bit of luck, you'll want to generate random numbers in JavaScript.

See it come together

Here's a quick preview of what you're going to make along the way. Click the steps to see how it's built up, one tutorial at a time:

Step 5 - Images replace the circles. Each bottle turns in the direction it flies, and changes color every time it hits something. See how to draw images and sprite animations.

The potion bottles in the last step are vector drawings. Want to draw your own game graphics? Check out the tutorial about drawing vector potion bottles in Inkscape.

Don't expect the next Call of Duty. This is a basic series to get you started. You'll start with nothing and build your game from the ground up, one part per tutorial. Each one has live demos and code you can copy, and you'll learn how to avoid common mistakes along the way.

What do you need to make an HTML5 game?

Not much, and all of it is freely available:

• A browser - Chrome, Firefox, Safari or Edge. You'll test your game in it, and it has developer tools built in.
• A text editor - Any editor will do. Visual Studio Code is free and popular, and it colors your code so it's easier to read.
• Some JavaScript - You should know what variables, functions, if statements and loops are. If you're completely new, the JavaScript Guide on MDN is a good place to start. You'll pick up the rest along the way.

You don't need a server, a game engine or a build tool. An HTML5 game can be a single HTML file that you open in your browser. The canvas template from the first tutorial of this series is exactly that.

One more tip before you start. Press F12 (or Cmd+Option+I on a Mac) to open the developer tools of your browser, and look at the console. When your game doesn't show up or suddenly stops, the console tells you why, and on which line of your code. It will save you a lot of time.

Plain JavaScript or a game engine?

This series uses plain JavaScript, without a library or a game engine. That's on purpose, so you'll see how a game works on the inside. Plenty of developers keep it that way and build their games without an engine, with full control over every line. And if you do switch to an engine later, you'll know what it does for you. For a small game, like Pong, Snake or a puzzle game, you don't need more anyway.

For a bigger game, an engine can save you a lot of work. It comes with a game loop, physics, sound and image loading, ready to use. It also handles most of the differences between browsers and devices. These are popular choices:

• Phaser - A free framework for 2D games, with scenes, physics, sound, input and tile maps. One of the most used HTML5 game frameworks, with lots of examples to learn from.
• PixiJS - Draws 2D graphics very fast. It's not a complete engine though. The game logic and physics are up to you.
• Three.js and Babylon.js - For 3D games in the browser.
• Godot and Unity - Engines with an editor, for games on every platform. They can export your game to the web, but you don't write it in JavaScript.

So where do you start? With this series, even if you plan to use an engine later. An engine makes a lot more sense once you know what a game loop and collision detection are. If you choose an engine after that, the things you learned here still apply.

Make your HTML5 game work on mobile

One of the biggest advantages of HTML5 is that your game runs on mobile devices. You can show it to everyone who owns a phone. So that's about... everyone.

It doesn't happen automatically though. A phone has a small screen, no keyboard and no mouse, and it's slower than a computer. Here's what to look out for:

• Controls - On a phone the player taps and swipes. Use pointer events, like pointerdown, pointermove and pointerup. They work the same for a mouse, a finger and a pen, so one piece of code handles all of them. To find out where the player taps on the canvas, use the same code as for the mouse position on a scaled canvas.
• No scrolling - Give your canvas touch-action: none in CSS. Otherwise the browser scrolls or zooms the page when the player swipes over your game.
• Screen size - Phones come in all sizes, and the player can turn the phone sideways. Scale your canvas to fit the screen, and keep it sharp on a high-resolution display. You'll learn both when you set up an HTML5 canvas.
• Sound - Browsers don't play any sound until the player has tapped or clicked the page. So start your music after the first tap, on a start button for example.
• Performance - A phone has less power than a computer, and a hot phone slows itself down. Keep your images small, don't draw more than you need and test on a real phone, not only in the phone view of your browser.

Want to see an example? Our own game Pixi Pop started as an Android app, and now it runs in the browser on a computer, a tablet and a phone. On a computer you click, on a touchscreen you tap, and the same code handles both. You can play it right in your browser.

Publish your HTML5 game

When your game is done, you want people to play it. An HTML5 game is just a folder with files: an HTML file, your scripts and your images. You can put it anywhere a website can go:

• itch.io - Upload your game as a zip file, and people can play it right on the site. It's free, and popular with indie developers and game jams.
• GitHub Pages - Free hosting for a web page, with a link you can share.
• Game portals - Sites like Poki and CrazyGames publish web games for a large audience, and share the income from ads with the developer. They do have requirements for the quality and size of your game.
• Your own website - Put the files on your own server, like we did with Pixi Pop.

You can even let players install your game, just like an app. Turn it into a progressive web app with a manifest and a service worker. It gets its own icon on the home screen and can work without an internet connection.

Does your game have levels or a high score? Then the player wants to keep their progress. You can save it in the browser with HTML5 local storage, without a server or an account. Pixi Pop does the same. You can earn up to three stars in every stage, and the game remembers how many you got, even after you close your browser.

What happened to Flash?

It's time for a brief history lesson. Before HTML5, almost every browser game was made with Adobe Flash. Flash was great for animations and games, and there wasn't really any other option at the time. The Flash Player took care of the differences between browsers, so as a developer you didn't have to.

Its big weakness was mobile. In 2010 Apple decided not to support Flash on the iPhone and iPad. Steve Jobs explained why in his letter Thoughts on Flash: bad performance, a drained battery and security problems. The other browsers slowly turned away from Flash too, and Adobe stopped supporting the Flash Player at the end of 2020. Since January 2021, Flash content doesn't run at all anymore.

HTML5 took its place. In the beginning it wasn't easy to make a good game with it. Every browser did things a little differently, and even playing a sound could be a struggle. Luckily that has improved a lot. Today every browser supports the canvas, the Web Audio API and WebGL, on computers and phones.

And the old Flash games? A lot of them can still be played. Ruffle is a Flash Player emulator that runs in the browser, without a plugin. The Internet Archive uses it to keep thousands of old Flash games playable.

Common questions about HTML5 games

Is HTML5 good for game development?

Yes, for 2D games and smaller 3D games. They run on every device with a browser, and players can start with a single click. For a big 3D game with heavy graphics, a native game made with an engine like Unity or Unreal still performs better.

Do I need to know JavaScript to make an HTML5 game?

Yes, the game logic of an HTML5 game is written in JavaScript. You don't have to be an expert though. If you know variables, functions and loops, you can follow this tutorial series. With an engine like Godot or Unity you write your game in another language, and the engine turns it into a web game for you.

Can you make 3D games with HTML5?

Yes. Browsers have WebGL, and its newer successor WebGPU, for 3D graphics. Most developers use a library like Three.js or Babylon.js, because WebGL on its own takes a lot of code. This tutorial series is about 2D games on the canvas.

Do HTML5 games work offline?

They can. Once all the files are on the device, the game doesn't need the internet. Turn your game into a progressive web app with a service worker, and the browser keeps the files for when the player is offline. A game with online high scores or multiplayer still needs a connection for those parts.

How long does it take to make an HTML5 game?

That depends on the game. If you know a bit of JavaScript, you can work through this series in a few evenings. A simple game like Pong or Snake is a nice weekend project after that. A game with levels, menus and sound, like Pixi Pop, takes a lot longer.

Can you make money with an HTML5 game?

Yes, but don't expect to get rich right away. You can show ads on your own site, sell your game on itch.io or publish it on a game portal that shares its ad income with you. Most developers make a few small games first, to learn and to find out what players like.

What's the difference between HTML5 and JavaScript?

HTML describes what's on a page, like a canvas. JavaScript is the programming language that makes things happen, like moving a player when a key is pressed. An HTML5 game needs both, but most of the code you write is JavaScript.

What's next?

Now you know what an HTML5 game is and which parts it's made of. Time to build your own! In the first step of this series you'll set up an HTML5 canvas and draw your first graphics on it.

What kind of game do you want to make? Let us know in the comments, it might give us an idea for a new tutorial. And if you have any questions, feel free to ask them there too.