JavaScript game loop does not display canvas

Question

In the following code I program a canvas and display a red block that grows in width as the game progresses. It all worked too! Until, I added a simple game loop to my originally (simpler) game loop. The original just updated, rendered, and restarted. The modern newer one Counts ticks and keeps it running at a consistent speed, no matter how fast the computer/browser. Can anyone explain why this is? Here is the plain html to set up everything:

<html>

<head>
  <meta charset="utf-8">
  <title>Christmas Town</title>
  <style>
    canvas {
      display: block;
      position: fixed;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>

</head>

<body>

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

</body>

</html>

And here is the JavaScript which is supposed to create the canvas and Game Loop:

var canvas, context, keyState;
var width = 0;

function tick() {
    "use strict";
    console.log(5 + 6);
    if (width < canvas.getWidth()) {
        width += 1;
    }
}

function render() {
    "use strict";
    context.fillStyle = "#FF0000";
    context.fillRect(canvas.width, canvas.height, 0, 0);
    context.save();
    context.fillRect(width, 15, 0, 0);
    context.restore();
}

function getTimeMillis() {
    "use strict";
    return window.performance && window.performance.now ? window.performance.now : new Date.getTime();
}

var FPS = 60, startTime, dt = 0, lastTime = getTimeMillis(), targetTime = 1 / FPS;
function frame() {
    "use strict";
    startTime = getTimeMillis();
    dt = dt + Math.min(1, ((startTime - lastTime) / 1000));
    while (dt < targetTime) {
        dt -= targetTime;
        tick();
    }
    render();
    lastTime = startTime;
    window.requestAnimationFrame(frame, canvas);
}

function main() {
    "use strict";
    canvas = document.createElement("canvas");
    canvas.width = 500;
    canvas.height = 500;

    context = canvas.getContext("2d");
    document.body.appendChild(canvas);
    window.requestAnimationFrame(frame, canvas);
}

main();

The weird part is it's not even logging to the console, and there are no errors! But, I cant seem to figure out why tick is not being called without there being any errors. Please help!

You've got some brackets missing in a few places. window.performance.now() : new Date().getTime() and startTime = getTimeMillis(); — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Nov 25, 2015 at 16:11
dt is NaN inside frame().. inspect your variable declarations and getTimeMillis() method — Eric Guan
– Eric Guan, Commented Nov 25, 2015 at 16:13
One i'm using brackets as a IDE, thought that was funny...Anyway Changing it now. — Elgin Beloy
– Elgin Beloy, Commented Nov 25, 2015 at 16:13
It turns into NaN when you assign it to "dt + Math.min(1,...". Probably because you're missing brackets at "startTime = getTimeMillis", needs to be getTimeMillis() — Eric Guan
– Eric Guan, Commented Nov 25, 2015 at 16:17

Eric Guan · Accepted Answer · 2015-11-25 16:47:14Z

2

Not sure if this is what you wanted but check it out. https://jsfiddle.net/jnsLfwde/

Couple things i changed.

context.fillRect( 0, 0, width, 15);

The parameters for fillRect are fillRect(x,y,width,height). You had it as (width,height,x,y);

I reversed the less than sign to greater than. Tick() wasn't being called until i did this.

(dt > targetTime)

You mentioned the animation restarting or something so i added this.

if (width < canvas.width) 
    width += 1;
else
    width = 0;

answered Nov 25, 2015 at 16:47

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Elgin Beloy Over a year ago

Thanks so much man. I relatively new if you cant tell XD. Anyway Thank YOU.

Elgin Beloy Over a year ago

Just one more thing. How can I stop dt from turning to NaN but still add it by the min?

Eric Guan Over a year ago

Well the only reason dt = Nan was because you were missing brackets, which caused the javascript to go all crazy. You can do whatever math you'd like on dt, as long as it's valid javascript syntax.

Elgin Beloy Over a year ago

But I added the brackets but im printing it out and it still returns Nan??

Eric Guan Over a year ago

Are you using the code from my fiddle? or did you just try to change your own, because i didn't post every single change i made in my answer. Also your code doesn't work until you implement @Archer's comment.

Collectives™ on Stack Overflow

JavaScript game loop does not display canvas

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related