A small brick game... Pure JS and HTML

[Joel]

Hmm, not sure your requestAnimationFrame code will work with most browsers e.g. Opera, IE and Webkit. You should use something like this:

 

(function() {
   var lastTime = 0;
   var vendors = ['ms', 'moz', 'webkit', 'o'];
   for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
       window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
       window.cancelRequestAnimationFrame = window[vendors[x]+
         'CancelRequestAnimationFrame'];
   }

   if (!window.requestAnimationFrame)
       window.requestAnimationFrame = function(callback, element) {
           var currTime = new Date().getTime();
           var timeToCall = Math.max(0, 16 - (currTime - lastTime));
           var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
             timeToCall);
           lastTime = currTime + timeToCall;
           return id;
       };

   if (!window.cancelAnimationFrame)
       window.cancelAnimationFrame = function(id) {
           clearTimeout(id);
       };
}())

Source: http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

This will loop through the vendors and detect support for IE, Firefox, Chrome, Opera and other Webkit browsers. If it doesn't detect requestAnimationFrame it will just use setTimeout.

You then only need to use this:

 

function gameLoop() {
        window.requestAnimationFrame( gameLoop );
        //code here...
}

 

I prefer to use Chrome as my JavaScript developing web browser, it has the best JavaScript engine. But I still check compatibility for other browsers.

[a_bertrand]

Well tested under IE, FF and Chrome. I will not test nor support any others. So yes it does work on the major browsers.

[Spudinski]

Well tested under IE, FF and Chrome. I will not test nor support any others. So yes it does work on the major browsers.

*ahem*

Opera is a major browser, if with just 3% of the market.

My view requestFrameAnimation:

Developers should know this, but anything with a vendor prefix is not mainstream or by any means stable(with regards spec).

The reason why vendor prefixes are there, is so browser developers/maintainers can rapidly implement/prototype draft/rough specifications from W3C.

Using these "experimental" features is a damming task, as implementations change every month(week). Your best bet is to use it without a vendor prefix, and if supported by the client, can be implemented.

Every other scenario where a prefix is required, should ideally not be implemented. Trust me, these specifications change more rapidly than you can release patches.

The vendor prefix is dropped once the spec has been finalised(W3C) and stable within the vendor browser. Only then is it suitable for production.

[a_bertrand]

http://www.w3schools.com/browsers/browsers_stats.asp

1.9% Major browser? Mmm... not in my books. However Spud you have exactly the point, anyhow how I implemented is => if doesn't exists then fall back to setTimeout. Should work for all without any major issue. I only test for moz because I had moz running.

[Spudinski]

http://www.w3schools.com/browsers/browsers_stats.asp

1.9% Major browser? Mmm... not in my books. However Spud you have exactly the point, anyhow how I implemented is => if doesn't exists then fall back to setTimeout. Should work for all without any major issue. I only test for moz because I had moz running.

"You cannot - as a web developer - rely ONLY on statistics. Statistics can be misleading." - W3Schools

Just kidding, I read about it some time ago, was probably a biased statistic count.

However, I still use it for development: I find it to be one of the most annoyingly standards-driven browsers. It's high on standards, and things breaks easily - very good for standard-compliant development IMHO.

Dragonfly is also the best thing since the invention of silicon. Did you know, Dragonfly shows you event listeners on elements, in DOM view? Awesomeness.

Anyway, enough advertising for Opera from me.... On to playing brick breaker!!