3D Game Programming for Kids, Second Edition

Create Interactive Worlds with JavaScript

by Chris Strom

You know what’s even better than playing games? Programming your own! Make your own online games, even if you’re an absolute beginner. Let your imagination come to 3D life as you learn real-world programming skills with the JavaScript programming language—the language used everywhere on the web. This new edition is completely revised and takes advantage of new programming features to make game programming even easier to learn. Plus, new effects make your games even cooler. When you’re done, you’re going to be amazed at what you can create.

Printed in full color.

Jump right in! Start programming cool stuff on page 1. Keep building new and different things until the very last page. This book wants you to play. Not just play games, but play with code. Play with programming. Because the best way to learn something is to have fun with it!

This second edition is updated from start to finish to make it even easier to get started programming in JavaScript. Every example has been updated to make it easier, with new example games to explore and new 3D effects that make your games even more fun! Want a red donut? You can make hundreds of them, spinning around like mad. Want to create a star field? Make a hundred or a thousand stars. Make them red, green, or blue. Explosions? Fireworks? Planets? It’s up to you. And, using a code editor created especially for this book, you’ll program right in your web browser. You’ll see the results of your work and imagination right away—right next to the code that you just typed! Along the way, you’ll pick up a ton of programming knowledge, and dive in even deeper with some more advanced chapters.

Whatever you want to do, this book has your back. Best of all, you get to create awesome games and say, “I made this!”

Q&A with the Author:

1. Why a second edition?

I wrote the second edition for the very best reason possible: to help kids of all ages and backgrounds learn even better!

It finally felt like I could improve on the original. Web technologies—especially the ones that are used in this book—have continued to improve since the first edition came out. Plus, thousands and thousands of kids learned from the original. The feedback from many of them made it clear which sections of the book work and which could use some tweaking.

2. What cool new stuff is there?

Web browser technology has gotten a lot better since the first edition. That means lots of nifty stuff for readers. Some of the new features in the book include fire, star fields, and realistic terrain. We also use mouse and keyboard controls that let us zoom in and out and move through the games and simulations that we create.

More importantly, improved web technology makes 3D programming even easier than it was a few years back. This meant that nearly every chapter got rewritten to introduce the fun stuff even sooner than before.

Cool new stuff and chapters that are more fun? Yup, it’s a big deal.

3. Why did you write 3D Game Programming for Kids?

I wanted to share my love of programming with my own kids as well as the next generation of programmers. I chose to wrap the message in the deliciousness of 3D gaming because that makes it more fun for kids (of all ages).

We all want to create something amazing. So why not create amazing things as you’re learning? My hope is that this book will enable kids of all ages to bring their ideas to life. And, if they fall in love with programming along the way, that would be great!

4. Why JavaScript? Why not Python or some other language?

The web—the world, really—runs on JavaScript. So JavaScript is a fantastic programming language to know.

And because it’s the language of the web, it is easy to get started with JavaScript. All a new programmer needs is a browser. A browser and a great, online code editor like the 3DE Code Editor that this book uses. There is nothing to install. There is no barrier to getting started. Learning to program is hard enough without the initial pain and frustration of installing languages and tools.

In the Internet age, what could be simpler?

Most kids won’t want to hear this, but I also opted for JavaScript because it is extremely practical. Websites, web pages, web applications, and mobile applications are all built with JavaScript. People who know JavaScript are well prepared for the digital future. Being practical does have some advantages—like being able to share games and embed them on your own web sites!

And I have to admit that I love programming JavaScript. I have been programming JavaScript myself for years and never tire of it. I love it all the more for the incredible tools and libraries that have sprung up around it recently—especially the amazing Three.js library that we use throughout the book.

5. What kind of games will I be able to make with this book?

The book includes a nice variety of game types. Much of the first half of the book is spent creating a 3D player in a 3D world with a focus on making it as realistic and playable as possible. After that, we learn space simulations, puzzle games, mini-games, and games that simulate real-world physics. Some games include scoring, others a countdown timer, and some a little of both. Even though the name of the book includes “3D,” we also spend time on two dimensional games (think Super Mario Brothers). About the only thing we will not talk about is a multiplayer game—maybe that’s something for another book!

We won’t go into great detail about all of these things—this is a getting-started book. But you should see enough to know how to start building these on your own. I cannot wait to see what you create!

6. Will I learn enough to be able to move on to other programming languages?

Absolutely! Programming languages are like spoken languages—there are lots of both kinds of languages and the more you learn, the better you get at learning. This book covers a ton of programming knowledge in addition to describing games and 3D concepts. Much of what you learn about JavaScript will be of use as you explore other programming languages.

That said, JavaScript is a fantastic first language to learn. It is the language of the web and you can use it to do an amazing variety of things—from creating web pages, to making web applications, to making games, to even programming robots! You could program only JavaScript for years and still learn something new every day, which is what makes programming so much fun!

7. Do you teach cool new JavaScript features like ES6?

Nope! There’s a ton to love in ES6, but I very intentionally stick with more traditional JavaScript. Why? I did it for the kids :)

To teach properly—especially with kids—it is super important to introduce only one concept at a time. When experienced JavaScripters look at ES6, we think how wonderfully expressive it is. But we overlook the concepts that it pretties up.

Take arrow functions for example. They are wonderful little space savers for returning simple values from functions. But using them begs the question of what a function is, what a return statement is, what a bare function is, etc. It is better to avoid concept overload by sticking with with plain-old (but still powerful) named functions.

And sure, the book could have taught the traditional approach first, then introduced cool ES6 features. But let’s face it, kids aren’t going to get nearly as excited about ES6 prettiness as they are about creating planets and spaceships and fun, weird little worlds. So the book is optimized for the fun stuff.

• Errata, typos, suggestions

• Source Code (zip file)

Releases:

• P1.0 2018/07/09
• B7.0 2018/06/14
• B6.0 2018/04/18
• B5.0 2018/02/28

Introduction

How I Learned to Program (and Why That Matters to You)

How YOU Can Learn to Program

Getting Help

What You Need for This Book

What Is JavaScript?

What’s New in the Second Edition?

What This Book Is Not

Let’s Get Started!

• Project: Creating Simple Shapes
  • Programming with the 3DE Code Editor
  • Making Shapes with JavaScript
  • Creating Spheres
  • Making Boxes with the Cube Shape
  • Using Cylinders for All Kinds of Shapes
  • Building Flat Surfaces with Planes
  • Rendering Donuts (Not the Kind You Eat) with Torus
  • Animating the Shapes
  • The Code So Far
  • What’s Next
• Debugging: Fixing Code When Things Go Wrong
  • Getting Started
  • Debugging in 3DE: The Red X
  • Debugging in 3DE: The Yellow Triangle
  • Opening and Closing the JavaScript Console
  • Debugging in the Console
  • Common 3D Programming Errors
  • Recovering When 3DE Is Broken
  • What’s Next
• Project: Making an Avatar
  • Getting Started
  • Smooth Chunkiness
  • Making a Whole from Parts
  • Breaking It Down
  • Adding Feet for Walking
  • Challenge: Make the Avatar Your Own
  • Doing Cartwheels
  • The Code So Far
  • What’s Next
• Project: Moving Avatars
  • Getting Started
  • Building Interactive Systems with Keyboard Events
  • Converting Keyboard Events into Avatar Movement
  • Challenge: Start/Stop Animation
  • Building a Forest with Functions
  • Moving the Camera with the Avatar
  • The Code So Far
  • What’s Next
• Functions: Use and Use Again
  • Getting Started
  • Basic Functions
  • Functions that Return Values
  • Using Functions
  • Breaking Functions
  • Bonus #1: Random Colors
  • Bonus #2: Flight Controls
  • The Code So Far
  • What’s Next
• Project: Moving Hands and Feet
  • Getting Started
  • Moving a Hand
  • Swinging Hands and Feet Together
  • Walking When Moving
  • The Code So Far
  • What’s Next
• A Closer Look at JavaScript Fundamentals
  • Getting Started
  • Describing Things in JavaScript
  • Numbers, Words, and Other Things in JavaScript
  • Control Structures
  • What’s Next
• Project: Turning Our Avatar
  • Getting Started
  • Facing the Proper Direction
  • Breaking It Down
  • Animating the Spin
  • The Code So Far
  • What’s Next
• What’s All That Other Code?
  • Getting Started
  • A Quick Introduction to HTML
  • Setting the Scene
  • Using Cameras to Capture the Scene
  • Using a Renderer to Project What the Camera Sees
  • Exploring Different Cameras
  • What’s Next
• Project: Collisions
  • Getting Started
  • Rays and Intersections
  • The Code So Far
  • What’s Next
• Project: Fruit Hunt
  • Getting Started
  • Starting a Scoreboard at Zero
  • Giving Trees a Little Wiggle
  • Jumping for Points
  • Making Our Games Even Better
  • The Code So Far
  • What’s Next
• Working with Lights and Materials
  • Getting Started
  • Emitting Light
  • Ambient Light
  • Point Light
  • Shadows
  • Spotlights and Sunlight
  • Texture
  • Further Exploration
  • The Code So Far
  • What’s Next
• Project: Phases of the Moon
  • Getting Started
  • The Sun at the Center
  • Game and Simulation Logic
  • Local Coordinates
  • Multi-Camera Action!
  • Bonus #1: Stars
  • Bonus #2: Flying Controls
  • Understanding the Phases
  • Not Perfect, But Still a Great Simulation
  • The Code So Far
  • What’s Next
• Project: The Purple Fruit Monster Game
  • Getting Started
  • Outline the Game
  • Adding Ground for the Game
  • Build a Simple Avatar
  • Add Scoring
  • Gameplay
  • Improvements
  • The Code So Far
  • What’s Next
• Project: Tilt-a-Board
  • Getting Started
  • Outline the Game
  • Bonus #1: Add a Background
  • Bonus #2: Make Fire!
  • Challenge
  • The Code So Far
  • What’s Next
• Learning about JavaScript Objects
  • Getting Started
  • Simple Objects
  • Properties and Methods
  • Copying Objects
  • Constructing New Objects
  • The Worst Thing in JavaScript: Losing this
  • Challenge
  • The Code So Far
  • What’s Next
• Project: Ready, Steady, Launch
  • Getting Started
  • The Launcher
  • Scoreboard
  • Baskets and Goals
  • Wind!
  • The Code So Far
  • What’s Next
• Project: Two-Player Games
  • Getting Started
  • Two Launchers
  • Two Scoreboards
  • Teaching Baskets to Update the Correct Scoreboard
  • Sharing a Keyboard
  • A Complete Reset
  • The Code So Far
  • What’s Next
• Project: River Rafter
  • Getting Started
  • Pushing and Pulling Shapes
  • Rough Terrain
  • Digging a River
  • Scoreboard
  • Build a Raft for Racing
  • Resetting the Game
  • Keyboard Controls
  • The Finish Line
  • Bonus: Keeping Score
  • The Code So Far
  • What’s Next
• Getting Code on the Web
  • The Mighty, Mighty Browser
  • Free Websites
  • Putting Your Code on Another Site
  • The Code So Far
  • What’s Next
• Project Code
  • Code: Creating Simple Shapes
  • Code: Playing with the Console and Finding What’s Broken
  • Code: Making an Avatar
  • Code: Moving Avatars
  • Code: Functions: Use and Use Again
  • Code: Moving Hands and Feet
  • Code: A Closer Look at JavaScript Fundamentals
  • Code: Turning Our Avatar
  • Code: What’s All That Other Code?
  • Code: Collisions
  • Code: Fruit Hunt
  • Code: Working with Lights and Materials
  • Code: Phases of the Moon
  • Code: The Purple Fruit Monster Game
  • Code: Tilt-a-Board
  • Code: Learning about JavaScript Objects
  • Code: Ready, Steady, Launch
  • Code: Two-Player Ready, Steady, Launch
  • Code: River Rafter
  • Code: Getting Code on the Web
• JavaScript Code Collections Used in This Book
  • Three.js
  • Physijs
  • Controls
  • Noise
  • Scoreboard.js
  • Shader Particle Engine
  • Sounds.js
  • Tween.js