3D Game Programming for Kids, Second Edition Create Interactive Worlds with JavaScript by Chris Strom Version: P1.0 (July 2018) Copyright © 2018 The Pragmatic Programmers, LLC. This book is licensed to the individual who purchased it. We don't copy-protect it because that would limit your ability to use it for your own purposes. Please don't break this trust—you can use this across all of your devices but please do not share this copy with other members of your team, with friends, or via file sharing services.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf and the linking g device are trademarks of The Pragmatic Programmers, LLC. Every precaution was taken in the preparation of this book.
However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein. About the Pragmatic Bookshelf The Pragmatic Bookshelf is an agile publishing company. We’re here because we want to improve the lives of developers. We do this by creating timely, practical titles, written by programmers for programmers.
Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://pragprog. Our ebooks do not contain any Digital Restrictions Management, and have always been DRM-free. We pioneered the beta book concept, where you can purchase and read a book while it’s still being written, and provide feedback to the author to help make a better book for everyone.
Free resources for all purchasers include source code downloads (if applicable), errata and discussion forums, all available on the book's home page at pragprog. We’re here to make your life easier. New Book Announcements Want to keep up on our latest titles and announcements, and occasional special offers? Just create an account on pragprog.com (an email address and a password is all it takes) and select the checkbox to receive newsletters. You can also follow us on twitter as @pragprog.
About Ebook Formats If you buy directly from pragprog.com, you get ebooks in all available formats for one price. You can synch your ebooks amongst all your devices (including iPhone/iPad, Android, laptops, etc. You get free updates for the life of the edition. And, of course, you can always come back and re-download your books when needed.
Ebooks bought from the Amazon Kindle store are subject to Amazon's polices. Limitations in Amazon's file format may cause ebooks to display differently on different devices. For more information, please see our FAQ at pragprog.com/frequently-asked-questions/ebooks. To learn more about this book and access the free resources, go to https://pragprog.com/book/csjava2, the book's homepage.
Thanks for your continued support, Andy Hunt The Pragmatic Programmers The team that produced this book includes: Andy Hunt (Publisher), Janet Furlow (VP of Operations), Brian MacDonald (Managing Editor), Jacquelyn Carter (Supervising Editor), Adaobi Obi Tulton (Development Editor), Paula Robertson (Copy Editor), Potomac Indexing, LLC (Indexing), Gilson Graphics (Layout) For customer support, please contact support@pragprog. For international rights, please contact rights@pragprog. For Elsa and all the princesses who are going to change the world. Table of Contents Acknowledgments 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! 1.
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 2. 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 3. 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 4. 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 5.
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 6. 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 7. A Closer Look at JavaScript Fundamentals Getting Started Describing Things in JavaScript Numbers, Words, and Other Things in JavaScript Control Structures What’s Next 8. Project: Turning Our Avatar Getting Started Facing the Proper Direction Breaking It Down Animating the Spin The Code So Far What’s Next 9.
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 10. Project: Collisions Getting Started Rays and Intersections The Code So Far What’s Next 11. 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 12. 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 13.
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 14. 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 15. 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 16. 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 17.
Project: Ready, Steady, Launch Getting Started The Launcher Scoreboard Baskets and Goals Wind! The Code So Far What’s Next 18. 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 19. 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 20. Getting Code on the Web The Mighty, Mighty Browser Free Websites Putting Your Code on Another Site The Code So Far What’s Next A1.
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 A2. JavaScript Code Collections Used in This Book Three.js Physijs Controls Noise Scoreboard.js Shader Particle Engine Sounds.js Bibliography Copyright © 2018, The Pragmatic Bookshelf. Early praise for 3D Game Programming for Kids, Second Edition This book helped me expand my programming knowledge and introduced me to 3D gaming concepts, and it was engaging at the same time., age 13 I cracked this book open and had flashbacks to laboriously typing out game programs for the Commodore 64 (Zuider Zee forever!) and was excited at the prospect of sharing that sort of experience with my own kid. This let me dive into JavaScript with the reckless abandon of my long-lost youth and immediately have neat things to show.
Finding books that I can learn something from is not terribly hard, but finding a book that I can learn from along with my kid is invaluable. → Ron Donoghue Co-Founder, Evil Hat Productions I am 11 years old and have been homeschooled for my entire life. I recommend this book as a homeschool programming course and for kids who enjoy programmming. This book is good for experienced programmers and novice programmers who want to do 3D programming right away., age 11 This is a great hands-on book for a kid or even someone with some programming chops, who is interested in making small games.
It teaches you how to get started with 3D programming, and it’s really neat that it shows how you can build a decent game in just a little bit of time. → Nick McGinness Software Engineer, Direct Supply I think this book would teach kids a lot about programming 3D objects. I learned I think this book would teach kids a lot about programming 3D objects. I learned about some new math and programming.
→ Owen, age 10 Chris Strom teaches kids 3D game programming with simple yet powerful explanations and examples. But if you’re an adult, you can learn from this book, too. I did! → Ron Hale-Evans author of Mind Performance Hacks and Mindhacker This is a bright and breezy trip through basic game coding in 3D, with many useful and practical tips on how to approach programming. I’m confident my kids will learn a lot from it.
→ Paul Callaghan Former educator, now web developer, and father of three boys I had a lot of fun with this book. I like how it always hints at what’s to come so I would really look forward to the upcoming projects. The author also cracked jokes that kids would understand. I felt as if the author was talking to me in real life, which made the book more enjoyable and made the projects easy to follow.
I would recommend this book to anyone who is looking for a fun and easy way to learn code., age 13 Acknowledgments I am nothing without the strength of my amazing wife, Robin, who helps in ways innumerable. She was the sole editor for the early versions of the book. Despite a full load of her own, she still reads every chapter and gives invaluable notes and suggestions. She helped to run the kid hackathons (OK, she runs them) that aided in development of this book.
And oh, yeah—she’s an awesome wife and mother. Also a big thanks to my kids for serving as the primary guinea pigs for this book. Readers can thank them for forcing me to remove the boring stuff and making the fun and interesting stuff more so. And, of course, huge thanks to my technical reviewers.
It’s a tough task to review a book from a kid’s perspective, but my reviewers were more than up to the task. In no particular order, they are Ana B., Paul Callaghan, Rob Donoghue, Kevin Gisi, Ron Hale-Evans, Brian Hochgurtel, Brian Hogan, Chaim Krause, Nick McGinness, James Sterrett, and Jeremy Sydik. This book would not exist without the great work of Ricardo Cabello Miguel, affectionately known as “Mr.