Book Image

jQuery Game Development Essentials

By : Selim Arsever
Book Image

jQuery Game Development Essentials

By: Selim Arsever

Overview of this book

jQuery is a leading multi-browser JavaScript library that developers across the world utilize on a daily basis to help simplify client-side scripting. Using the friendly and powerful jQuery to create games based on DOM manipulations and CSS transforms allows you to target a vast array of browsers and devices without having to worry about individual peculiarities."jQuery Game Development Essentials" will teach you how to use the environment, language, and framework that you're familiar with in an entirely new way so that you can create beautiful and addictive games. With concrete examples and detailed technical explanations you will learn how to apply game development techniques in a highly practical context.This essential reference explains classic game development techniques like sprite animations, tile-maps, collision detection, and parallax scrolling in a context specific to jQuery. In addition, there is coverage of advanced topics specific to creating games with the popular JavaScript library, such as integration with social networks alongside multiplayer and mobile support. jQuery Game Development Essentials will take you on a journey that will utilize your existing skills as a web developer so that you can create fantastic, addictive games that run right in the browser.
Table of Contents (17 chapters)
jQuery Game Development Essentials
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

Using requestAnimationFrame instead of timeouts


A new feature has been added quite recently to browsers in order to make animations smoother: requestAnimationFrame. This makes the browser tell you when it's the best possible time to animate your page instead of doing it whenever you feel like it. You would use this instead of registering your callbacks with setInterval or setTimeout.

When you use requestAnimationFrame, it's the browser that decides when it will call the function. Therefore, you'll have to take into account the exact time that passed since the last call. The standard specification used to define this time is milliseconds (like the ones you would get with Date.now()), but it's now given by a high-precision timer.

As there are implementations of those two versions around, and this feature is vendor-prefixed in most browsers, you should use a tool to abstract the dirty details. I would recommend reading these two articles, both of which provide code snippets that you could use...