Creating the Render Loop

The render loop is responsible for rendering the game board. Unlike the update loop, which is triggered by the window.setInterval() method, the render loop is executed by calling the requestAnimationFrame() method.

The requestAnimationFrame() method is defined as part of the W3C Timing Control for Script-Based Animation standard. This method was introduced specifically for the purpose of creating animated games.

When you use the requestAnimationFrame() method, you don’t specify how often the screen should be rendered. Instead, you let the browser determine the best frame rate.

The idea is that the browser can do a better job than you in determining the best frame rate. The browser can take into account all of the animations ...

Get Windows® 8.1 Apps with HTML5 and JavaScript Unleashed now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.