HTML5 Game Development
   
  • HOME
  • News
  • Tutorials
  • Engines
  • Demos
  • Tools
  • Partners
  • Mobile HTML Game
  • Guess The Celebrity
  • About us

JavaScript Timers for Game Dev

(Almost) every game needs a game loop – and in order to create a game loop in HTML5 you are going to need to use a javascript timer. Why? Well because JavaScript is single threaded with the rest of the DOM, which means that if you are in a loop that never gives up control, the page will never update and you will stall out your players computer.

To get around this we use timers, which give control back to the browser but make sure our game loop gets called at regular intervals. Sounds simple, right? Well it isn’t exactly because we don’t have a whole lot control of the browser – the user may be playing our game or he may be off-page crunching a 100000 line spreadsheet. This is one of the downsides of browser-based games – we can’t count on having the computer’s attention. Throw into that variation in the different lower bounds for how often our functions can get called, we’re in for a little bit of pain.

Luckily people have been at this issue for a bit and the browser makers have helped us out by starting to implement a feature called ‘requestAnimationFrame’ which is synced with visual refreshing of the page.

To get a basic understanding of JavaScript timers – check out John Resig’s article from 2008. Once you’ve got that under your belt, check out Paul Irish’s article on shimming in support for requestAnimationFrame across the various browsers and Joe Lambert has a great article on using requestAnimationFrame as a drop in replacement for setTimeout / clearTimeout and setInterval / clearInterval.

Share List

You might also find this interesting:


  1. Understanding JavaScript OOP Quildreen Motta, a front-end developer based in Brazil wrote an excellent in-depth write-up on Understanding OOP in JavaScript that is a great read for anyone building OOP games in JavaScript....

  2. JavaScript Garden You can’t build a HTML5 Game with a good understanding of JavaScript. Enter JavaScript Garden. A site that aims to provide “documentation about the most quirky parts of the JavaScript...

  3. 4-Part Creating a Simple Windows 8 Game with JavaScript Tutorial Chris Bowen has written a 4-part series on SitePoint on creating a game for Windows 8 using JavaScript. The tutorial series walks you through the steps of building Catapult Wars,...

  4. Abacus.js: All the game-dev-bootstrapping related stuff you wish you had A new project coming out of Bocoup aims to provide HTML5 Game Devs with a set of tools that allows them to focus on making games and not worry about...

  5. Performance tips of JavaScript in V8 A great article on some very specific considerations for your code to make it take advantage of all the optimizations that V8 does these days. It includes a discussion of...

HTML5 Game Dev Tutorials

License HTML5 Games

Are you a company looking to license HTML5 games? We recommend MarketJS.com, a B2B platform for licensing games.

MarketJS has over 300 HTML5 games for licensing. They also provide additional services such as game reskin, custom development, and white label portals.

Html5 Game Development


Follow @GameDevHTML5



WHAT’S NEW

  • Game Localization For Food Delivery App

  • HTML5 Games in Guest Room Tablets

  • What’s New in Phaser 3.50

  • Particle and Sprite Editors in Babylon.js 4.2

  • Healthcare Industry HTML5 Games



NEW DEMOS

  • Vertical Endless Runner Prototype

  • Particle and Sprite Editors in Babylon.js 4.2

  • Song Maker in Google Experiment

  • Phaser 3 Experiment for Drawing Cards

  • HTML5 Game for a Recycling Campaign


ENGINES

  • Phaser 3 Game Object Pools Tutorial

    Memory allocation inside update loops often causes framerate problems in real-time gaming. One of the best solutions to this is to use Object Pools in Phaser 3. An Object Pool …Read more

  • Games During The COVID-19 Pandemic

    There so many effective ways to engage your audience with HTML5 games. Here is an example of how to run a game campaign to keep users motivated during difficult times. …Read more

  • Building Simulated 3D HTML5 Games With Phaser

    Phaser is commonly used as a 2D game engine for creating HTML5 desktop and mobile games. However, with the help of three.js and Phaser 3D library, you could render your …Read more

SEARCH OUR ARCHIVES

CONNECT

rss twitter

HTML5 Game Development is proudly run by 3P Solutions Inc

GOT NEWS?

Send new engines, demos, information and tips to hello@html5gamedevelopment.com

MONTHLY MEETUP

In boston? Join us for the Monthly HTML5 Game Development meetup.

BOOKS

We're in the process of writing a few books about game development. Coming soon!

Copyright HTML5gamedevelopment.com