Develop an HTML5 game

Create your own game with HTML5 and JavaScript. Learn about game loops, animations & sprites, collision detection, physics and user input. Follow this tutorial series and end up with a basic HTML5 game of your own.

What is an HTML5 game?

This tutorial series is all about building an HTML5 game. But what exactly does that mean? Well, when people talk about HTLM5 games they mostly use it as a buzzword, because you can't really create a decent game by using just HTML5. Here's why:

• HTML5 is a markup language (HTML stands for HyperText Markup Language, version 5 is the latest installment)
• It only describes the structure and content of a web page and links it to a style sheet
• It's not an actual programming language

This means that HTML5 isn't suited to write the logic that is needed to create a game. Then what is an HTML5 game? It's the name of a game build by using a collection of new web techniques, which include HTML5, but also CSS3 and JavaScript.

Actually, most of the time you'll be dealing with JavaScript. JavaScript is an actual programming language and you can write game logic with it. You'll use HTML5 to create your drawing board and JavaScript to draw your game on it.

To say it in short, whenever people talk about an HTML5 game, they actually mean an HTML5, CSS3, JavaScript game.

What to expect from this tutorial series?

In this tutorial series you'll build a simple HTML5 game that will let you control a player with user input. The series will take you through the following steps:

• Set-up an HTML5 file with a canvas
• Learn how to draw shapes and text
• Create a game loop
• Animate objects and use easings
• Detect collisions and apply physics
• Draw images and sprite animations
• Control game objects with user input

Here's a quick preview of what you are going to make along the way:

Learn how to create your own game

The aim of this tutorial series is to let you get familiar with game programming in HTML5, and game programming in general. If you haven't done this before, it requires a new way of thinking. You don't just run a piece of code once, but you'll do this many times per second inside a game loop and this takes a whole new approach.

Don't expect the next Call of Duty game. This is just a basic series of tutorials to get you started. You'll start with nothing and build your game from the ground up.

You will learn how to implement common game programming techniques and how to avoid common mistakes. You will get a basic understanding of game development principles.

What happened to Adobe Flash?

It's time for a brief history lesson, to better understand the role HTML5 plays in the world of browser games. Because, HTML5 wasn't always around. Before the release of HTML5, people used to create browser games with Adobe Flash.

Flash was great for making things like animations and games, and there wasn't really any other option to create content like this for the web at the time. Also, as a developer, you didn't have to take different web browsers into account while developing, the Flash Player took care of that.

However, a big downside of Flash was the lack of mobile support. Apple had a lot to do with this because it didn't want to support the Flash Player on its mobile devices, claiming Flash had bad performance and security issues. Regardless of whether the claims were completely fair and true, it did become the start of Flash getting a bad image and losing popularity.

Years later, the major browsers are ending Flash Player support more and more too. At the end of 2020 Adobe will stop updating and distributing the Flash Player. This will be the definitive end of the era of Flash games. So it's time for HTML5 to take this spot.

The rise of HTML5

Starting from its release in 2012, HTML5 was hyped-up to be the new holy grail for browser games. It was supposed to completely make Flash obsolete.

This was easier said than done because it wasn't really that easy to create a decent game with HTML5 at the time. All of a sudden, as a developer, you had to take different browsers and devices into account. And it took quite some time before all HTML5 functions were streamlined and standardized on all browsers. Seemingly simple things, like playing sounds for example, were a big problem. Things that Flash used to make easy to implement.

Luckily this has improved much over the years. Right now HTML5 has great browser support and a wide selection of tools to support development. It's ready to take the place of Flash as king of the browser games.

Even Adobe Flash had an update to create HTML5 animations and games and was renamed to Adobe Animate to get rid of the notorious reputation of Flash.

Benefits of HTML5

One of the biggest advantages that HTML5 holds over Flash is the possibility to run content on mobile devices. This doesn't mean that with HTML5 every game will automatically run on every device. Especially things like sounds and scaling might need some attention, but you can make it work. And when you do, you can show off your game to everyone who owns a mobile phone. So that's about... everyone.

Let's get started with your own game!

That's enough background information for now. You now know a little bit more about HTML5 and how this tutorial series is set-up. It's time to start building your own HTML5 game!

Click next to take the first step in this series and start with setting up an HTML5 page with a canvas. You'll be performing your first drawing operation soon.