Đang tải... (xem toàn văn)
Tài liệu về học lập trình web cho tất cả mọi người.
In this book, you’ll learn how to: Implement strategies for making games fun to play and easy to build Create logic, adventure, and 2D action games in a wide range of genres Design a character and control it with a keyboard, mouse, or touch interface Use collision detection to build an interactive game world Develop intelligent enemies, sound effects, and music Build robust games with modern JavaScript programming techniques that are easy to maintain and simple to extend Foundation Game Design with HTML5 & JavaScript If you’re looking to turn a good game idea into reality but don’t have extensive program- ming experience, Foundation Game Design with HTML5 and JavaScript is your ideal first step. Expert video-game designer Rex van der Spuy teaches you all the technical and cre- ative issues involved in game design, including how to use HTML5, CSS, and JavaScript, the latest programming languages, with confidence. Best of all, detailed case studies demonstrate all techniques, and open-ended projects encourage you to build your own original games. Turn to Foundation Game Design with HTML5 and JavaScript and find the knowledge and skills you need to get started on a career as a game designer. SHELVING CATEGORY 1. WEB DEVELOPMENT / GENERAL GAME DESIGN WITH HTML5 & JAVASCRIPT van der Spuy FOUNDATION Available from Apress Also Available SOURCE CODE ONLINE US $44.99 Mac/PC compatible www.apress.com 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. v Contents at a Glance About the Author xvii About the Technical Reviewer xix About the Cover Image Artist xxi Acknowledgments xxiii Introduction xxv Chapter 1: Learning HTML and CSS 1 Chapter 2: Learning JavaScript 59 Chapter 3: Your First Games 111 Chapter 4: Creating a Game World 179 Chapter 5: Making Maps 243 Chapter 6: Game Objects and Animation 297 Chapter 7: Game Sprites 373 Chapter 8: Bumping into Things 443 Chapter 9: Making Video Games 487 Chapter 10: Maze Games 533 Chapter 11: Platform Games and Physics 601 Chapter 12: Touch and the Mouse 671 Index 721 xxv Introduction In 1980, when I was 10 years old, my parents sat me down and formally announced that they were going to buy me a computer for Christmas. Somewhere, somehow, they had heard that a computer could, they told me, “help you with your homework.” I was astonished. “Of course it will help me with my homework. Computers are really good for math!” I exclaimed. “And science too!” I was going to let them believe whatever they wanted to believe. As long as they got me that computer, fast, before whatever spell they were under wore off. Because the only thing I wanted a computer for was to play video games, but no way was I going to let that out of the bag. All I lived for was video games. My friends and I had spent that whole summer biking around town, looking for lost change on the sidewalk that we could use to play arcade games with. The closest arcade machine that didn’t have “bad kids” hanging around it was Ms. Pac Man, which was a 20-minute bike ride away in the corner of a dingy old diner. But it was worth it, because we had memorized the solutions to all the level maps in our Ms. Pac Man strategy book and could play for an amazingly long time, to the wonder of the littler kids who gathered around to watch. When we couldn’t fi nd any quarters we made our own arcade games out of boxes, crayons, thumbtacks, and plastic coat buttons. And at the end of that summer, we made the most blissful discovery: a malfunctioning Space Invaders machine that could be played using pennies if you fl icked them in at just the right angle. I came back from the bank with a roll of 100 pennies, and I spent the last 2 weeks of that August in an ecstatic, bleary-eyed, space-invading dreamworld. So that Christmas morning, in a giddy fever, I ripped open the red-and-white candy-cane wrapping paper. It was everything I had hoped for: a state-of-the-art Commodore Vic-20. It had a whopping 5K of memory, the latest cassette-tape storage drive, and a display of 16 colors. The computer at school could just display two colors: green and black. I was in heaven! I fumbled with the instructions and, with trembling hands, carefully plugged my gleaming new Vic-20 into the family TV set and switched it on. Nothing happened. The TV was completely blank, except for a small, calmly blinking blue square at the top left corner of the screen. “Where are the games?” I thought, “Where’s Ms. Pac Man? Where are the aliens?” I jiggled the power cable and fi ddled with the wires at the back of the TV. But, no, there was just that steady blue, blinking square, silently mocking me. This blue square, I discovered, was called the “cursor.” I hated it and felt sick. The games, it turned out, came on audio cassettes that you could load into the computer by hooking up the cassette player and pressing the play button. But you had to buy them. They cost $20 each. The nearest shop that sold them was a 45-minute drive, in a car, over a mountain. It was impossible—there was just no way. And, anyway, I was supposed to be using this thing to “do my homework.” But in the computer’s box I found a book about BASIC programming. I had no idea what that meant and couldn’t understand anything in that book at all. It was full of all kinds of bits of scrambled English words and numbers written in big capital letters that were supposed to make the computer do things. “Programming code,” xxvi Introduction it was called. Maybe this was just stuff for grown-ups? “No,” I thought, “computers are for children, and grown- ups are scared of them.” And so I persisted. At the very back of the book, I found a section called “Programs to try.” My eye fell across the words “Killer Comet.” It was a video game! Beneath it was a long list of inscrutable codes. But I fi nally fi gured out that if I could type these codes into my Vic-20, I could play a game. That was it! If “programming” means “you can play video games for free,” I was going to fi gure out programming. I spent the next two days in a frenzy, reading through the book and typing in all those codes, trying to get Killer Comet to work. I had barely any idea what I was doing and my computer kept displaying “Syntax Error! Syntax Error! Syntax Error!” over and over again whenever I tried to run the program. I was pulling my hair out and wanted to scream! But then, late on the second day, something miraculous happened—it worked: A small white square moved from the top of the screen to the bottom of the screen. If you pressed the right number of keys in the right way, the square disappeared. That was all. It was the most beautiful thing I’d ever seen in my life. And that’s when I discovered that making video games is way, way, way more fun than playing them. And so, here, Dear Reader, you have that book that I truly believe should come in the box with every new computer. Hope you have as much fun reading it as I did writing it! 1 Chapter 1 Learning HTML and CSS What’s more fun than playing video games? Making them! And this book will show you how. You don’t need to know anything about programming or any other complicated technical computer-y things. You don’t even need to know much math. This book will show you everything you need to make great games that you can play on the Web, on desktop computers, or as apps on mobile phones and tablets. There are lots and lots of ways to make video games. But you don’t need to know all of them—you only need to know the best way. By “best,” I mean the easiest and most fun way, and that’s the way that you’re going to learn from this book. It’s also the way that will give your games the widest audience, give you the most solid set of game-design skills, and give you the best chance of making a bit of money from it too. To make games, you have to learn a computer-programming language , which you can use to communicate with the computer to tell it what to do. A computer-programming language can look a lot like English, and such languages are easy to learn. People might argue with you that technically HTML and CSS are markup languages, not programming languages, but I’m going to call them all programming languages here and be done with it. This book is about making games using a technology suite called HTML5. HTML5 is based on three separate computer-programming languages that work together: ■ HTML (HyperText Markup Language): A programming language that describes how games and appli- cations are structured. Games and most websites are built using HTML. ■ CSS (Cascading Style Sheets): A programming language that describes how HTML code should be visually presented. ■ JavaScript : A programming language that lets you control how your games behave. Chapter 1 2 You’re going to learn all three languages in this book. In this chapter you’ll learn about HTML and CSS. They’re extremely easy to use, and what we cover in this chapter will be enough to get you started making games. You can also use the skills you learn in this chapter to use HTML and CSS to start building websites if that is something you’d like to do. To make games, you’ll need to learn JavaScript, and that’s what much of the rest of the book is all about. These programming languages let you access and control many specialized technologies that are all part of the HTML5 standard. The most important of these for games is canvas . Canvas is a display technology that’s great for animation and action games. You’ll learn all about how to use canvas to make games starting with Chapster 6. Note: If you already know HTML and CSS, you can jump ahead to Chapter 2 to learn JavaScript. If you already know JavaScript and just want to start making games, jump ahead to Chapter 3 . If you already know JavaScript and how to program in general, but you just want to start making games with canvas, Chapters 6 , 7, and 8 are all yours! What you need Surprisingly, video-game design can be a relatively low-tech affair. Here’s the basic equipment you’ll need to make use of this book. A computer You need a reasonably up-to-date computer, either running Windows or the latest version of Mac OS X, or even Linux. You should have basic computer literacy skills, which includes understanding how to make new files and how to organize them in folders. Programming software Luckily, this costs nothing and you probably already have all the programming software you need already installed on your computer. Here’s what you’ll need: ■ A text editor : If you’re using Windows, Notepad works well. If you’re using Mac OS X, you may use TextEdit. ■ Safari, Chrome, Firefox, or Opera : These web browsers include some great features for building and testing HTML5 games. This book will explain how to use them to help you make games. Safari, Chrome, Firefox, and Opera are available for Windows and Mac. Chrome is available for Linux. If you’re using a Mac, Safari is already installed on your computer. If you’re using Windows, you can download Chrome or Safari here: www.google.com/chrome , and www.apple.com/safari/download This book describes how to use these software programs and tools to program games—you won’t need anything else. However, there is some more specialized, but optional, software that you might want to try if you’re doing a lot of programming and want to make things a little easier for yourself. Learning HTML and CSS 3 ■ Komodo Edit or jEdit : These are free text editors for Windows, Mac OS X, and Linux. They’re spe- cialized for writing programming code. They number each line of code and highlight important pro- gramming words in different colors ( syntax highlighting ). Both these features make writing code easier because you can find and change sections of your code more easily. Once you start to get the hang of programming, and you want to try a slightly more sophisticated text editor than Notepad or TextEdit, Komodo Edit or jEdit is a good next step. ■ Aptana Studio : This is a free IDE (integrated development environment) based on Eclipse, for Windows and Mac OS X. It includes syntax highlighting and numbered lines of code, and you can install a plug-in that helps you debug JavaScript. ■ Dreamweaver : This was, for a long time, the most widely used software for building web pages. It’s not free and is perhaps overly complex for the simpler needs of a game designer, but it’s specialized for writing HTML, CSS, and JavaScript code. Dreamweaver is available for Windows and Mac from Adobe: www.adobe.com . If you’re using Mac OS X, you have two further options. ■ Coda is an efficient code editor with a built-in JavaScript debugger and a live preview window of what your game looks like as you’re programming it. Textmate is another excellent OS X-only code editor that also provides a live preview window of your game, as well as integrated JavaScript debugging. Neither Coda nor Textmate is free, but if you do a lot of programming they’re probably worth the cost for the time they’ll save you. Both Coda and Textmate are available through the Mac OS X app store. HTML5 is a very new and quickly changing technology, and it’s likely that by the time you are reading this there will be many more, and possibly better, tools for creating HTML5 games than those I’ve listed above. Keep a lookout for new software, and try everything! If you already have some experience programming, you probably enjoy just using one of these editors. But if you’re just starting, they’ll only confuse you. Remember, all you’ll ever really need is a simple text editor and a good web browser. Keep it simple and you can’t go wrong. Note: If you decide to use TextEdit with the latest version of Mac OS X, you’ll need to set it up so that it lets you write in plain text , which is important for programming. Here’s how: Select Preferences from TextEdit’s main menu. Select Plain Text in the Format section. In the Open and Save section, uncheck “add ‘txt’ extension to plain text files”. Select "ignore rich text commands in HTML files." Graphic design software (optional) This book is just about programming games. I won’t show you how to make graphics or illustrations for your games, so if this is something you’re interested in, you’ll need to learn how. In fact, if you don’t have any experi- ence creating computer graphics, you might want to learn a little bit about it before starting with this book. Chapter 1 4 The two most widely used applications for making game graphics are Photoshop and Illustrator (both available from Adobe). Other options are GIMP and Inkscape, both of which are free. Here’s what you should learn about computer graphic design to make the best use of this book: Making PNG images with alpha transparency ■ Changing the sizes of images and knowing how to crop them ■ Mastering basic illustration skills, such as how to draw characters and game objects ■ You’ll find many online tutorials and books about how to do these tasks using any of the software already mentioned. What kinds of games can I make? This book is mostly about how to make two-dimensional action, adventure, and arcade games ; it also touches on puzzle, logic, and strategy games. HTML5 is a fantastic medium for creating these types of games. Each chapter guides you through every step of the design process, but the projects are very open-ended. I encour- age you to come up with your own original ways of using the techniques in your own games. This book starts with all the basics of computer programming, and we will gradually build on those techniques until you’re mak- ing very sophisticated games from scratch. You’re going to learn the simplest possible way of making games so that you can easily understand how they work and can then develop them into more complex games on your own. The games you’ll make you’ll be able to upload for anyone to play on the Web. Or you can package them for mobile phones and tablet computers, and then sell them through app stores. Everything you’ll need to know to get started on a professional career as a game designer, from start to finish, is right here in this book. How hard is it? It’s about as easy to learn to make games as it is to learn basic conversation in a foreign language or to under- stand how to read and write music. So if you’ve done one of those tasks before, you’ll know that it’s not hard at all. You just have to take things slowly, step by step and methodically. Practice the skills you learn as much as you can, and don’t move on to a new topic until you thoroughly understand the current one. You won’t get any benefit if you rush through this book. You might spend a few days, a few weeks, or even a few months on any chapter. Take as much time as you need, because this book isn’t going anywhere! But if you make the effort, you’ll be a great game designer when you’re finished. Learning HTML There are three related programming languages you need to know to make games: HTML, CSS, and JavaScript. We’ll start with the easiest: HTML. HTML is a kind of computer-programming language known as a markup language . Markup languages can describe information. This is different from JavaScript, which is a logical programming language. Logical pro- gramming languages are used to analyze and make decisions about information. HTML is used for making websites, and it is the foundation for making games. It’s currently in version number 5, which is why it’s known as HTML5. Learning HTML and CSS 5 Tags HTML is used to describe information. It uses tags to tell computers the kind of information a document con- tains. A tag is just a word surrounded by left- and right-pointing arrow characters (sometimes called carets). Here’s an example of a tag: <thisIsATag> Here’s a tag that identifies the heading of a web page. <h1>The main heading</h1> <h1> means “Heading 1.” Tags usually come in pairs of an opening tag and a closing tag. The opening tag looks like this: <h1> The closing tag adds a forward slash, / , to show that the tag is now finished describing the information: </h1> In this example anything that’s between the opening and closing tags will be identified as a heading, like this: <h1>Anything between the opening and closing tags is part of the heading</h1> It’s a really simple system, and you can use it to identify any kind of information in any way you like. Note: HTML also lets you use stand-alone tags that don’t need to be closed, like this: <br> This tag stands for “break,” and it creates a line space in the text. It isn’t used to describe any containing information. If you’ve used earlier versions of HTML, you were probably required to write stand-alone tags with a forward slash at the end of the tag name, to indicate that the tag is self-closing, like this: <br /> You don’t have to do this in HTML5. Tags and the information they contain are called elements . Remember this! When I mention HTML elements in this book, I’m talking about the tag and whatever is inside it. [...]... Structuring HTML documents To make a game or website with HTML tags, you have to structure the tags as a document HTML5 is extremely flexible and lenient about how to structure HTML documents However, most games, applications, and websites that are made with HTML follow some standard conventions about how documents are structured and how to use the tags they’re built with The reason for this is so that... tag stands for paragraph You use it to display sentences or paragraphs 6 V413HAV Learning HTML and CSS At the very top of the document is a special stand-alone tag that looks like this: This needs to be the first tag in an HTML5 document It just means, “Hey, computer, this is an HTML5 document!” That’s all Building an HTML5 game or website generally means adding tags and information... sans-serif, and monospace Serif fonts use letters with decorative details on their edges Times New Roman, Georgia, and Baskerville are common serif fonts You often find serif fonts used in books and newspapers Sans-serif fonts don’t use any details on the edges of letters Common sans-serif fonts are Arial, Helvetica, and Futura They’re the kinds of fonts you’ll tend to see on highway signs, in airports, and. .. spacing between letters and are designed to be extremely easy to read Common monospace fonts are Courier, Lucida Console, and Monaco They’re used on old-school computer console displays and typewriters Programmers like them because indentations and spaces line up nicely, which makes them very easy to read on a computer screen Here’s how you can assign a monospace font family with CSS: font-family: "Lucida... automatically to maintain the image’s proportion The image is surrounded with a two-pixel-wide, navy border with a dashed line style It also adds 10 pixels of padding between the image and the border Figure 1-6 illustrates the effect of this code on the image Figure 1-6 Change the size and add a border to the image 28 Learning HTML and CSS The width and height properties determine how big in pixels the image should... pixels, the right and left padding is 30 pixels, and the bottom padding is 50pixels padding: 20px 50px; The top and bottom padding is 20 pixels, and the right and left padding is 50 pixels You can also assign padding individually for each side, like this: padding-top: 10px; padding-bottom: 20px; padding-right: 30px; padding-left: 5px; Note: The padding value is added to the element’s height and width That... stands for “break” and will cause whatever text that follows it to appear on a new line Italic and bold text If you want to emphasize any text, surround it with or tags Web browsers usually interpret the tag as italic text This text will be italicized The tag is usually interpreted as bold text This text will be bold You usually use the and. .. break from this book for an hour or so, and try making your own HTML web page Add a title, some headings, some paragraph text, a list or two, a few links, and try to add some images To start, follow these steps: 1 Open your text editor, which should be either Notepad (Windows) or TextEdit (Mac OS X) 2 Select File ➤ New and start creating your page with HTML tags and text When you’re finished, save your... the element is 250 pixels wide, and you add 10 pixels of padding on its right and left sides, the element’s actual width will become 270 pixels This is very important to remember if you’re doing complex layouts: padding values add to width and height values The border properties determine the border’s style, width, and color 29 Chapter 1 You can change the border style with the border-style property:... element Using elements In the previous examples we used some standard HTML tags to display page elements, like , , , , and Sometimes, however, you’ll want to add something to a page that doesn’t fit into any of the neat categories defined by the standard tags This is especially true if you use HTML to create games and applications, which use elements that are very different from