//requestAnimationFrame polyfill de Erik Möller //http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating" (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); }; }()); /* Game Loop */ var juego = (function(){ var reqAnimId, canvas, contexto, canvasBuffer, contextoBuffer, presionada, cuadrado = { x: 100, y: 25, width: 50, height: 150 }; function actualizar() { //actualizaciones del estado switch(presionada){ case 37: //izquierda cuadrado.x -= 10; if (cuadrado.x < 0) cuadrado.x = 0; break; case 39: //derecha cuadrado.x += 10; if (cuadrado.x + cuadrado.width > canvas.width) cuadrado.x = canvas.width - cuadrado.width; break; } } function dibujar() { contextoBuffer.clearRect(0, 0, canvas.width, canvas.height); //dibujos en el contextoBuffer contextoBuffer.fillRect(cuadrado.x, cuadrado.y, cuadrado.width, cuadrado.height); contexto.clearRect(0, 0, canvas.width, canvas.height); contexto.drawImage(canvasBuffer, 0, 0); } function iniciarCanvas() { canvas = document.getElementById('canvas'); canvasBuffer = document.createElement('canvas'); canvasBuffer.width = canvas.width; canvasBuffer.height = canvas.height; if (canvas.getContext){ contexto = canvas.getContext('2d'); contextoBuffer = canvasBuffer.getContext('2d'); } else throw "canvas no soportado!"; } function agregarManejador() { document.addEventListener('keydown', function(evento) { presionada = evento.keyCode; }); document.addEventListener('keyup', function(evento) { presionada = null; }); } function loop(){ actualizar(); dibujar(); reqAnimId = window.requestAnimationFrame(loop); } return { iniciar: function() { if (!canvas) iniciarCanvas(); agregarManejador(); loop(); }, detener: function() { if (reqAnimId) window.cancelAnimationFrame(requestAnimId); requestAnimId = 0; } }; })(); juego.iniciar();
<canvas id="canvas" width="600px" height="200px" style="border: solid 1px"> Tu explorador no soporta Canvas </canvas>