Get $500+ of the best After Effects files, video templates and music for only $20!
Learn HTML5 With This Simple Avoider Game Tutorial
basix

Learn HTML5 With This Simple Avoider Game Tutorial

This entry is part 1 of 3 in the series HTML5 Avoider Game Tutorial

In this tutorial (the first of a series), you’ll learn the basics of HTML5 game development with JavaScript and the canvas element. You don’t need to have any programming experience, or even any HTML experience (apart from this one article). Let’s get started!

HTML5 Avoider Game Tutorial: Multiple Moving Enemies
basix

HTML5 Avoider Game Tutorial: Multiple Moving Enemies

This entry is part 2 of 3 in the series HTML5 Avoider Game Tutorial

In the first part of this series, you learned the basics of using JavaScript and the canvas element to make a very simple HTML5 avoider game. But it’s too simple – the single enemy doesn’t even move – there’s no challenge! In this tutorial, you’ll learn how to create a never-ending stream of enemies, all falling from the top of the screen.

HTML5 Avoider Game Tutorial: Keeping Score
basix

HTML5 Avoider Game Tutorial: Keeping Score

This entry is part 3 of 3 in the series HTML5 Avoider Game Tutorial

So far, we’ve got a never-ending stream of enemies that our avatar must avoid; one touch, and it’s game over. But so what? Since there’s no way to track the player’s progress, they have no idea whether they did better in their latest round than they ever did before. In this tutorial, you’ll learn how to keep score, how to display it on the canvas, and how to let the player know when they’ve beaten their own records.