☰

Greasy Fork 还支持 简体中文。

FPS Counter WebGame

FPS Counter (On the popular HTML5 games provider)

  1. /*
  2.   The purpose of this script is just to provide a simple FPS counter for those
  3.   wondering more about their browser's performance. This user script was made
  4.   with html5 canvas games in mind.
  5.  
  6.   Author: Jonathan Cooper (github.com/drowsysaturn)
  7. */
  8.  
  9. // ==UserScript==
  10. // @name         FPS Counter WebGame
  11. // @namespace    http://github.com/indra87g
  12. // @version      0.1
  13. // @description  FPS Counter (On the popular HTML5 games provider)
  14. // @author       indra87g
  15. // @match      http://y8.com
  16. // @match      https://gamesnacks.com
  17. // @grant        none
  18. // @license MIT
  19. // ==/UserScript==
  20.  
  21. (function() {
  22.   var UPDATE_DELAY = 700;
  23.  
  24.   var lastUpdate = 0;
  25.   var frames = 0;
  26.  
  27.   var displayElement = document.createElement("div");
  28.   displayElement.style.padding = "5px";
  29.   displayElement.style.font = "16px Roboto";
  30.   displayElement.style.display = "block";
  31.   displayElement.style.position = "fixed";
  32.   displayElement.style.top = "0px";
  33.   displayElement.style.left = "0px";
  34.   displayElement.textContent = "Calculating...";
  35.   document.body.appendChild(displayElement);
  36.  
  37.   function cssColorToRGB(color) {
  38.     var values;
  39.  
  40.     if (color.startsWith("rgba")) {
  41.       values = color.substring(5, color.length - 1).split(",");
  42.     } else if (color.startsWith("rgb")) {
  43.       values = color.substring(4, color.length - 1).split(",");
  44.     } else if (color.startsWith("#") && color.length === 4) {
  45.       values = [];
  46.       values[0] = "" + parseInt("0x" + color.substr(1, 1));
  47.       values[1] = "" + parseInt("0x" + color.substr(2, 1));
  48.       values[2] = "" + parseInt("0x" + color.substr(3, 1));
  49.     } else if (color.startsWith("#") && color.length === 7) {
  50.       values = [];
  51.       values[0] = "" + parseInt("0x" + color.substr(1, 2));
  52.       values[1] = "" + parseInt("0x" + color.substr(3, 2));
  53.       values[2] = "" + parseInt("0x" + color.substr(5, 2));
  54.     } else {
  55.       return {r : 255, g : 255, b : 255};
  56.     }
  57.  
  58.     return {
  59.       r : Number(values[0]),
  60.       g : Number(values[1]),
  61.       b : Number(values[2])
  62.     };
  63.   }
  64.  
  65.   function getInvertedRGB(values) {
  66.     return "rgb(" + (255 - values.r) + "," + (255 - values.g) + ","
  67.       + (255 - values.b) + ")";
  68.   }
  69.  
  70.   function getOpaqueRGB(values) {
  71.     return "rgba(" + values.r + "," + values.g + "," + values.b + ",0.7)";
  72.   }
  73.  
  74.   function updateCounter() {
  75.     var bgColor = getComputedStyle(document.body, null).getPropertyValue(
  76.       "background-color");
  77.     var bgColorValues = cssColorToRGB(bgColor);
  78.     var textColor = getInvertedRGB(bgColorValues);
  79.     var displayBg = getOpaqueRGB(bgColorValues);
  80.     displayElement.style.color = textColor;
  81.     displayElement.style.background = displayBg;
  82.  
  83.     var now = Date.now();
  84.     var elapsed = now - lastUpdate;
  85.     if (elapsed < UPDATE_DELAY) {
  86.       ++frames;
  87.     } else {
  88.       var fps = Math.round(frames / (elapsed / 1000));
  89.       displayElement.textContent = fps + " FPS";
  90.       frames = 0;
  91.       lastUpdate = now;
  92.     }
  93.  
  94.     requestAnimationFrame(updateCounter);
  95.   }
  96.  
  97.   lastUpdate = Date.now();
  98.   requestAnimationFrame(updateCounter);
  99. })();