github-migration
/
HTML5-Space-Invaders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update HTML5-Space-Invaders.html 

Fix problems arising from the new webkit implementation of window.performace.now (high resolution timer draft).
This commit is contained in:
arcadeJHS 2013-02-11 19:22:37 +01:00
parent 48ed66ef23
commit 573652505f
1 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
HTML5-Space-Invaders.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Space Invaders</title> <title>Space Invaders</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css"> <style type="text/css">
@ -318,17 +318,32 @@
return el.querySelector(selector); return el.querySelector(selector);
}; };
// crossbrowser implementation for requestAnimationFrame
var requestAnimation = (function() { (function() {
return window.requestAnimationFrame var lastTime = 0;
|| window.webkitRequestAnimationFrame var vendors = ['ms', 'moz', 'webkit', 'o'];
|| window.mozRequestAnimationFrame for(var x = 0; x < vendors.length && !window.requestAnimationFrameFrame; ++x) {
|| window.oRequestAnimationFrame window.requestAnimationFrameFrame = window[vendors[x]+'requestAnimationFrameFrame'];
|| window.msRequestAnimationFrame window.cancelAnimationFrame =
|| function(callback, element) { window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelrequestAnimationFrameFrame'];
window.setTimeout(callback, 1000/60); }
};
})(); if (!window.requestAnimationFrameFrame)
window.requestAnimationFrameFrame = 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 objects // game objects
@ -1308,8 +1323,9 @@
// animation loop // animation loop
var gameWrapper = $("#game"); var gameWrapper = $("#game");
var startTime = window.mozAnimationStartTime || +new Date; var startTime = window.performance.now() || window.mozAnimationStartTime || +new Date;
requestAnimation(loop, gameWrapper);
requestAnimationFrame(loop, gameWrapper);
function loop(timestamp) { function loop(timestamp) {
// time since last draw // time since last draw
var drawStart = (timestamp || +new Date); var drawStart = (timestamp || +new Date);
@ -1325,7 +1341,7 @@
startTime = drawStart; startTime = drawStart;
} }
requestAnimation(loop, gameWrapper); requestAnimationFrame(loop, gameWrapper);
} }
} }
@ -1447,9 +1463,11 @@
// animation loop // animation loop
var gameWrapper = $("#game"); var gameWrapper = $("#game");
var startTime = window.mozAnimationStartTime || +new Date; debugger;
requestAnimation(loop, gameWrapper); var startTime = window.performance.now() || window.mozAnimationStartTime || +new Date;
requestAnimationFrame(loop, gameWrapper);
function loop(timestamp) { function loop(timestamp) {
// time since last draw // time since last draw
var drawStart = (timestamp || +new Date); var drawStart = (timestamp || +new Date);
var diff = drawStart - startTime; var diff = drawStart - startTime;
@ -1467,7 +1485,7 @@
startTime = drawStart; startTime = drawStart;
} }
requestAnimation(loop, gameWrapper); requestAnimationFrame(loop, gameWrapper);
} }
}; };
@ -1548,4 +1566,4 @@
<body> <body>
<div id="game"></div> <div id="game"></div>
</body> </body>
</html> </html>