Skip to main content
main-content
Top

About this book

How do you make a video game? Advanced Game Design with HTML5 and JavaScript is a down to earth education in how to make video games from scratch, using the powerful HTML5 and JavaScript technologies. This book is a point-by-point round up of all the essential techniques that every game designer needs to know.

You'll discover how to create and render game graphics, add interactivity, sound, and animation. You’ll learn how to build your own custom game engine with reusable components so that you can quickly develop games with maximum impact and minimum code. You’ll also learn the secrets of vector math and advanced collision detection techniques, all of which are covered in a friendly and non-technical manner. You'll find detailed working examples, with hundreds of illustrations and thousands of lines of source code that you can freely adapt for your own projects. All the math and programming techniques are elaborately explained and examples are open-ended to encourage you to think of original ways to use these techniques in your own games. You can use what you learn in this book to make games for desktops, mobile phones, tablets or the Web.

Advanced Game Design with HTML5 and JavaScript is a great next step for experienced programmers or ambitious beginners who already have some JavaScript experience, and want to jump head first into the world of video game development. It’s also great follow-up book for readers of Foundation Game Design with HTML5 and JavaScript (by the same author) who want to add depth and precision to their skills.

The game examples in this book use pure JavaScript, so you can code as close to the metal as possible without having to be dependent on any limiting frameworks or game engines. No libraries, no dependencies, no third-party plugins: just you, your computer, and the code. If you’re looking for a book to take your game design skills into the stratosphere and beyond, this is it!

Table of Contents

Chapter 1. Level Up!

Abstract
This first chapter of Advanced Game Design with HTML5 and JavaScript is a fast-paced, jam-packed, stuff-your-face buffet of cool, interesting, new, practical and sometimes delightfully mind-bending techniques that you can start using with your game projects right away. Everything you need to know to take your development skills to the next level is right here in this chapter:
Rex van der Spuy

Chapter 2. The Canvas Drawing API

Abstract
The Canvas Drawing API is the HTML5 game designer’s best friend. It’s easy to use, powerful, available on all platforms, and really fast. Not only that, but learning the Canvas Drawing API gives you an excellent introduction to low-level graphics programming that you’ll be able to apply to a wide range of different game design technologies. As a core technology for learning the art of HTML5 game design, it’s the best place to start.
Rex van der Spuy

Chapter 3. Working with Game Assets

Abstract
A game’s assets are all the font, sound, data, and image files that it uses. In this chapter you’ll learn how to implement a clear strategy for loading and managing assets so that they’re easy to use in your game code. You’ll learn how to create an assets object that stores references to all your game assets, and also how to create a preloader that loads assets and initializes your game when everything is ready.
Rex van der Spuy

Chapter 4. Making Sprites and a Scene Graph

Abstract
The game designer’s fundamental building block is the sprite. A sprite is any image, shape, or text that you move, animate, or interact with on the screen. In this chapter you’ll learn how to make sprites from scratch, and then, in the chapters that follow, you’ll learn how to move them, make them interactive, add some collision detection, and use them to build a game.
Rex van der Spuy

Chapter 5. Making Things Move

Abstract
It’s almost curtain time! Your sprites are all dressed up, they’ve memorized their lines, arrived punctually at the rehearsal hall, and are standing patiently on the stage waiting for you to direct them. Now what? You need to animate them!
Rex van der Spuy

Chapter 6. Interactivity

Abstract
Welcome to the greatest-hits countdown of the most important pieces of game code you need to know to add interactivity to your sprites. Now that you know how to make sprites move, you’re going to learn all about how to make them interact with the game world they live in.
Rex van der Spuy

Chapter 7. Collision Detection

Abstract
What happens when two sprites collide? That’s what this chapter is all about: collision detection. You’re going to learn how to determine if two sprites are touching, and make them react in interesting ways when they do. For 2D games, there are four essential collision detection techniques you need to know, and we’re going to cover all of them in this chapter:
Rex van der Spuy

Chapter 8. Juice It Up

Abstract
With all the tools we’ve built in the book so far, you can actually start making real games. But what’s missing so far is what game developers call juice: flashy effects and animation that make the game world feel alive. This chapter is all about three important ways to add juice to your games:
Rex van der Spuy

Chapter 9. Sound with the Web Audio API

Abstract
HTML5 has two different systems for playing sounds: the older HTML5 Audio element and the newer Web Audio API. Which one should you use? For games, use the incredibly powerful Web Audio API. It loads sounds reliably, lets you play multiple sounds at the same time, and gives you precise playback control. In addition, it lets you apply effects, create your own synthesized sounds, and specify different kinds of input and output sources. Once you get over the small learning curve, you'll be able to use the Web Audio API to quickly create any kind of sound system you can imagine.
Rex van der Spuy

Chapter 10. Tweening

Abstract
is an animation technique that you can use to make a sprite change its appearance or position over time in very specific ways. You can use tweening to make a sprite move along a fixed path or curve, or make a sprite fade in, fade out, pulse, or wobble. Using tweening effects will add a whole new dimension of interactivity and engagement to your games that will make them come alive in new and exciting ways.
Rex van der Spuy

Chapter 11. Make Your Own Game Engine

Abstract
So far in this book you've learned how to make a collection of flexible, low-level tools and use them to help build games. But one thing you'll notice after you've made a few games with those tools is that you end up writing a lot of repetitive code. This includes all the code to load your assets, import modules, run the game loop, create sprites, loop through sprites to check for collisions, move sprites, and countless other little uninspiring, tedious, but necessary tasks. All this is the game engine code, and it can end up being up to half of all the code you write.
Rex van der Spuy

Appendix A. Vectors for Movement and Collision Detection

Abstract
You may not know it, but there’s an unseen world of invisible forces at work in your games, called vectors. They’re what make your objects move and detect collisions, and they help you create simulations of real-world physical objects. Vectors are like the atoms and molecules of the game universe—everything depends on them, but they’re very hard to see with the naked eye.
Rex van der Spuy
Additional information