Advanced Game Design with HTML5 and JavaScript [electronic resource] /
van der Spuy, Rex.author.
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!
Contents at a Glance; Introduction; Chapter 1: Level Up!; Some New JavaScript Tricks; Variables: let, const, and var; Functions; Getting Loopy with Arrays; Using forEach; Using a for of Loop; Looping through Objects; Looping through Only Some Array Elements; Finding Array Elements; Mapping an Old Array to a New Array; Filtering Elements from an Array; Reducing Array Elements to a Single Value; Making Variables from Arrays with Destructuring; Function Arguments; Initializing a Function with a Configuration Object; Getters and Setters; Preventing Changes to Properties with Object.defineProperty
Creating ObjectsMaking Objects from Other Objects; Composition; Understanding Closure; Configuring Objects; Mixing and Matching Objects; Classes; Inheritance; Modules; Module Basics; Importing a Property as a Different Name; Module Export and Import Options; Module Default Exports; Re-exporting Modules; Modules and Code Architecture; Working with External Data; Loading Data with JSON and XHR; How XHR Loads the JSON file; Saving Game Data with localStorage; More Options for Loading and Saving Game Data; Using Promises; Playing Games Full- Screen; Using the Fullscreen API
Creating a Full-Screen Toggle ButtonMinifying Your JS Source Code; Using iFrames to Distribute Your Games on the Web; Setting Focus to the iFrame; Summary; Chapter 2: The Canvas Drawing API; Setting Up the Canvas; Drawing Lines; Line Caps; Connecting Lines to Create Shapes; Drawing Complex Shapes; Line Joins; Drawing Squares and Rectangles; Gradients; Drawing Circles and Arcs; Drawing Curved Lines; Shadows; Rotation; Scale; Making Things Transparent; Using Blend Modes; Compositing Effects; Filling Shapes with Images; Drawing an Image; Masking an Image; Blitting an Image onto the Canvas; Text
SummaryChapter 3: Working with Game Assets; The assets Object; Building the assets Object; Initializing the Loading Process; Loading Images; Loading Fonts; Loading JSON Files; Using a Texture Atlas; Creating the Texture Atlas; Loading the Texture Atlas; Loading and Using the Texture Atlas in Your Game Code; Summary; Chapter 4: Making Sprites and a Scene Graph; What Are Sprites?; Making a Rectangle Sprite; The children Array; The rectangle Sprite; The render Function; Making Sprites; Building a Scene Graph; Creating Nestable Rectangle Sprites; The Stage and the Canvas; The New render Function
Nesting SpritesLocal and Global Coordinates; Rotation; Scale; Alpha Transparency; Depth Layering; Sprites for Games; The DisplayObject Class; Coding the DisplayObject Class; A Full-featured Render Function; The Stage; The Rectangle Class; Masking; API Insurance; Pivoting Around the Rotation Axis; The Circle Class; The Line Class; The Text Class; The Group Class; The Sprite Class; Making Sprites from Single Images; Making Sprites from Texture Atlas Frames; Blitting a Subimage from a Tileset; Blitting Multiple Tileset Frames; Using Multiple Texture Atlas Frames; Using Multiple Image Files
Making Your Own Sprites
Includes index.
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!
Computer games—Programming.
Software engineering.
Game Development.
Software Engineering/Programming and Operating Systems.