(click anywhere to close)

Introduction to HTML5 Games

category: Games | course: HTML5 Games | difficulty:

Welcome to the complete guide on HTML5 Games! This is the post that will get it all started for you, from here on you can choose your own path to developing greatness.

What is HTML5 Gaming?

HTML5 games can be played on any device or system, as long as it has a capable browser and internet. This is because the games are created from the same code that makes websites (an HTML5 game basically is a very, very interactive website). However, although everyone calls it 'HTML5 games', the actual core of these games is a language called JavaScript (from here on: JS). Originally, JS was created to give the user basic interaction with a website (e.g. clicking a button, changing background-image over time, dynamically loading/updating content). But, most of this has now been taken over by CSS3. CSS is the language used to style websites, and since its third version it can even animate these styles and make them interactive. This gave JS a chance to develop itself into something greater, and now the time has come: it has become easy enough to use JS to create games right in your web browser! 

What do I need? 

  • A browser to test your games in (Chrome or Firefox).
    Chrome has built in developer tools to help you debug, for Firefox you need to install the Firebug extension
  • A text editor to code in (Sublime Text).
    In my opinion, Sublime Text is the best out there, and all you're ever going to need. No need to buy the expensive Adobe DreamWeaver. However, if have your game running on a server, you might want to look into Coda, as it makes you able to keep an ftp connection open wile you code your files,
  • A (Local) Server to run your websites/games on.
    Free hosting is available at multiple places and suffices, but you could always buy 'premium hosting'.
    But, you can also use the software WAMP to create a local server to do everything on.
  • A basic understanding of HTML5 and CSS3
    HTML5 is very much needed for the core structure of the main game page and perhaps a few elements later on. CSS3 is used for styling the game, so it depends on how you want the game to look how much you have to learn.
    Don't worry, both languages are the simplest available (how would the World Wide Web have gotten so popular if it wasn't that way?).
  • Very broad JavaScript knowledge
    I mean it. You need to know the basics of the code you're going to be working with, but HTML5 is not an extremely easy method of creating games. You need to know as much as you can.
  • JS library to help you.
    Don't think 'heh, I can do this on my own, no help'. There are really awesome libraries out there, that really take a lot of the hard work away from creating a game, while still giving you all the freedom in the world to create what you want.

What are the best libraries?

Phaser – good for any 2D game, great support for physics

Pixi.js is included, which is good for drawing (relatively simple) graphics

Three.js – amazing for 3D games right in your browser. But, as for anything that is 3D, it is also harder to learn and use than 2D engines.

Physijs is a phsyics library made exclusively for three.js - it uses the exact same syntax and all as three.js, with only a few minor differences at a few points. So once you've learned three.js, you've practically also already learned how to include physics (I wrote an extra tutorial on it though, do not fret)!

CreateJS – great for adding a nice touch to your games (mainly focusses on interactive, graphical, fluid experiences)

Construct and ImpactJS – Both are paid software for creating HTML5 games, no real coding knowledge is needed.

No previous post :( No next post :(
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk