No Images? Click here

Build a simple shoot-'em-up game

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.

If you have a couple of extra minutes, then here’s the expanded version. A computer can do a lot of things, very quickly. It can update the individual positions of an army of enemy tanks, or flock of virtual bunnies. It can launch missiles or grow carrots or spawn beautiful particle effects. It can detect any collisions that occur. And it can draw everything on screen. All in one sixtieth of a second.

Using just some HTML5 and JavaScript we can build almost any type of game imaginable, from simple shoot-'em-ups:

To penguin-themed minigolf:

HTML5 Games: Novice to Ninja

In Chapter 3 of HTML5 Games: Novice to Ninja you'll learn to build the simple space-based shoot-'em-up pictured above. You'll learn how to implement a game loop, move things on screen, detect collisions, and more!

Start your subscription today and you'll get access to this book, plus 300+ other web design and development books in SitePoint Premium!

Until next time,
James at SitePoint

P.S. Want to learn to build Pengolfin', the penguin-themed physics-based minigolf game illustrated above? That's also in the book!