1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html> <body> <div id='arena'> ... <!-- Running slowly........................................--> <div id='running-slowly'> <h1>Snail Bait is running slowly</h1> <p id='slowly-warning'></p> <p>High-performance applications, such as video players or software that backs up your computer, can slow this game down. For best results, hide all other windows on your desktop and close CPU- or GPU- intensive apps when you play HTML5 games. </p> <p>You should also upgrade your browser to the latest version and make sure that it has hardware accelerated HTML5 Canvas. Any version of Chrome starting with version 18, for example, has hardware accelerated Canvas. Here is a link where you can download the <a href='http://www.google.com/chrome/'>latest version of Chrome</a>. </p> <a id='slowly-okay' href='#'> Okay </a> <a id='slowly-dont-show' href='#'> Do not show this warning again </a> </div> ... </div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | SnailBait.prototype = { ... revealRunningSlowlyWarning: function (now, averageSpeed) { this.slowlyWarningElement.innerHTML = "Snail Bait is running at " + "<font color='red'> averageSpeed.toFixed(0)" + "</font>" + " frames/second (fps), but it needs more than " + this.runningSlowlyThreshold + " fps for the game to work correctly." this.runningSlowlyElement.style.display = 'block'; setTimeout( function () { snailBait.runningSlowlyElement.style.opacity = 1.0; }, this.SHORT_DELAY); this.lastSlowWarningTime = now; }, hideRunningSlowlyWarning: function () { snailBait.runningSlowlyElement.style.display = 'none'; snailBait.runningSlowlyElement.style.opacity = 0; }, ... }; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #running-slowly { position: absolute; width: 600px; margin-top: 85px; margin-left: 90px; text-align: center; background: rgba(255,255,255,0.85); text-align: left; padding: 0px 20px 20px 20px; color: navy; text-shadow: 1px 1px 1px rgba(255,255,255,0.5); -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; -webkit-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px; -moz-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px; -o-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px; box-shadow: rgba(0,0,0,0.5) 4px 4px 8px; opacity: 0; display: none; z-index: 2; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | SnailBait.prototype = { ... animate: function (now) { if (snailBait.paused) { setTimeout( function () { requestNextAnimationFrame(snailBait.animate); }, snailBait.PAUSED_CHECK_INTERVAL); } else { snailBait.fps = snailBait.calculateFps(now); if (snailBait.windowHasFocus && !snailBait.paused && snailBait.showSlowWarning && now - snailBait.lastSlowWarningTime > snailBait.FPS_SLOW_CHECK_INTERVAL) { snailBait.checkFps(now); } snailBait.draw(now); requestNextAnimationFrame(snailBait.animate); } }, checkFps: function (now) { var averageSpeed; this.updateSpeedSamples(snailBait.fps); averageSpeed = this.calculateAverageSpeed(); if (averageSpeed < this.runningSlowlyThreshold) { this.revealRunningSlowlyWarning(now, averageSpeed); } }, ... }; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | SnailBait.prototype = { ... updateSpeedSamples: function (fps) { this.speedSamples[this.speedSamplesIndex] = fps; if (this.speedSamplesIndex !== this.NUM_SPEED_SAMPLES-1) { this.speedSamplesIndex++; } else { this.speedSamplesIndex = 0; } }, calculateAverageSpeed: function () { var i, total = 0; for (i=0; i < this.NUM_SPEED_SAMPLES; i++) { total += this.speedSamples; } return total/this.NUM_SPEED_SAMPLES; }, ... }; |
1 2 3 4 5 6 7 8 9 10 | snailBait.slowlyDontShowElement.onclick = function (e) { snailBait.hideRunningSlowlyWarning(); snailBait.showSlowWarning = false; }; snailBait.slowlyOkayElement.onclick = function (e) { snailBait.hideRunningSlowlyWarning(); snailBait.speedSamples = [60,60,60,60,60,60,60,60,60,60]; // reset }; |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |