Advanced Game Design with HTML5 and JavaScript

所需积分/C币:15 2015-10-21 14:31:26 10.71MB PDF
收藏 收藏

Advanced Game Design with HTML5 and JavaScript
Contents at a glance About the author About the technical reviewers ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ XVII Acknowledgments ■■■■■■■■ XIX Introduction xxI Chapter 1: Level Up! ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■ Chapter 2: The Canvas Drawing APl a59 Chapter 3: Working with Game Assets ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■ 93 Chapter 4: Making Sprites and a Scene Graphmmmmmm 111 Chapter 5: Making things Move ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 165 Chapter 6: Interactivity. ua189 Chapter 7: collision Detection ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 239 Chapter8: Juice It Up… ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 287 Chapter 9: Sound with the Web Audio APl 331 Chapter10: Tweening,,,,,,,,,,,,,,,,,,,369 Chapter 11: Make Your Own Game Engine HB aROniN 407 Appendix A: Vectors for Movement and collision Detection a 449 Index umm 519 Introduction How do you make a video game? This book will show you everything you need to know. You'll learn how to make all kinds of 2d action games by building your own development tools, from scratch, using low-level open-source technologies. All you need is this book, a text editor, a web browser and any old computer. No libraries, no frameworks, no game engines, no black-box mystery code, and no expensive proprietary software or licenses And you'll be able to publish your games cross-platform to the desktop, mobile devices, and the Web. As you'll soon see, by writing just few hundred lines of code, you'll be well on your way to developing any 2D video game you can imagine. Sound like fun? It's the best fun there is Here's what youll learn New JavaScript tips and tricks, including some that arrived with ES6( Chapter 1) How to draw graphics on the screen and use those graphics to create reusable game ( Chapters 2 and 4) How to create a scene graph (a parent-child hierarchy for game objects ) for maximum flexibility in creating game scenes( Chapter 4) How to efficiently load images, sounds, fonts, and other game assets(Chapter 3 )and build a loading progress bar ( Chapter 11) How to animate objects with physics( Chapter 5), and how to created detailed game characters using keyframe animation( Chapter 8) Everything you need to know about collision detection( Chapter 7), including the video game designer's"secret black art": vector math(appendix a) Saving and loading game data, running a game in full screen mode( Chapter 1), and scaling a game to any window size( Chapter 11.) What is the separating axis theorem(SAT)and why is it useful for games? Find out in Appendix a How to create buttons, add mouse, touch and keyboard interactivity to your games, and learn how to create a drag-and-drop system for game objects( Chapter 6) How to add special effects to your games: easy parallax scrolling, particle effects ( Chapter 8), and screen shaking( Chapter 11) How to play and control sound files and how to generate synthesized sound effects dynamically from pure code( Chapter 9) How to build a tweening system and make game objects follow fixed curved paths Chapter 10) XXI INTRODUCTION How to put all these pieces together to make your own game engine so that you can build games in the quickest, easiest, and most fun way( chapter 11) And you'll learn lots of the most modern coding and game development practices along the way. This book is a self-contained, classical education in making video games and a compendium of all the important techniques you'll need to know to flourish as a game designer. If you were alone on a desert island with only a solar-powered laptop, a pile of coconuts, and this book, youd have everything you need to recreate the entire history of 2D video games from Spacewar! to Flappy Bird Things You need to Know To make the best use of this book you need to have a moderate degree of programming literacy. You should be able to glance at a block of code in whatever programming language you re most familiar with and have a eneral idea of how it works. You dont need to think of yourself as a"programmer"or some kind of expert You just need to be able to fumble your way through programming problems with a reasonable degree of confidence. If you enjoy programming, you'll love this book The programming code in this book is written in JavaScript JavaScript belongs to the C family of languages(C, C++, Ct#, Objective-C, Java, and AS3.0 )so if you know any of those languages, you'll be able to use JavaScript with ease. And even if you' ve never used JavaScript before, Chapter l gives you a quick primer Have you never done any programming before Then start with this book s predecessor, foundation Game Design with HTML5 and JavaScript. It will teach you how to program, while you're learning how to make games, and cover everything you need to know to start using this book Have you read Foundation game design with html5 and javaScript? If so, you're well prepared If you think you might have forgotten a bit, or need a refresher before you start, relax! I've written this book in a very sneaky way. It covers all the basics, from scratch, and squeezes in all the advanced, interesting new stuff all along the way So, if you ve forgotten something, like how to make and render a sprite don 't worry it's all in here and packed with loads of clever new tricks. Where the Foundation book was all about learning how to program and how to do things in the most understandable way, this advanced book is all about doing things in the best and most exciting ways. I've written this to be a completely comprehensive book about making games that will reintroduce you to our beloved art form with enlightening and eye-opening new ways of doing things How to read this book This is a storybook. You can read it in bed, or on the beach. Just as you would with Jane Eyre or The Lord of the rings, start at Chapter 1 and work your way through to the end. Each chapter builds on the techniques and concepts of the previous chapter. But if there are specific techniques you want to know about right away, just jump in at any spot-you should be still be OK. The only part thats different is appendix A Vectors for Movement and Collision Detection,You can read it at any time. Appendix a is a deep exploration of vector math concepts which are generally relevant to all the other chapters in the book-but also optional. If you want to know all about vectors before you start Chapter 1, go ahead and read the Appendix first. But if you re not really that interested, or just want to keep it for future reference, you can skip it completely XXI INTRODUCTION The source code Most of the content in this book is actually not in this book. You'll find it in the source code files that accompany eachchapterYoucandownloadthesourcecodefromthisbooksproductpageatwww.apress.comoratthis books Github repository Yes, there's a lot of source code! In fact, there's so much that most of the printed examples in this book only highlight the most significant, vital parts. You're a good enough programmer to understand how those parts fit into the bigger picture. But if you have any doubts, open up the complete working source code and take a look All the code in this book is written in pure JavaScript and hTml. it doesn' t use any abstraction layers like CoffeeScript, TypeScript, or JQuery This book was written during a time when many of the best features of HTML5 for game developers were still experimental and required"vendor prefixes" to work properly on all platforms. I'll mention in the text if it's likely that you'll need to use them, but I'll try to keep them out of the printed code in this book. for maximum compatibility I've kept them in the source code, but usually tidied them away in a jS polyfill file Hopefully, you're reading this book in a happy, future time when these vestigial tails of HTML5's evolution have disappeared. But until then, here are the most common vendor prefixes in current use Vendor CSS Prefix Java Script prefix Microsoft Mozilla -moz moz Opera Chrome, Safari -webkit webkit Tip Writing cross-platform cSs can be particularly difficult, because there are often discrepancies between vendors about how css properties are defined. You can make css fun again by using a good preprocessor like Sass, and use its Compass extension to create all the vendor-specific code for you automatically Also, make sure that you run all the source code in a webserver. Many JavaScript and htML5 features that we'll be using in this book, like XHR, will only work inside a webserver. A nice cross-platform way to do this is to install Node, which is a marvelous pure Java Script server. Visit nodejs org and follow the instructions to install it on your platform. Then install a great little helper utility that runs on top of it, called http-server:('safastmini-webserverthatyoucanrunwithoneline of code. Use the command line to Cd to the root directory of your project and type http-server Then open any web browser to http://localhost:8080, INTRODUCTION If you have a file in your project directory called index. html, youll see it displayed automatically If not just add the name of any other hTml file in your project root If you're using a modern code editor like Brackets, Atom, Light Table, or Sublime Text, many of these will launch a webserver for you automatically when you preview an html file. Check the documentation of the editor you're using. If you' re using a text editor like Vim or Emacs with Unix, you could use watch or fswatch(for Mac osX) with make to run tasks when files have changed and then use browser extensions like tincr(Chrome)or Auto Reload (Firefox to refresh the browser automatically. There are countless configurations, so experiment a bit and find a workflow that you re comfortable with CHAPTER 1 Level u This first chapter of Advanced Game Design with html5 and JavaScript is a fast-paced jam-packed stuff-your-face buffet of cool, interesting, new, practical and sometimes delightfully mind-bending techniques that you can start using with your game projects right away. Everything you need to know to take your development skills to the next level is right here in this chapter Sparkling new JavaScript tricks, including everything you need to make games with ES6 Using configuration objects JavaScript's getters and setters Promises Using classes and composition to make new objects from old ones Organizing your projects with modules Reading and writing jSON files with XHR Displaying full-screen games Distributing games with iFrames and minified source code You can think of this chapter as the modern game developer's boot camp for all the essential skills you need to know to start making games with html5 and JavaScript. You'll be able to apply all of these techniques to your game projects immediately, and theyre the core skills that the rest of the chapters of this book are based on. If you ve read Foundation game design with html5 and JavaScript, this is a bit like the"secret last chapter" of that book but if you haven t read that book, and you like to learn things quickly by example, this chapter is a blitzkrieg-style introduction to JavaScript and HTML5, from the ground up This chapter is very different from the others in this book in that it 's a kind of quick-start start reference guide. Read as much or as little as you need to, in whatever order, and then just jump ahead to Chapter 2 whenever you feel ready Some New JavaScript Tricks This book is written using the latest version of JavaScript, known as ES6 (ECMAScript 6). If you're new to JavaScript, you'll find the language easy to learn because it follows the paradigms of most modern programming languages. If you already know Java Script, but you learned it before about 2015, then you're in for a surprise. ES6 is almost like a whole new language. But the good news is that it's a nicer, simpler, and friendlier version of Java Script than the one you know. And, best of all, it's easy to learn, so you'll be able to use it fluently by the time you're done reading this chapter CHAPTER1■ LEVEL UP! features of the previous version of JavaScript, ES5, that you might not have been aware ome helply ow In this first section of the chapter, I'm going to introduce all the important concepts you should about how the language works. Youll learn the most important new features of ES6, and se Note If you want to write your code in ES6, but still have it work on older platforms, you can use a transpiler like Babel or traceur, which converts as it compiles, in this case from ES6 down to ES5. I recommend you do this. The little extra work it takes to transpire your code is more than made up for by the mental overhead you save by using ES6 Variables: let, const, and var Use the keyword let to create a variable let anyvalue The let keyword gives the variable block scope. That means the variable cant be seen outside the pair of curly braces that it's defined in Here' s an example let say ="hello let outer ="an outer variable if (say ==="hello")i let say oodbye g console. log(say) //Displays: goodbye console. log(outer); //Displays: An outer variable let inner =An inner variable console.og(inner)j //Displays: An inner variable console. log(say) //Displays: hello console.log(inner); //Displays: ReferenceError: inner is not defined A variable defined outside the if statement can be seen inside the if statement but any variables defined inside the if statement can't be seen outside it. That's what block scope is. The if statement's curly braces define the block in which the variable is visible In this example you can see that there are two variables called say. Because they were defined in different blocks, they're different variables. Changing the one inside the if statement doesn't change the one outside the if statement CHAPTER1■ LEVEL UP! You can also create variables using var and const var: This gives the variable function scope. That means the variable will be visible anywhere inside a function, even outside the block in which it was created const: This creates a variable that can 't change its value If you try to change its value, you'll get an error. This is helpful if your code depends on a value not being changed by accident. const variables also have block scope mi In almost every case, however, you should just use let It protects you against making all sorts of little stakes in your code that can sometimes result in nail-biting debugging sessions Variables are your most important Java Script building block, and you use them with functions to d uild programs Functions Use functions to run and define blocks of code, to perform calculations, and to return values. JavaScript has two types of functions: function declarations and function expressions In Java Script you define a function declaration this way function say Something(value)i console. log(value) Function declarations are loaded at compile time That means your program knows about them before any other code in your program is run. Even if you define a function right at the end of your program,a function declaration will be loaded in advance before the code at the beginning of your program runs. That lets you call the function before you define it, as in this example: saySomething("Hello from a function statement " ) //Displays: Hello from a function statement function saySomething(value)i console.log(value); JavaScript also has function expressions You create them using a fat arrow, like this: let saySomething =(value)=>t console. log(value) The =>symbol represents an arrow pointing to the right, like this: It's visually saying"use the value in the parenthesis to do some work in the next block of code that I'm pointing to You define function expressions in the same way you define a variable, by using let (or var). Each one also needs a semicolon after its closing brace. Unlike a function declaration, a function expression must be defined before you use it, like this let saySomething =(value)=>t console. log(value saySomething("Hello from a function statement )

试读 127P Advanced Game Design with HTML5 and JavaScript
限时抽奖 低至0.43元/次
身份认证后 购VIP低至7折
关注 私信
Advanced Game Design with HTML5 and JavaScript 15积分/C币 立即下载
Advanced Game Design with HTML5 and JavaScript第1页
Advanced Game Design with HTML5 and JavaScript第2页
Advanced Game Design with HTML5 and JavaScript第3页
Advanced Game Design with HTML5 and JavaScript第4页
Advanced Game Design with HTML5 and JavaScript第5页
Advanced Game Design with HTML5 and JavaScript第6页
Advanced Game Design with HTML5 and JavaScript第7页
Advanced Game Design with HTML5 and JavaScript第8页
Advanced Game Design with HTML5 and JavaScript第9页
Advanced Game Design with HTML5 and JavaScript第10页
Advanced Game Design with HTML5 and JavaScript第11页
Advanced Game Design with HTML5 and JavaScript第12页
Advanced Game Design with HTML5 and JavaScript第13页
Advanced Game Design with HTML5 and JavaScript第14页
Advanced Game Design with HTML5 and JavaScript第15页
Advanced Game Design with HTML5 and JavaScript第16页
Advanced Game Design with HTML5 and JavaScript第17页
Advanced Game Design with HTML5 and JavaScript第18页
Advanced Game Design with HTML5 and JavaScript第19页
Advanced Game Design with HTML5 and JavaScript第20页

试读结束, 可继续阅读

15积分/C币 立即下载