Pro HTML5 Games

5星(超过95%的资源)
所需积分/C币:11 2013-04-01 11:39:43 12.47MB PDF
24
收藏 收藏
举报

Pro HTML5 Games (英文PDF) 经过仔细对比了几本HTML5游戏开发的书后,我决定将这本推荐给大家! Pro HTML5 Games is meant for programmers who already have some HTML and JavaScript programming experience and who now want to learn to harness the power of HTML5 to build amazing-looking games but don’t know where to begin. Readers who have experience making games in other languages such as Flash and would like to move to HTML5 will also find a lot of useful information in this book. If you do not feel confident about your game programming skills, don’t worry. This book covers all the essentials needed to build these games so you can follow along and learn to design large, professional games in HTML5. The book will also point to resources and reference material for supplemental learning in case you are having trouble keeping up. With dedicated chapters on HTML5 basics, the Box2D engine, pathfinding and steering, combat and effective enemy AI, and multiplayer using Node.JS with WebSockets, you should get a lot from this book no matter how much game programming experience you have.
Contents at a glance About the author About the technical reviewers ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■ ■■■■■■■■■■■■■■■ ■■■■■■■■■■口■■■■■■■■ XV Introduction… XVI ■chapter1:HTML5andJavaScriptEssentials,,,,…,,1 Chapter 2: Creating a Basic Game World 19 Chapter 3: Physics Engine Basics ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 39 Chapter 4: Integrating The Physics Engine m mmmmm 65 Chapter 5: Creating the RTs Game World maman n01 Chapter 6: Adding entities to Our World ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 125 Chapter 7: Intelligent Unit Movement.mmmm u165 Chapter8: Adding More Game Elements…,,,,,…,,,,,,…m195 Chapter 9: Adding Weapons and combat mmm mmmmnman 231 Chapter 10; Wrapping Up the single-Player Campaign mmmm am 263 Chapter 1 1: Multiplayer with Websockets Raat ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■口■■■■ 293 Chapter 12: Multiplayer Gameplay ammaumamaaamaa 319 Index 341 Introduction Welcome to pro html5 games In writing this book, I wanted to create the resource that i wish someone had given me when i was starting out learning game programming Unlike other books with abstract examples that you will never ever use, this book will show you firsthand how HTML5 can be used to make complete, working games I specifically chose a physics engine game and a real-time strategy game as examples because between the two, these genres encompass all the elements needed to build most of the game types that are popular today As you follow along, you will learn all the essential elements needed to create games in HTML5 and then see how these elements come together to form professional-looking games By the end of this book, I hope you will walk away with the confidence and the resources to start making amazing games of your own in HTML5 Who this book is for Pro htML5 Games is meant for programmers who already have some HTML and Java Script programming experience and who now want to learn to harness the power of hTMl5 to build amazing-looking games but dont know where to egl Readers who have experience making games in other languages such as Flash and would like to move to hTML5 will also find a lot of useful information in this book If you do not feel confident about your game programming skills, don' t worry. This book covers all the essentials needed to build these games so you can follow along and learn to design large, professional games in HTML5. The book will also point to resources and reference material for supplemental learning in case you are having trouble keeping up With dedicated chapters on hTML5 basics, the Box2D engine, pathfinding and steering, combat and effective enemy AL, and multiplayer using Node. JS with Web Sockets, you should get a lot from this book no matter how much game programming experience you have How This book is structured Pro hTML5 Games takes you through the process of building two complete games over the course of 12 chapters In the first four chapters, you will build Froot Wars, a Box2D engine-based physics game similar to the very popular Angry Birds Chapter l discusses the basic elements of HTML5 needed to build games, such as drawing and animating on the canvas,playing audio, and using sprite sheets Chapter 2 covers building a basic game framework with splash screens, game menus, an asset loader, and a basic Chapter 3 is a detailed introduction to the Box2d physics engine and shows how Box2D can be used to model a game world Chapter 4 shows how to integrate the game framework with the Box2 D engine, add sounds, and add music to create a complete working physics game XVIl L INTRODUCTION The second game in the book is an rts game with both a single-player campaign mode and a multiplayer You will build the single-player campaign over the next six chapters Chapter 5 covers building a basic game framework with splash screens, game menus, an asset loader, and a basic level with panning using the mouse Chapter 6 adds different entities such as vehicles, aircraft, and buildings to the game Chapter 7 shows how to add intelligent unit movement to the game using a combination of pathfinding and steering steps Chapter 8 adds some more elements such as an economy and a trigger-based system that allows scripting events Chapter 9 covers implementing a weapons and combat system in the game Chapter 10 wraps up the single-player by showing how to create several challenging single-player levels using the framework developed so far Finally, in the last two chapters, you will look at building the multiplayer component of the RTS game Chapter ll discusses the basics of using the Web Socket APi with Node js and creating a multiplayer game lobby ang chapter 12 covers implementing a framework for multiplayer gameplay using the lock-step networking model nd compensating for network latency while maintaining game synchronization Downloading the Code Thecodefortheexamplesshowninthisbookisavailableontheapresswebsite,www.apress.comYoucanfindalink on the book's information page on the Source Code/Downloads tab. This tab is located underneath the Related Titles section of the page. Contacting the author Should you have any questions or feedback, you can contact the author through the dedicated page on his websiteatwww.adityaravishankar.com/pro-html5-games/.Hecanalsobereachedviae-mailat prohtml5games@adityaravishankar.com CHAPTER 1 HTML5 and JavaScript Essentials HTML5, the latest version of the hTML standard, provides us with many new features for improved interactivity and media support. These new features(such as canvas, audio, and video) have made it possible to make fairly rich and nteractive applications for the browser without requiring third-party plug-ins such as Flash The HTML5 specification is currently a work in progress, and browsers are still implementing some of its newer features. However, the elements that we need for building some very amazing games are already supported by most modern browsers(Google Chrome, Mozilla Firefox, Internet Explorer 9+, Safari, and Opera) All you need to get started on developing your games in hTMl5 are a good text editor to write your code (iuseTextmatefortheMac-http://macromates.com/)andamodernHtml5-coMpatibLebrowser(iusegoogle Chrome-http://www.google.com/chrome) The structure of an html5 file is very similar to that of files in previous versions of hTMl except that it has a much simpler doCTYPe tag at the beginning of the file Listing 1-1 provides a skeleton for a very basic hTML5 file that we will be using as a starting point for the rest of this chapter Executing this code involves saving it as an HTML file and then opening the file in a web browser. If you do everything correctly, this file should pop up the message"Hello world! Listing 1-1. Basic hTML5 File Skeleton <docType html> <html> <head> metahttp-equiv=content-typecontent=text/htmlicharset=utf-8> <title> Sample HTML5 File</title> <script type ="text/javascript charset =utf-8 / This function will be called once the page loads completely function pageLoadedot alert('Hello World! </script> </head> <body onload ="pageLoadedo;"> </body> </html> Note We use the bodys onload event to call our function so that we can be sure that our page has completely loaded before we start working with it. This will become important when we start manipulating elements like canvas and image Trying to access these elements before the browser has finished loading them will cause JavaScript errors CHAPTER 1 HTML5 AND JAVASCRIPT ESSENTIALS Before we start developing games, we need to go over some of the basic building blocks that we will be using to create our games. The most important ones that we need are The canvas element, to render shapes and images The audio element to add sounds and background music The image element, to load our game artwork and display it on the canvas The browser timer functions and game loops to handle animatio The canvas element The most important element for use in our games is the new canvas element. As per the hTML5 standard specification, The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly. You can find the complete specification at Www.whatwg. org/specs/web-apps/current-work/multipage/the-canvas-element.html The canvas allows us to draw primitive shapes like lines, circles, and rectangles, as well as images and text, and has been optimized for fast drawing Browsers have started enabling GPU-accelerated rendering of 2D canvas content so that canvas-based games and animations run fast Using the canvas element is fairly simple. Place the< canvas tag inside the body of the hTML5 file we created earlier, as shown in Listing 1-2 Listing 1-2. Creating a Canvas element <canvas width=640 height =480 id=testcanvas" style =border: black 1px solid;"> Your browser does not support HTML5 Canvas. Please shift to another browser </canvas> The code in Listing 1-2 creates a canvas that is 640 pixels wide and 480 pixels high. By itself, the canvas shows up as a blank area(with a black border that we specified in the style). We can now start drawing inside this rectangl using JavaScript. Note Browsers that do not support canvas will ignore the canvas >tag and render anything inside the k canvas >tag. You can use this feature to show users on older browsers alternative fallback content or a message directing them to a more modern browser We draw on the canvas using its primary rendering context. We can access this context with the getContexto method in the canvas object. The getContexto method takes one parameter: the type of context that we need. We will be using the 2d context for our games Listing 1-3 shows how we can access the canvas and its context once the page has loaded Listing 1-3. Accessing the Canvas Context <script type =text/javascript charset =utf-8> function pageLoadedo)i / Get a handle to the canvas object var canvas document getElementById (testcanvas); / Get the 2d context for this canvas CHAPTER 1 HTML5 AND JAVASCRIPT ESSENTIALS var context canvas get Context(2d; //Our drawing code here </script> Note All browsers support the 2d context that we need for 2D graphics. browsers also implement other contexts with their own proprietary names, such as experimental-Webgl for 3D graphics This context object provides us with a large number of methods that we can use to draw our game elements on the screen. This includes methods for the following Drawing rectangles Drawing complex paths(lines, arcs, and so forth) Drawing text Customizing drawing styles(colors, alpha, textures, and so forth Drawing images Transforming and rotating We will look at each of these methods in more detail in the following sections Drawing rectangles The canvas uses a coordinate system with the origin(0,0)at the top-left corner, x increasing toward the right, and y increasing downward, as illustrated in Figure 1-1 Ⅹ height width Figure 1-1. Coordinate system for canvas CHAPTER 1 HTML5 AND JAVASCRIPT ESSENTIALS We can draw a rectangle on the canvas using the context s rectangle methods fillRect(x, y, width, height): Draws a filled rectangle strokeRect(x, y, width, height ): Draws a rectangular outline clearRect(x, y, width, height ): Clears the specified rectangular area and makes it fully transparent Listing 1-4. Drawing Rectangles Inside the Canvas // FILLED RECTANGLES / Draw a solid square with width and height of 100 pixels at(200, 10) context. fillRect(200, 10, 100, 100); / Draw a solid square with width of g0 pixels and height of 30 pixels at (50,70) context. fillRect(50, 70, 90, 30); // STROKED RECTANGLES / Draw a rectangular outline of width and height 50 pixels at(110, 10) context. strokeRect(110, 10, 50, 50); / Draw a rectangular outline of width and height 50 pixels at(30, 10) context. strokeRect(30, 10, 50, 50) / CLEARING RECTANGLES / Clear a rectangle of width of 30 pixels and height 20 pixels at(210, 20) context. clearRect(210, 20, 30, 20); //Clear a rectangle of width 30 and height 20 pixels at(260, 20) context. clearRect(260, 20, 30, 20); The code in Listing 1-4 will draw multiple rectangles on the top-left corner of the canvas, as shown in Figure 1-2 Figure 1-2. Drawing rectangles inside the canvas Drawing complex Paths The context has several methods that allow us to draw complex shapes when simple boxes arent enough beginPath () Starts recording a new shape closePath(: Closes the path by drawing a line from the current drawing point to the starting Doint p fillo, stroke(: Fills or draws an outline of the recorded shape CHAPTER 1 HTML5 AND JAVASCRIPT ESSENTIALS moveTo(x, y): Moves the drawing point to x, y lineTo(x, y): Draws a line from the current drawing point to x, y arc(x, y, radius, startAngle, endAngle, anticlockwise): Draws an arc at x,y with specified radius Using these methods, drawing a complex path involves the following steps 1. Use beginPath( to start recording the new shape 2. Use moveTo(, lineTo(), and arco to create the shape 3. Optionally, close the shape using closePatho) 4. Use either stroke or fill o to draw an outline or filled shape Using fill( automatically closes any open paths. Listing 1-5 will create the triangles, arcs, and shapes shown in Figure 1-3 Listing 1-5. Drawing Complex Shapes Inside the Canvas / Drawing complex shapes / Filled triangle context. beginPath( context. moveTo(10, 120); / Start drawing at 10,120 context.lineTo(10, 180) context. lineTo(110, 150); context. fillo; / close the shape and fill it out // Stroked triangle context. beginPath(; context. moveTo(140, 160);// Start drawing at 140, 160 context. lineTo(140, 220) context. lineTo(40, 190) context. closePath o; context. stroke o; / A more complex set of lines context. beginPath o; context. moveTo(160, 160);// Start drawing at 160, 160 context. lineTo(170, 220) context. lineTo(240, 210) context.lineTo(260, 170) context. lineTo(190, 140) context. closePath(; context. stroke(; // Drawing arcs // Drawing a semicircle context. beginPath o; / Draw an arc at(400, 50) with radius 40 from o to 180 degrees, anticlockwise context. arc(100, 300, 40,0, Math. PI, true); //(PI radians 180 degrees context. stroke

...展开详情
试读 127P Pro HTML5 Games
立即下载
限时抽奖 低至0.43元/次
身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
yogapig123456 Good book to learn HTML5. It includes lots of examples
2015-09-17
回复
ptlddn 这本书的中文名称是,HTML5游戏开发进阶指南,中文版没找到,但这个英文版相当不错啊!很全
2015-07-24
回复
SHY1977 作者的网站上看到的,推荐阅读
2015-06-08
回复
qq_26484007 很好的教程, 内容稍微少了点
2015-05-07
回复
seasmiles 确实是原版pdf,配图是彩色的。
2015-05-06
回复
ben79cn 下载不了,试了很多次,不管是用宽带还是用公司国外代理,都是下载到9.9M时就再也不能下载了。既然免费的为何还要5个积分呢
2014-12-01
回复
bigcat133 就是看到作者的例子以后才决定下载的,那个效果太cool了经典C&C令人回味
2014-10-30
回复
yonghuming_abc 这本书必须要好评,在讲解html5游戏制作时非常细致,容易理解。跟着案例操作下来,收获不浅。
2014-10-09
回复
softworm 非常棒!因为刚买了纸质版的中文版,适合在家里看。但在外面,只好电子版了。英文版也不错,图是彩色的。现在就需要这么直接明了的书,理论书看得太多了,也该来点荤菜了。
2014-07-28
回复
wangxunxhx 很好,很专业
2014-07-07
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
Pro HTML5 Games 11积分/C币 立即下载
1/127
Pro HTML5 Games第1页
Pro HTML5 Games第2页
Pro HTML5 Games第3页
Pro HTML5 Games第4页
Pro HTML5 Games第5页
Pro HTML5 Games第6页
Pro HTML5 Games第7页
Pro HTML5 Games第8页
Pro HTML5 Games第9页
Pro HTML5 Games第10页
Pro HTML5 Games第11页
Pro HTML5 Games第12页
Pro HTML5 Games第13页
Pro HTML5 Games第14页
Pro HTML5 Games第15页
Pro HTML5 Games第16页
Pro HTML5 Games第17页
Pro HTML5 Games第18页
Pro HTML5 Games第19页
Pro HTML5 Games第20页

试读结束, 可继续阅读

11积分/C币 立即下载