Spicy Yoghurt | Last updated: 9 March 2019 | HTML5 game tutorial
Develop an HTML5 game
What is an HTML5 game?This tutorial series is all about building an HTML5 game. 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
Create your own HTML5 gameIn this tutorial series you'll build a simple game that will let you control a player with the arrow keys. The series will take you through the following steps:
- Set-up an HTML5 file and draw static images on the canvas
- Create a game loop
- Animate objects
- Detect collisions and apply physics
- Draw images and sprites on the canvas
- Control game objects with user input
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 and this takes a whole new approach.
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.
Here's a quick preview of what you are going to make along the way:
Forget about Flash gamesIt's time for a bit of a 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 HTML5Starting 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.
One of the biggest advantages that HTML5 holds over Flash is the possibility to play 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!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.