Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

by Mario Pagella

Overview

Anyone familiar with Zynga's Farmville understands how fun and addictive real-time social games can be. This hands-on guide shows you how to design and build one of these games from start to finish, with nothing but open source tools. You'll learn how to render graphics, animate with sprites, add sound, validate scores to prevent cheating, and more, using detailed examples and code samples.

By the end of the book, you’ll complete a project called Tourist Resort that combines all of the techniques you’ve learned. You’ll also learn how to integrate your game with Facebook. If you’re familiar with JavaScript, HTML5, and CSS3, you’re ready to get started.

• Use HTML5’s canvas element to build smooth animations with sprites
• Create an isometric grid pattern for high-performance graphics
• Design a GUI that works equally well on mobile devices and PCs
• Add sound to your game with HTML5’s audio element
• Implement the game’s path-finding function with WebWorkers
• Build a client data model on the server with PHP and MySQL
• Make your game come alive with dynamic CSS3 objects

Product Details

ISBN-13:	9781449304751
Publisher:	O'Reilly Media, Incorporated
Publication date:	09/07/2011
Pages:	152
Product dimensions:	7.00(w) x 9.10(h) x 0.50(d)

About the Author

Andres Pagella is an accomplished software developer with more than 10 years of professional experience living in Capital Federal, Argentina. He has worked on the design and the implementation of several high traffic websites in Argentina. He currently works as the Chief Technical Officer of Minor Studios Argentina S.R.L. developing a social game design tool called Atmosphir.

Table of Contents

Preface; The Rise of HTML5; What You Need to Know; Code Examples; Development and Debugging Tools; Notes on Game Design; Conventions Used in This Book; Using Code Examples; Safari® Books Online; How to Contact Us; Acknowledgments; Chapter 1: Graphics Foundations: Canvas and Sprites; 1.1 Working with the canvas Object; 1.2 Creating Smooth Animations; 1.3 Working with Sprites; 1.4 What’s at that Pixel?; 1.5 Choosing a Rendering Method for Our Graphics; Chapter 2: Making It Isometric; Chapter 3: Interface Considerations; 3.1 GUI Design and Interaction in Web Games; 3.2 Implementing the GUI; Chapter 4: HTML5 Sound and Processing Optimization; 4.1 Adding Sound with the Audio Element; 4.2 Managing Computationally Expensive Work with the Web Workers API; 4.3 Local Storage and Session Storage; Chapter 5: Connecting the Game to People; 5.1 Cheat Prevention and Server-Side Operations; 5.2 The Path to the Final Game; 5.3 Polishing the Game; 5.4 Adding a Social Networking Layer Using Facebook;