Building Your First HTML5 Game

It seems like only yesterday that Super Nintendos and Game Boys were hitting the store shelves. Over the years, video game graphics have advanced rapidly, and methods of game development have dramatically improved. Nowadays though, it seems like more kids are playing on mobile devices than traditional consoles.

Enter HTML5 with a brand new spec and support for the beloved canvas element. Using the canvas element with JavaScript and some 2D graphics, anybody can now build crude yet amusing games that run in any web browser.

This post will explain the core concepts of HTML5 game development. Putting aside the expected graphical limitations, you may be surprised how much can be accomplished with only front-end development languages.

Although browser games are often named “HTML5 games”, they require more than just HTML5 to run properly. The HTML5 prefix references the use of a canvas element for game development. Currently all major browsers support canvas which is why this is typically seen as the go-to choice.

Items within a canvas element can be generated programmatically or loaded as graphics. Most HTML5 games rely on sprites and tileable patterns, very similar to old SNES & Game Boy titles.

More advanced graphics can be rendered using WebGL/3D libraries, but most people who are just starting to learn game development prefer 2D for its simplicity.

A typical web game breaks down into the HTML document with a canvas element for interaction. The canvas holds assets/sprites for characters, enemies, treasure chests, etc. Most of these graphics can be loaded via CSS.

Computer games rely on mouse clicks or key presses for user interaction. The most reliable way to handle this interaction is through JavaScript. Once a canvas screen has been setup, most developers work in JavaScript or a JS library to implement functionality.

The example above is a Space Invaders clone built with HTML5/CSS/JS. If you look at the HTML you’ll notice it contains nothing but a canvas element. Everything is manipulated within the canvas using CSS graphics and JavaScript event listeners.

HTML5 has basically replaced Flash game development with a broader API and more public support. Unfortunately, older versions of IE don’t support canvas, so you’d either need to forgo that demographic or try using a supplemental library such as ExploreCanvas.

Before even writing a line of code it would be advantageous to plan out your game’s design. Type (or write) a general guide for the game’s purpose, how users play, and what defines “winning” the game.

Whether you’re building a puzzle or sidescroller, gameplay mechanics are important. Certain events will need to be programmed in JavaScript to respond when players achieve something – or fails to achieve something.

HTML5/CSS3/JavaScript all work well together and can be used to create fun gaming experiences. But the mechanics are still new, so it’s important to have your ideas planned out well in advance.

Think about a list of necessary functions and how these functions would be coded. When does a player lose all their lives and have to restart the game? How do you manage high scores?

Also think about user interaction regarding how the game would feel “most comfortable” to play. Indiara and the Gold Skull is an Indiana Jones throwback with a female lead and vector graphics. The game itself feels pretty smooth, and only relies on the mouse for input.

Could the game have been developed differently to include keyboard events? Absolutely. But it’s also a great example of how simplicity can work in your favor.

Game developers refer to the music, graphics, and animation cycles as assets. For HTML5 canvas games, these assets should be created and stored locally on a server with the game.

When organizing graphical assets you want to consider interactive elements and non-interactive elements. For a small RPG game, the interactive elements would be the player’s character along with enemies and treasure chests. Anything that can interact with other items on the screen should be considered interactive.

Non-interactive graphics are more like backgrounds and tiles. Photoshop and Illustrator are both perfect choices for making these BG graphics and exporting them for use on the web.

If you’re interested in 3D then check out some WebGL examples to see what else you can do. WebGL is a JavaScript library/API for rendering more advanced graphics in the browser. You could also try designing custom graphics with CSS3 transforms, but this is far more limiting.

When it comes to animation you’ll want to build a sprite sheet of characters in different stages. For example, take a look at this Street Fighter tutorial by David Walsh. He’s created a controllable character with predefined moves that animate on keypress. The project is quite educational and you can play about with the code for free on CodePen.

Since JavaScript can be used to move objects along the page, you don’t always need to create unique animations from scratch. But if you like the style of 2D graphics then try practicing sprite animation tutorials to pick up the basics concepts for 2D game animation.

Interactive components are truly what define games. A game without an active player is just a pretty graphic on the screen. JavaScript is the best way to handle user actions, both from the mouse and the keyboard.

JavaScript has built-in methods for catching interactions known as event listeners. JavaScript can be set to listen and record whenever an event occurs, like a mouse click or the “A” keypress. Once this happens the event listener can trigger a function and perform anything you want.

The above example relies on a mouse click event to make the racoon jump. It’s comparable to old Mario games where your NES controller would be used instead of a mouse. Development techniques may be different but the outcome is the same.

More complicated interactions can happen without regard to user input. For example, if Mario walks into a turtle what happens? He loses a life. If you were building an HTML5 clone of Mario then you’d need to listen for this event and run a function if the player bumps into a turtle.

However not all games need to follow the Mario, Sonic, and Donkey Kong template. Take this word search game which runs just like a typical crossword puzzle. You drag to highlight words and points are awarded based on the number of words solved.

The functions and calculations for a word search game are vastly different compared to Super Mario. But they both require user interaction which, in the HTML5 game world, relies heavily on JavaScript.

If you want to build HTML5 games the first step is to take a look at the core languages involved. Most web designers & developers have some familiarity with HTML and CSS. These are also the two easiest languages to learn because they’re only used for markup and styling.

JavaScript will also be necessary and the level of required knowledge differs based on what you want to create. A connect-the-dots type game is much easier than a sidescroller with obstacles and enemies.

Ultimately you have to start somewhere so just get started! Practice game tutorials for beginners to learn the primary aspects that go into HTML5 gamedev. Then branch out into niche tutorials like sprite-based games or JS game engines like CreateJS.

Everyone starts out as a beginner at some point. Beginners always have a gap between their current skillset and their ideal skillset. The fastest way to close this gap is to churn out volumes of work and just keep learning.

If you’re unnerved by the complexity of straight JavaScript then try looking into game libraries for higher levels of abstraction. Most libraries are open source and the documentation is easy to understand. Here are a few open source options to get you started:

With ever-advancing features and greater browser support, HTML5 is consistently regarded as the future of web design. In-browser games are only the tip of the iceberg with a very promising collection of APIs and 3rd party libraries. This guide should be an excellent introduction to the subject and I hope curious game developers will continue to practice and push the trend further.

Read more about how Envato items are used to both create, and promote video games. Learn all about branding the Esports generation, how to make a gaming logo as a player, and how to create a full-screen video background with HTML5 video.