Improve fps adjustment

Author: arkwnet

example/player/js/main.js

@@ -1,5 +1,7 @@
 let x;
-let a = 0;
+let count = 0;
+let second = null;
+let fps = 0;
 
 function setup() {
   x = 330;
@@ -11,9 +13,16 @@ function loop() {
   ajiContext.font = "20pt sans-serif";
   ajiContext.fillStyle = "#fff";
   ajiDrawText("Hello, world!", x, 120);
-  ajiDrawText(a, 10, 30);
+  ajiDrawText(count, 10, 30);
+  ajiDrawText("FPS: " + fps, 10, 60);
   x -= 3;
-  a++;
+  count++;
+  const date = new Date();
+  if (second != date.getSeconds()) {
+    fps = count;
+    count = 0;
+    second = date.getSeconds();
+  }
   if (x < -300) {
     x = 330;
   }

player.js

@@ -6,7 +6,8 @@ Licensed under the MIT License
 
 const AJIPACK_WIDTH = 320;
 const AJIPACK_HEIGHT = 240;
-const AJIPACK_FPS = 34.0;
+const AJIPACK_FPS = 33.0;
+let ajiDrawTime = Date.now();
 let ajiCanvas, ajiContext;
 
 window.onload = function () {
@@ -31,12 +32,14 @@ function ajiInit() {
 }
 
 function ajiMain() {
-  setTimeout(function () {
-    requestAnimationFrame(ajiMain);
+  const ajiNowTime = Date.now();
+  if (ajiNowTime - ajiDrawTime >= 1000 / AJIPACK_FPS) {
+    ajiDrawTime = ajiNowTime;
     if (typeof loop == "function") {
       loop();
     }
-  }, 1000 / AJIPACK_FPS);
+  }
+  requestAnimationFrame(ajiMain);
 }
 
 function ajiDrawText(text, x, y) {