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

  • GPT3 Voting Board

  • 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



NEW DEMOS

  • Vertical Platformer Games Using GDevelop

  • HTML5 Games for HR Technology

  • Building Vertical Platformer Games using Kaboom

  • Vertical Endless Runner Prototype

  • Particle and Sprite Editors in Babylon.js 4.2


ENGINES

  • Modd.io – User-Friendly HTML5 Game Engine

    Here is another user-friendly HTML5 game engine for your next gaming project. Modd.io game editor uses a sandbox approach in building HTML5 games. No coding is required. Choose from several …Read more

  • Vertical Platformer Games Using GDevelop

    Last time, we introduced GDevelop as a viable option for no-code game engines. Now, let’s try building vertical platformer games using GDevelop. GDevelop comes with two behaviors to build platformer …Read more

  • Best Practices in Building HTML5 Games

    As the saying goes, “Quality is always the result of intelligent effort.” This timeless quote by John Ruskin summarizes most of the best practices in building HTML5 games by today’s …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