0

So I've been working on a small game project in js for a few months now, and I've realized that the way I've structured my game loop doesn't allow for the game to jump ahead a frame if there is lag.

This means that if the game uses up the cpu, it will start to slow down and run slower, rather than just skipping frames

This is the way I implemented it

<script src="./processing.js"></script>


<script>
    var canvas = document.getElementById("mycanvas"),
    ctx = canvas.getContext("2d");

    var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(2560, 1800); 
        frameRate(30);

        var draw = function(){
           runGame();
        }
        
     }}

    var canvas = document.getElementById("mycanvas"); 
    var processingInstance = new Processing(canvas, sketchProc);

I now know that the better way to do this is to calculate how much time has passed between every loop, and then passing that value into the game update function, Eg

tFrame = calculateTimeframe();
updateGame(tFrame);

However, I didn't realize this when I started the project. Meaning that nothing is structured in a way that will allow me to update this.

Is there any way for me to fix this without manually rewriting thousands of lines of code?

(also I am using the processing.js library for this, I know it is outdated, im looking into swapping to p5js in the future)

Dr. Slate
  • 31
  • 4
  • I recommend reading http://gameprogrammingpatterns.com/game-loop.html – elclanrs Jul 19 '21 at 00:14
  • [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is the best function for making some sort of update loop these days. It syncs up with the internal browser redraws as well as providing a delta time amongst other things. – Luke Briggs Jul 19 '21 at 00:29

0 Answers0