UX Magazine

Defining and Informing the Complex Field of User Experience (UX)

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

September 7, 2011
Mario Andres Pagella

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

Add new comment

Comments