Introduction

I ’ve been working on this book for about 35 years. I’ve always liked inventing games. Even as a kid, I would try to think up new kinds of board games with paper and pencil. I must have come up with hundreds of terrible game ideas.

When I was a teenager (in the early ’80s,) I got access to a computer. That changed everything. Sure, you could do cool things with it, but my favorite part was how I could make any game I could imagine. I learned how to program specifically so that I could write games.

Eventually, I grew up (at least chronologically) and turned my computing skills to “serious” pursuits like commercial programming and teaching. But I never forgot about games, and I still write games for fun. Whenever I get a new machine or programming language, I master it by creating games. Playing games is fun, but making them is incredible.

Game programming was simple in the early days because computers couldn’t do much. As things have become more complicated and expectations higher, it’s become harder and harder to get into game development. Today’s technology is incredibly capable, but it can be overwhelming to a beginner. Programming is hard enough, and game programming is often even more ­difficult.

I want to concentrate on the main ideas of programming and game development without being overwhelmed by details, and it seems I’m not the only one. People still want to create games for themselves, and they’re willing to learn how to write computer programs to do so. What they need is a way to learn real programming and make some fun games without being overwhelmed with arcane details, and without spending a ton of money on software and equipment.

If you want to learn programming through game development in HTML5, you need a tool to hide some of the more arcane details. I developed an open-source (and completely free) game development library designed specifically to make programming and game development easy to learn. Even if you’ve never programmed before, you should be building a game or two after your very first session, and by the time you’re halfway through the book, you’ll be building your own web-based arcade games.

About This Book

This is the book I wish I’d had 35 years ago. It’s my sincere hope that this book changes your life by giving you the tools to build the great games that are perhaps germinating within you.

As you read this book, you’ll develop a lot of skills:

HTML5: This markup language is the foundation of the modern Internet. Although you won’t uncover every detail of HTML, you will master enough to make a functional web page.

CSS: This language allows you to change the way a web page looks. I’ve written books much longer than this one about HTML and CSS, but in this book, you’ll learn enough CSS to make your pages and games look good.

Computer programming: Most of the book focuses on the JavaScript programming language. You find all the main features of any programming language, including variables, loops, conditions, functions, and object-oriented programming. These are the ideas taught in most introductory computer science courses.

Game development: Games are a specific type of programming, and in this book, you use the simpleGame library to build powerful and interesting 2D games. You discover how games work with space and time, how to build sprite objects, and how to handle things like sound effects, collision detection, and multi-state game elements.

Mobile development: The games you write in this book will work on any modern browser, including the one that comes with your smartphone or tablet. The simpleGame library incorporates a number of mobile features, including the use of touch input, a virtual joystick mechanism, and tilt control access.

What You Will Need

One of the best things about HTML5 and JavaScript development is how easy it is to get started. Any modern computer will do. (I tested on Windows 7, Ubuntu Linux, and Mac OSX.) You probably already have everything you need on your computer. There is absolutely nothing else you’ll need to buy. However, I do recommend that you download and install a few free programs. Chapter 1 goes into some details about the specific tools to install, but here are the tools you need to start with:

Your background: I don’t assume any programming or web development knowledge. If you already have these skills, you’ll have a great time. If you’re just getting started, you’ll probably need to concentrate on the first few chapters before you’re ready to do things toward the end of the book.

An HTML5-compliant browser: My personal favorite browser is Google Chrome because it follows the standards you use in this book very well. It’s available on every operating system, and it has very helpful debugging tools. The latest version of any major browser will probably be fine.

A good text editor: You should really have a dedicated programmer’s text editor. I like Komodo Edit because it does everything you need, provides some help for programmers, works well on multiple operating systems, and is free.

A graphics tool or two: You’ll probably want to do some artwork for your games. I recommend GIMP (a very powerful free raster graphics package) and Inkscape (an equally impressive vector graphics tool).

An audio editor: I really like Audacity, a powerful and free audio recording and editing tool.

Links to all of these programs are available on my main website (www.aharrisbooks.net/h5g). Chapter 11 highlights these and several other great game programming resources.

How to Read This Book

People from many different backgrounds can use this book.

If you’re brand new to computer programming, I suggest going through the whole book in order. The ideas in the book generally build on each other. HTML provides the basic framework for your games, so you can start there. If you’re already comfortable with modern HTML and CSS, you can skip ahead to the JavaScript sections.

If you know how to build web pages but you’re new to JavaScript, begin by looking into JavaScript to see how this language is similar to the language you already know.

If you’re comfortable with programming and JavaScript, you can move straight to the chapters on the simpleGame engine and discover how to make your own games quickly and easily. If you’re an advanced JavaScript programmer, you’ll particularly like Chapter 12, which explains many of the technical details of the game engine.

If you’re an experienced programmer, you can jump to the game starters in Chapter 13. Each one is a partially completed game in a different genre. Try your hand at building a whack-a-mole game, a role-playing game, or a tile-based world.

Of course, feel free to just start where you wish. If you find that you’re not following an idea, you may need to go back to review something presented earlier in the book.

Each game and example in the book is on my website at www.aharris books.net/h5g.

To see examples from my other books, or to drop me a question, or just to see what I’ve been up to, you can also go to my main website at www.aharrisbooks.net.

How This Book Is Organized

I organized this book by renting time on a supercomputer and applying a multilinear Bayesian artificial intelligence algorithm. No, I didn’t. I don’t even know what that means. I really just sketched it out during a meeting when I was supposed to be paying attention. In any case, this book is organized around the main milestones you’ll need when becoming a game programmer.

Part I: Building the Foundation

HTML5 gaming lives on the web, so you need to know a little bit about how the web works. I show you the bare essentials of HTML and its companion language CSS. I also show you how JavaScript fits into the mix and introduce programming with JavaScript. Along the way, you find all the essential elements of computer programming, and you build several simple games.

Part II: Basic Game Development

In this part, I introduce the simpleGame engine, which was designed from the ground up to give you a fun and reasonably easy start into game programming. You find out how to incorporate the engine into your own projects, how to build your own sprite objects, and how to create your first arcade game from scratch.

Part III: Diving Deeper

After you understand the basics, you’ll no doubt be curious about the more advanced features. In this part of the book, you apply a basic physics model for more advanced motion. You build sprites that fall with gravity, skid around the screen, and orbit planets realistically. You discover how to make your games work on mobile devices like phones and tablets. You find out how build a virtual joystick interface and read the motion sensor built into many of these devices. Finally, you look over the formal documentation of the simpleGame library to understand more about how this library works and what it offers.

Part IV: The Part of Tens

The For Dummies series is famous for its “Part of Tens.” Some of the best material in the entire book is here. When you’re ready to understand how the simpleGame library does all the magic, you can look into ten key ideas behind the engine. You see some of the math and programming concepts used to build the engine. I also have a list of ten (or maybe more) resources for game developers. Check here for great tools, graphics libraries, sound resources, and more.

We Even Use the Internet Thingy!

Because this book is about developing games for the web, you won’t be surprised that it has a web page. These are games, and you really shouldn’t just look at them in a book. You really need to experience all these examples in a web browser. You can find every example in the book on my website at www.aharrisbooks.net/h5g. You can run all the programs in the book, and you can also view the code I used to make them (Ctrl+U on most browsers). This site is also helpful as you’re collecting your tools. I added a link to every tool or library I recommend throughout the book.

Of course, there are other things on the site, too, like links to my other books, a forum for questions, and a place you can send me an e-mail if you run into any problems.

I’m looking forward to seeing you on my main website at www.aharris books.net.

Icons Used in This Book

Every once in a while, a concept is important enough to warrant special attention. This book uses a few margin icons to point out certain special information.

These are tidbits of additional information you ought to think about or at least keep in mind.

Occasionally, I feel the need to indulge my “self-important computer science instructor” nature, and I give some technical background on things. These ideas are interesting but not critical, so you can skip them if you want. However, you might want to memorize a couple of them before you go to your next computer science cocktail party. You’ll be the hit of the party.

Tips are suggestions for making things easier.

Be sure to read anything marked with this icon. Failure to do so might result in a plague of frogs, puffs of black smoke, or your program not working like you expect.

Where to Go from Here

Thank you for buying this book. I truly hope you find it fun and useful. I had a great time writing it, and I think you’ll enjoy using it. I’m looking forward to hearing from you and seeing what you can do with the skills you pick up here. Drop me a line at [email protected] and let me know how it’s going!

Also, be sure to visit the companion website for this book at www.dummies.com/go/html5gamedevfd, where you’ll find files and images used throughout the book. For updates to this edition, check out www.dummies.com/go/html5gamedevfdupdates. For helpful tables and other information, check out the book’s Cheat Sheet at www.dummies.com/cheatsheet/html5 gamedevelopment.