Create impressive and engaging, cross-platform games from scratch. You'll learn how to dissect the elements that make successful games and develop practical skills in game design, loops and user input, animation, maps, collision detection and AI, mathematics, game physics, and much, much more.

HTML5 Games: Novice to Ninja

Preface

If you only have a few seconds to learn game development, here’s the super-condensed version. Fetch user input. Move everything just a tiny bit. Check if anything overlaps. Draw everything. Repeat this 60 times every second.

Press Space to Start

Having settled into your brand new office space, your fellow co-workers are starting to ask you some hairy questions—such as, “Can we see some of your work?” The problem is, so far we have nothing to show (don’t show them that “what number am I thinking of?” game, please). We don’t even have a logo. It’s important to have great game ideas—but ideas alone are not enough. We need to get them out of our head and onto the screen as soon as we can. Before we can run, we need to learn to walk. For us, that means displaying some simple graphics. We need to start drawing things.

Drawing Things

There’s a knock on the frosted-glass office window. It’s Guy Shifty and his shiny white teeth. “Hey, friend!” he croons, “we’ve got a little Friday two-hour game jam going on this afternoon. Fancy showing us what you’re made of? I don’t expect you can do anything under that kind of time pressure, but I’ll buy a copy of the winner’s game for a dollar. You in?”

Game Loops &amp; User Input

In the last chapter, we developed the initial version of our game library and used it to create a nifty shoot-’em-up. Hopefully you’re excited about that. It means we have all the essential ingredients needed to make some basic games. And games do not have to be complex to be addictive and compelling. Tetris and Flappy Bird are two examples of games that are fundamentally simple yet have managed to gobble up large chunks of humanity’s free time.

Animation, Levels, Maps, Cameras…

After a marathon work week, you pat yourself on the back and pack up your stuff, ready to enjoy the lazy weekend ahead. As you get up to leave, you’re startled to discover Guy Shifty perched like the Cheshire Cat on the edge of your desk.

Collision Detection &amp; AI

Well, I won’t sugar coat it: we’re in trouble. The Lucky Dare Game Jam Competition is 50% over, and it turns out we wasted the entire first day working on entirely the wrong project. We need to pivot and somehow transform our spooky maze crawler into something physics-based .

Mathematics &amp; Physics

The human brain is so easily manipulated and enchanted by sound. Great audio has played a starring role in every influential game ever. We all have fond memories of our favorite game’s theme tunes and sound effects. Audio can make or break a game. I’ll say it 100 times in this chapter, until you believe me: audio IS NOT optional . It can’t be left until the end, and it can’t be an afterthought. It must be planned and developed along with the rest of your assets, in order to achieve your artistic vision.

Audio

In game development, the first 90% of a project is a lot easier than the second 90%. — Tim Sweeney, Founder of Epic Games 

Bringing a Game to Life with “Juice”

“Hey, MomPop Games,” whispers a nervous-looking, hoodie-clad figure you recognize as one of Guy Shifty’s coders. “We just wanted to give you a heads-up about IGC. Shifty saw how your Bravedigger game was shaping up, so he’s got us working on multiple games that he’s going to enter in multiple categories! I think you’ll have to beat him on desktop and mobile. Otherwise, he says he wins the bet. I gotta go. Good luck.”

Community Questions