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

  • What’s New in Phaser 3.50

  • Particle and Sprite Editors in Babylon.js 4.2

  • Healthcare Industry HTML5 Games

  • Games for Events Example

  • HTML5 Games for Luxury Brands



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

  • 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

  • Egretia Blockchain HTML5 Game Engine

    Egretia is an up and coming HTML5 game development platform that is powered by blockchain. The blockchain technology is like a digital ledger wherein finances or transactions involving value are …Read more

  • Phaser 3.4 Release

    Phaser 3.4 has just been launched, bringing new and better features for HTML5 game development. This updated version now has support for Game Object Containers. Although it’s still in beta …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