Spicy Yoghurt | Last updated: 2 Februari 2019 | HTML5 game

Develop a HTML5 game

Learn how to develop your own HTML5 game, by using HTML5 with JavaScript. You will learn about the HTML5 canvas, how to set-up a game loop, creating animations, collision detection, drawing images and user input. Follow this tutorial series and end up with a very basic game of your own.

What is a HTML5 game?

HTML5 logo This tutorial series is all about building a HTML5 game, but what exactly does that mean? 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 Hyper Text Markup Language)
  • It only describes the content of a web page and links it to a style sheet
  • It's not an actual programming language
So HTML5 isn't suited to write the logic that is needed to create a game. Then what is a 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 will be dealing with JavaScript. JavaScript is an actual programming language and you can write game logic with it. To say it in short: HTML will create you drawing board and JavaScript will draw your game on it.

This means that, whenever people talk about a HTML5 game, they actually mean a HTML5, CSS3, JavaScript game.

Biggest benefit of HTML5

With HTML5 you can create games that run in any modern browser. It can run on mobile devices too. A couple of years ago this wasn't possible that easily. People used to create browser games with Flash. Flash was great for making animations, but it didn't have mobile support. People don't use Flash anymore these days. Mainly because of security issues in the Flash Player plugin, the software got a bad image and is losing browser support more and more every day.

So if you want mobile support, go with HTML5. 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.

Create your own HTML5 game

The aim of this tutorial series is to let you get familiar with game programming. 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.

You will build a simple game that will let you control a player with the arrow keys. For this to work you'll need a running game loop and a way to detect collisions, draw images and interpret user input. Don't expect the next Call of Duty game. This is just a very basic series of lessons to get you started, but it is going to be fun! You will start with nothing and build your game from the ground up.

Let's get started!

You now know a little bit more about HTML5 and how this tutorial series is set-up. It's time to get to work! Click next to take the first step in this series and start with setting up a HTML5 page with a canvas.

Leave a comment