Follow our guide to build yourself a crude yet amusing 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.
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.
HTML5 Game Fundamentals
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.
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.
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.
Graphics & Sprite Sheets
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.
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.
Handling User Interaction
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.
Tips for Getting Started
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.
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.
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.