Javascript Games w/OLPC...

Just tried to finish off the falling object math game that I've been working on for ExeLearning to complete the little pack being made. Objective: small sprites falling against a background of around 640x480 at maybe 10-13fps.

Thought - let's test the performance of that - jQuery based animation (which is using DOM) - can just cope with one small moving sprite across a 640x480 background object if you hack jQuery.js to change the hardcoded refresh time (13ms which is really not needed)... But if you just try to introduce a second sprite... again hopeless situation.

Thought - what about canvas? Wrong concept... the scaling in it means that it thinks on every paint request to scale it... Performance so bad I have to ctrl+alt+erase to restart. You can look at http://wiki.laptop.org/go/HTML_canvas_performance but even after that it improves - to the point where you desperately need to click on move away...

Thought - what if we could keep all the animation within an iframe? That way the repaint area could be constrained, images that needed scaled by the XO would be scaled only once. Progress! We have half way a little bit jerky animation. Take the iframe back down to 400x400 and we have what looks like decently smooth acceptable arcade kind of animation.

There also seems to be a difference between using the jquery animate method and using setInterval yourself (just to be on the safe side I stored the position of the sprite as a variable instead of retrieving, parsing, then setting again the css property).

And there you have it - now several million times (instead of seventy million or however many times found on your normal laptop) the computing power used to go to the moon can in fact be used to create an arcade game in the browse activity on the XO.