HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

Jacob Seidelin

Language: English

Pages: 456

ISBN: 1118855388

Format: PDF / Kindle (mobi) / ePub

HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL

Jacob Seidelin

Language: English

Pages: 456

ISBN: 1118855388

Format: PDF / Kindle (mobi) / ePub


HTML5 Gamesshows you how to combine HTML5, CSS3 and JavaScript to make games for the web and mobiles - games that were previously only possible with plugin technologies like Flash. Using the latest open web technologies, you are guided through the process of creating a game from scratch using Canvas, HTML5 Audio, WebGL and WebSockets.

 

Inside, Jacob Seidelin shows you how features available in HTML5 can be used to create games. First, you will build a framework on which you will create your HTML5 game. Then each chapter covers a new aspect of the game including user input, sound, multiplayer functionality, 2D and 3D graphics and more. By the end of the book, you will have created a fully functional game that can be played in any compatible browser, or on any mobile device that supports HTML5.

 

Topics include:

 

  • Dealing with backwards compatibility
  • Generating level data
  • Making iOS and Android web apps
  • Taking your game offline
  • Using Web Workers
  • Persistent Game Data
  • Drawing with Canvas
  • Capturing player input
  • Creating 3D graphics with WebGL
  • Textures and lighting
  • Sound with HTML5 Audio

 

And more…

Building Web Applications with SVG

Coders at Work

C++ Unleashed

Windows® Phone 7 Developer Guide: Building connected mobile applications with Microsoft Silverlight® (Patterns & Practices)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

rendering modes are • TRIANGLES • TRIANGLE_STRIP • TRIANGLE_FAN • POINTS • LINES • LINE_LOOP • LINE_STRIP I don’t go into detail on all these modes here, but I encourage you to play around with them. A mode like gl.TRIANGLE_STRIP is especially useful because it allows you to decrease the number of indices needed if you order the triangles so the next triangle starts where the previous triangle ended. Another interesting mode is gl.POINTS, which is great for things such

game. Exiting the game You haven’t handled exiting the game yet. The player should have an option to exit the current game and return to the main menu. Listing 12.7 shows a footer element with an exit button added to the game screen in index.html. Listing 12.7 Adding a Footer to the Game Screen ...

...
...

... The CSS rules

drawJewel(type, x, y) { var image = jewel.images[“images/jewels” + jewelSize + “.png”]; ctx.drawImage(image, type * jewelSize, 0, jewelSize, jewelSize, x * jewelSize, y * jewelSize, jewelSize, jewelSize ); } function redraw(newJewels, callback) { var x, y; jewels = newJewels; ctx.clearRect(0,0,canvas.width,canvas.height); for (x = 0; x < cols; x++) { for (y = 0; y < rows; y++) { drawJewel(jewels[x][y], x, y); } } callback(); } return

html element, indicating which features are supported and which are not. Because all other elements are children of the html element, this allows you to easily style your markup appropriately according to the supported features. For example, if you want to use rgba() colors to make a semi-transparent background and fall back to an opaque background if rgba() colors are not supported, you could create styles as shown in Listing 1.6. Listing 1.6 Applying CSS Based on Supported Features /*

horizontal space in landscape mode. The timer bar gets a special treatment because it is rotated 90 degrees. This allows it to maintain its full size even as it’s moved to the narrow space next to the board. Figure 9-5 shows the result in landscape mode on an iPod Touch. Figure 9-5: The game UI elements in landscape mode You can now update these elements with the current values. First, they should be updated at the beginning of the game, so create an updateGameInfo() function that

Download sample

Download