Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 422 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
422
Dung lượng
6,9 MB
Nội dung
Cross-platform game programming emphasizing mobile platforms and touch-based interfaces Building JavaScript Games for Phones, Tablets, and Desktop Arjan Egges For your convenience Apress has placed some of the front matter material after the index Please use the Bookmarks and Contents at a Glance links to access them Contents at a Glance About the Author��������������������������������������������������������������������������������������������������������������� xix About the Technical Reviewer������������������������������������������������������������������������������������������� xxi Acknowledgments����������������������������������������������������������������������������������������������������������� xxiii Foreword�������������������������������������������������������������������������������������������������������������������������� xxv Introduction�������������������������������������������������������������������������������������������������������������������� xxvii ■■Part I: Getting Started����������������������������������������������������������������������������������� ■■Chapter 1: Programming���������������������������������������������������������������������������������������������������3 ■■Chapter 2: Game Programming Basics����������������������������������������������������������������������������19 ■■Chapter 3: Creating a Game World����������������������������������������������������������������������������������29 ■■Chapter 4: Game Assets��������������������������������������������������������������������������������������������������45 ■■Part II: Creating Colorful Games����������������������������������������������������������������� 55 ■■Chapter 5: Knowing What the Player Is Doing�����������������������������������������������������������������57 ■■Chapter 6: Reacting to Player Input��������������������������������������������������������������������������������67 ■■Chapter 7: Basic Game Objects���������������������������������������������������������������������������������������83 ■■Chapter 8: Game Object Types���������������������������������������������������������������������������������������103 ■■Chapter 9: Colors and Collisions�����������������������������������������������������������������������������������121 ■■Chapter 10: Limited Lives����������������������������������������������������������������������������������������������131 v vi Contents at a Glance ■■Chapter 11: Organizing Game Objects���������������������������������������������������������������������������143 ■■Chapter 12: Finishing the Painter Game������������������������������������������������������������������������159 ■■Part III: Jewel Jam����������������������������������������������������������������������������������� 169 ■■Chapter 13: Adapting to Different Devices��������������������������������������������������������������������171 ■■Chapter 14: Game Objects in a Structure����������������������������������������������������������������������187 ■■Chapter 15: Gameplay Programming����������������������������������������������������������������������������209 ■■Chapter 16: Game States�����������������������������������������������������������������������������������������������225 ■■Chapter 17: Finishing the Jewel Jam Game������������������������������������������������������������������235 ■■Part IV: Penguin Pairs������������������������������������������������������������������������������� 247 ■■Chapter 18: Sprite Sheets����������������������������������������������������������������������������������������������249 ■■Chapter 19: Menus and Settings�����������������������������������������������������������������������������������257 ■■Chapter 20: Game State Management���������������������������������������������������������������������������265 ■■Chapter 21: Storing and Recalling Game Data��������������������������������������������������������������277 ■■Chapter 22: Pairing the Penguins����������������������������������������������������������������������������������293 ■■Chapter 23: Finishing the Penguin Pairs Game�������������������������������������������������������������307 ■■Part V: Tick Tick���������������������������������������������������������������������������������������� 319 ■■Chapter 24: The Main Game Structure��������������������������������������������������������������������������321 ■■Chapter 25: Animation���������������������������������������������������������������������������������������������������329 ■■Chapter 26: Game Physics���������������������������������������������������������������������������������������������337 ■■Chapter 27: Intelligent Enemies������������������������������������������������������������������������������������355 ■■Chapter 28: Adding Player Interaction��������������������������������������������������������������������������365 ■■Chapter 29: Finishing the Tick Tick Game���������������������������������������������������������������������371 ■■Part VI: Into the Great Wide Open������������������������������������������������������������� 381 ■■Chapter 30: Producing Games���������������������������������������������������������������������������������������383 ■■Chapter 31: Publishing Games��������������������������������������������������������������������������������������395 Index���������������������������������������������������������������������������������������������������������������������������������403 Introduction With the emergence of the HTML5 standard, web-based application development is becoming very popular More and more game companies are switching to developing games in JavaScript, because currently it’s the only truly platform-independent approach that works on the variety of devices we have nowadays, ranging from desktop computers to smartphones and tablets In this book, you learn how to make your own games At the same time, you learn in depth one of the most popular programming languages of the last decade: JavaScript After you’ve finished reading this book, you’ll be able to make games that are ready to be exploited commercially and that run on PCs or Macs in any browser, as well as on tablets or smartphones The skills you acquire will help you create professional-looking games and also help you build other kinds of web-based applications As you’ll see, building games can be as much fun as playing them (or even more!) Who This Book Is For This book is for anyone who has an interest in learning how to create your own games If you have no prior (JavaScript) programming experience, don’t worry This book teaches you all you need to know If you already know how to program, then this book will still be interesting for you I show you how to design a complete software architecture for game development that caters to all the needs of a 2D game programmer The book illustrates the usage of this software architecture in four different games The code for these games is carefully developed, taking into account the proper way of organizing code and making it clean, robust, and easily extensible Structure of This Book Each chapter in this book has its own collection of example programs You can find all the examples on the web site belonging to this book I explain all the programming concepts based on these examples The book is globally divided into six parts Following is an overview of what each part is about xxvii xxviii Introduction Part I This part provides an overview of the JavaScript programming language, along with an introduction to its main features I introduce the most important game programming structure—the game loop—and I show you how to implement it in JavaScript I illustrate the game loop with a very simple JavaScript application using an HTML5 canvas object You learn about variables and data structures that are useful for representing a game world, and you see how to include game assets such as sprites and sounds in your programs Part II This part focuses on the first game you create: the Painter game The goal of the game is to collect paint of three different colors: red, green, and blue The paint is falling from the sky in cans that are kept floating by balloons, and you must make sure each can has the right color before it falls through the bottom of the screen I show you how to react to what the player is doing by reading mouse, keyboard, or touch input I introduce the class as a blueprint for an object (also called an instance of that class) You learn about constructor methods as the methods responsible for creating an instance of the class they belong to You learn how to write your own methods, properties, and classes, and how you can use these programming concepts to design different game-object classes You see how game objects should interact with each other As an example of this interaction, you see how to handle basic collisions between game objects You learn how inheritance is implemented in JavaScript so that game-object classes can be hierarchically built up You’re introduced to the concept of polymorphism, which lets you call the right version of a method automatically You finish the Painter game by adding a few extra features, such as motion effects, sounds, music, and maintaining and displaying a score Part III The second game you develop in this book is Jewel Jam: a puzzle game in which the player needs to find combinations of jewels Every time the player makes a valid combination of jewels, they gain points You start by dealing with viewing games on different mobile devices You see how to automatically adjust the canvas size to different screen sizes or because the player rotates the phone or tablet screen A method is introduced to automatically scale sprites and scale the mouse and touch positions to compensate for this so that switching between different canvas sizes is seamless You learn about creating structures of game objects The scene graph is introduced as a representation of this structure You’re also introduced to local and global (world) positions of game objects Interaction between game objects is achieved by adding identifiers to game objects so you can search for them in a list or hierarchy To finish the game, you add nice visual effects such as glitters Part IV This part introduces the game Penguin Pairs, a puzzle game in which the goal is to make pairs of penguins of the same color The player can move a penguin by clicking it and selecting the direction in which the penguin should move A penguin moves until it’s stopped by another character in the Introduction xxix game (a penguin, a seal, a shark, or an iceberg) or drops from the playing field, in which case the penguin falls into the water and is eaten by hungry sharks Throughout the different levels of the game, you introduce new gameplay elements to keep the game exciting For example, there is a special penguin that can match any other penguin, penguins can get stuck in a hole (meaning they can’t move anymore), and you can place penguin-eating sharks on the board I introduce the concepts of sprite strips and sprite sheets, allowing you to store several sprites in the same image You create a variety of useful GUI elements for menus, such as an on/off button and a slider button You learn about a class design for dealing with different game states such as menus, a title screen, and so on And you see how different states can be part of the game loop and how you can switch between them Many games consist of different levels Especially in casual games such as puzzles and maze games, the game may have several hundreds of levels You see how to use the power of object literals to represent the game world based on tiles You also see how to use the HTML5 local storage to store the player’s progress through the game and recall that information when the game is started again You learn about JSON as a useful tool for serializing object literals Part V The final game you develop in this book is a platform game called Tick Tick You first lay out the framework that is used for the game, which is largely based on code that was written for the previous games You see how to add animations: in the games you developed up to this point, game objects could move around on the screen, but adding something like a running character to your game is slightly more challenging In the Tick Tick game, characters need to interact with the game world, which requires a basic physics system There are two aspects of physics: giving characters the ability to jump or fall, and handling and responding to collisions between characters and other game objects You also add some basic intelligence to enemies in the game As a result, the player has different gameplay options and must develop different strategies to complete each level You use inheritance to create variety in the behavior of enemies To finish the game, you add mountains and clouds to the background to make the game visually more appealing Part VI The final part of the book discusses game production and publication The contents of this part are largely based on interviews with two people from the game industry The first is Mark Overmars, creator of the Gamemaker tool and currently CTO of Tingly Games The second is Peter Vesterbacka, the Mighty Eagle of Rovio Entertainment, the creators of the Angry Birds game This part contains many thoughts and tips from Peter and Mark about game production and game publication A variety of topics are covered, including writing coherent JavaScript code, using third-party libraries, creating/buying game assets such as sprites and sounds for your game, working on a game production team, the various testing phases of a game, dealing with localization, and strategies for selling and marketing games xxx Introduction Note This book has an accompanying web site where you can download all the example programs, the accompanying game assets (sprites and sounds), as well as other extras The URL is www.apress.com/9781430265382 Go there and follow the instructions to get the extra materials Getting and Installing the Tools In order to develop computer games in HTML5 and JavaScript, a few tools can be useful to install on your computer Obviously, you need some kind of browser so that you can run and test the games you’re developing You may even want to install several different browsers on your machine, to make sure your game runs on all major browsers When JavaScript was just invented, a lot of differences existed between how browsers dealt with JavaScript code Some scripts worked fine on one browser but gave errors on others Fortunately, this is much less of a problem today Almost all the code provided with this book will run fine on any browser But in some cases, you have to deal with browser differences So, I suggest that you install at least two browsers for testing your games On a Windows machine, you already have Internet Explorer, and on a Mac you already have Safari For testing games, I find that the Firefox browser (www.mozilla.org/en-US/firefox/new) and the Chrome browser (https://www.google.com/chrome) work quite well Chrome has something called Developer Tools, which can be accessed in the menu by going to Tools ➤ Developer tools There you can see a console (useful for debugging), set breakpoints in scripts, and more When you want to test your games with Firefox, you have to install a plug-in called Firebug (http://getfirebug.com/), which has a feature set similar to Chrome’s Developer Tools In addition to a browser that allows you to test your game, it’s useful to install an editor for editing JavaScript and HTML files Obviously, you could this with any text editor However, there are several editors available that are focused on web development This means they provide features such as code completion, syntax highlighting, code refactoring, and more These are very useful things to have as a part of your editing environment There are paid and free editors A good paid editor is WebStorm (www.jetbrains.com/webstorm) An example of a good free editor is Komodo Edit (www.activestate.com/komodo-edit) Another excellent free editor is Notepad++ (http://notepad-plus-plus.org) Although Notepad++ isn’t specifically targeted toward JavaScript development, it has many useful features for editing HTML and JavaScript files, including syntax highlighting The Example Programs Together with this book, I supply a large number of example programs that show the various aspects of programming HTML5 games You can find a link to the source code on the book’s information page, under the Source Code/Downloads tab This tab is located beneath the Related Titles section of the page The collection of examples is contained in a single zip file After you’ve downloaded this file, unpack it somewhere When you look in the folder where you’ve unpacked the file, you’ll see a number of different folders Each chapter in the book has its own folder For example, if you want to run the final version of the Penguin Pairs game, go to the folder belonging to Chapter 23 and double-click the file PenguinPairs.html which is located in the subfolder PenguinPairsFinal Your browser will open and run the example game Penguin Pairs Introduction xxxi As you can see, there are quite a few different files pertaining to this particular example A simpler example can be seen if you go the folder belonging to the Chapter 1, where you find a few very basic examples of HTML5 applications with JavaScript You can run each of the examples by double-clicking its HTML file Contacting the Author If you have any questions regarding the book, please feel free to contact me directly at the following e-mail address: j.egges@uu.nl Part I Getting Started The first part of this book covers the basics of developing game applications in JavaScript You see a number of simple examples that combine HTML with JavaScript I give you an introduction to the HTML5 standard and the new HTML elements that come with it, notably the canvas This part covers core JavaScript programming constructs such as instructions, expressions, objects, and functions In addition, I introduce the game loop and how to load and draw sprites (images) ... discuss HTML and JavaScript in detail in this chapter, and you see how to create a simple web application that uses the HTML5 canvas in combination with JavaScript Computers and Programs Before you... completely rewritten for that processor Therefore, a need arose for processor-independent programming languages This resulted in languages such as Fortran (FORmula TRANslator) and BASIC (Beginners’... models and animations in the right format, prototyping tools, and so on For JavaScript, there isn’t yet an engine that everyone is using Most people program relatively simple games in JavaScript