fix for gamespeed issues

Author: jpcerone

src/main/resources/static/js/game.js

@@ -5,12 +5,15 @@ var elem = document.body;
 var two = new Two(params).appendTo(elem);
 var FRAMERATE = 30 / 1000; // This is like 30fps
 
+var refreshRate = getRefreshRate();
+var frameInterval;
+
 var textFontFamily = "'Courier New', monospace";
 
 var audioElementMusic = document.createElement('audio');
 audioElementMusic.setAttribute('src','sound/music2.mp3');
 audioElementMusic.loop = true;
-audioElementMusic.playbackRate = 1.11111111; //get to 143.5 bpm
+audioElementMusic.playbackRate = .99; //get to 133.8
 
 
 var testText = "Failure is not the end; it's a detour on the road to success. Everyone stumbles and falls along the way, but what truly matters is how you respond. Instead of letting setbacks discourage you, view them as valuable learning experiences. Analyze what went wrong, extract the lessons, adjust your approach, and keep moving forward with renewed determination. Remember, every successful person has encountered failure at some point. It's through these challenges that we grow stronger, wiser, and more resilient.";
@@ -84,7 +87,9 @@ var hits = 0;
 
 var startTime;
 
-var gameIntervalId = 0;
+var stopRepeat;
+
+var animationFrameCounter = 0;
 
 
 two.bind('update', update);
@@ -141,7 +146,6 @@ function update(frameCount) {
         groupText.position.set(cx-moddedGameSpeed,cy);
     }else{
         audioElementMusic.pause();
-        clearInterval(gameIntervalId);
         document.getElementById("highScoreSubmit").style.display = 'block';
     }
 }
@@ -177,10 +181,7 @@ function startGame(){
     startScreenPopup.style.display = 'none';
     audioElementMusic.play();
     startTime = new Date().getTime();
-    gameIntervalId = setInterval(function() {
-      two.update();
-    }, FRAMERATE);
-
+    gameTimerLoop();
 }
 
 function phoneHome(){
@@ -198,6 +199,38 @@ function newGame(){
     });
 }
 
+function gameTimerLoop() {
+    if(animationFrameCounter == frameInterval){
+        two.update();
+        animationFrameCounter = 0;
+    }
+    animationFrameCounter++;
+
+    requestAnimationFrame(gameTimerLoop);
+}
+
+function getRefreshRate() {
+    let frameCount = 0;
+    let startTime = performance.now();
+    let refreshRate = 0;
+
+    function measureFrame() {
+        frameCount++;
+        let currentTime = performance.now();
+        if (currentTime - startTime > 1000) {
+            refreshRate = frameCount;
+            console.log("Refresh Rate: " + refreshRate + " Hz");
+            frameInterval = Math.round(refreshRate/60);//trying to hit 60 frames
+            document.getElementById("playBtn").removeAttribute("disabled");
+            return refreshRate;
+        }
+        requestAnimationFrame(measureFrame);
+    }
+
+    measureFrame();
+}
+
+
 document.addEventListener('keydown', function(event) {
   var key = event.key;
   if(key == " "){

src/main/resources/templates/home.html

@@ -13,7 +13,7 @@
 <!-- Start Screen Popup -->
 <div id="startScreenPopup" class="start-menu">
   <h1>Welcome to Falling Type!</h1>
-  <button class="play-btn" onclick="startGame()">Play</button>
+  <button type="button" id="playBtn" class="play-btn" onclick="startGame()" disabled>Play</button>
   <a href="highscores"> Leaderboard </a>
 </div>