Improve handling of Stats.

Don't bail out if the library is not loaded.
This commit is contained in:
Jürg Lehni 2013-06-27 04:11:50 -07:00
parent 37f0c7dcd6
commit f572ad9c0a
2 changed files with 68 additions and 71 deletions

View file

@ -5,7 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Paperoids</title> <title>Paperoids</title>
<script type="text/javascript" src="../../dist/paper.js"></script> <script type="text/javascript" src="../../dist/paper.js"></script>
<script type="text/javascript" src="../../lib/stats.js"></script>
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
// //
@ -38,7 +37,6 @@
Rocks.add(presets.rockCount); Rocks.add(presets.rockCount);
Score.update(); Score.update();
Lives.initialize(); Lives.initialize();
document.getElementById('statholder').style.display = 'block';
} }
function onKeyUp(event) { function onKeyUp(event) {
@ -51,9 +49,11 @@
} }
// Show stats: // Show stats:
if (event.key == 'f') { if (event.key == 'f') {
var statHolder = document.getElementById('statholder'); var stats = document.getElementById('stats');
statHolder.style.display = (statHolder.style.display == 'block') if (stats) {
? 'none' : 'block'; stats.style.display = (stats.style.display == 'block')
? 'none' : 'block';
}
} }
} }
@ -73,7 +73,6 @@
Ship.coast(); Ship.coast();
} }
Ship.move(); Ship.move();
Game.updateStats();
} }
project.currentStyle.strokeColor = 'white'; project.currentStyle.strokeColor = 'white';
@ -88,18 +87,6 @@
Rocks.add(presets.rockCount); Rocks.add(presets.rockCount);
}, },
// Stats.js by Mr. Doob - https://github.com/mrdoob/stats.js // Stats.js by Mr. Doob - https://github.com/mrdoob/stats.js
updateStats: new function() {
var stats = new Stats();
// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById('statholder').appendChild( stats.domElement );
document.getElementById('statholder').style.display = "none";
return stats.update;
}
}; };
var assets = { var assets = {
@ -502,60 +489,69 @@
position.y = bounds.height + itemBounds.height / 2; position.y = bounds.height + itemBounds.height / 2;
} }
} }
</script> </script>
<style type="text/css"> <style type="text/css">
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
background-color: #000; background-color: #000;
font-family:Helvetica,Arial; font-family:Helvetica,Arial;
} }
.footer {
position:absolute; .footer {
bottom:0; position:absolute;
color:#ff0000; bottom:0;
background-color: rgba(60,60,60,0.8); color:#ff0000;
font-size:0.75em; background-color: rgba(60,60,60,0.8);
padding:0.5em; font-size:0.75em;
color:#ddd; padding:0.5em;
width: 100% color:#ddd;
} width: 100%
.footer a { }
color: #fff;
font-weight: .footer a {
bold; text-decoration: none; color: #fff;
border-bottom: 1px solid #555; font-weight:
} bold; text-decoration: none;
.footer b { border-bottom: 1px solid #555;
background-color: #660000; }
padding-left: 0.25em;
padding-right: 0.25em; } .footer b {
.gameover { background-color: #660000;
display: none; padding-left: 0.25em;
position: absolute; padding-right: 0.25em;
left: 40%; }
top: 40%;
color: #fff; .gameover {
background-color: rgba(60,60,60,0.8); display: none;
padding: 32px; position: absolute;
-moz-border-radius: 12px; left: 40%;
-webkit-border-radius: 12px; top: 40%;
border-radius: 12px; color: #fff;
-moz-background-clip: padding; background-color: rgba(60,60,60,0.8);
-webkit-background-clip: padding-box; padding: 32px;
background-clip: padding-box; -moz-border-radius: 12px;
} -webkit-border-radius: 12px;
.gameover a { border-radius: 12px;
color: #fff; -moz-background-clip: padding;
font-weight: bold; -webkit-background-clip: padding-box;
} background-clip: padding-box;
</style> }
.gameover a {
color: #fff;
font-weight: bold;
}
#stats {
position: absolute;
left: auto !important;
right: 0px;
}
</style>
</head> </head>
<body style="background:black"> <body style="background:black">
<canvas style="position:absolute" id="canvas" resize></canvas> <canvas style="position:absolute" id="canvas" resize stats></canvas>
<div style="position:absolute;right:51px;color:#ff0000;" id="statholder">FPS</div>
<div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>&#8592;</b> and <b>&#8594;</b> to rotate. <b>&#8593;</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div> <div id="footer" class="footer"><a href=#">Paperoids</a>. To Play: <b>&#8592;</b> and <b>&#8594;</b> to rotate. <b>&#8593;</b> for thrust. <b>Z</b> to fire. <b>F</b> to show FPS. Follow @<a href="http://twitter.com/#/hirmes">hirmes</a> for updates. Made with the amazing <a href="http://paperjs.org">Paper.js</a></div>
<div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div> <div id="gameover" class="gameover">Game Over. <a href="Paperoids.html">Play again</a>?</div>

View file

@ -74,7 +74,8 @@ var View = Base.extend(Callback, /** @lends View# */{
element.width = size.width; element.width = size.width;
element.height = size.height; element.height = size.height;
// TODO: Test this on IE: // TODO: Test this on IE:
if (PaperScope.hasAttribute(element, 'stats')) { if (PaperScope.hasAttribute(element, 'stats')
&& typeof Stats !== 'undefined') {
this._stats = new Stats(); this._stats = new Stats();
// Align top-left to the element // Align top-left to the element
var stats = this._stats.domElement, var stats = this._stats.domElement,