Advanced Game Design with HTML5 and JavaScript

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!

What you’ll learn

• The latest JavaScript ES6, HTML and Canvas Drawing API skills you need to know to make games.
• Make game sprites, compose a scene graph, load and manage game assets, and how to use a texture atlas.
• Control the geometry and physics of the game world using vector math, the Separating Axis Theory (SAT), and advanced collision detection strategies.
• Build a custom music and sound effects player for games using the WebAudio API.
• Keyframe animation and how to implement precise control over the frame rate and game loop.
• Learn how to make interactive sprites and buttons for the keyboard, mouse and touch.
• Create and manage game scenes, and learn how to make particle explosions and screen shake effects.
• Manage complexity to build games of any size that scale seamlessly.

Who this book is for

Advanced Game Design with HTML5 and JavaScript is for video game developers with some experience who want to learn the essential techniques they need to know to take their skills to the next level. It’s for readers who want to understand and fine-tune every line of code they write, without resorting to quick fixes. All the techniques covered in this book are core game design skills that can be applied to many other programming technologies.

Table of Contents

Chapter 1. Level-up: New JavaScript Tricks
Chapter 2. The Canvas Drawing API
Chapter 3. Working with Game Assets
Chapter 4. Making Sprites and a Scene Graph
Chapter 5. Making Things Move
Chapter 6. Interactivity
Chapter 7. Collision Detection
Chapter 8. Juice It Up: Keyframe Animation and Particles Effects
Chapter 9. Sound with the WebAudio API
Chapter 10. Tweening
Chapter 11. Make Your Own Game Engine

Appendix A: Vectors for Movement and Collision Detection