Game Loop Problem

[KulerDuder]

Hi there! I am trying to do a very simple game, but before I continue developing it, I need to get something important right: the game loop. I will leave the link here so you can actually see the game and the code http://kikitosgames.com/dressyourhuman.html

How can I get the gameloop right? There seems to be a problem, I can't get my humanHungerBar to register and log when it gets to 1 and also I have tried everything to loop the game and I can't... can you help me in any way?

[mattstyles]

This article is a really good, clean discussion about the roles and responsibilities of a good game loop. Not all of it is applicable to JS as JS doesn't allow you to create very flexible or powerful game loops but it has a JS/web concern in the article so there are some good general dos/donts.

Most frameworks, like Phaser, handle this for you.

In essence you need some function that recursively calls itself based on some condition (a constant interval is easiest, but you can, and almost certainly should, use requestAnimationFrame in the browser), this sounds more complex than it is i.e.

function loop () {
  console.log('hello')
  requestAnimationFrame(loop)
}

loop()

 This loop will simply log 'hello' every 16ms or so (raf tries to run at 60fps if it can).

From there you'll probably want some way to measure the time that has elapsed between calls and pass that to your update or render functions.

There are many modules that make this time measuring even easier for you, such as this one, although its fairly easy to do yourself:

var loop = require('raf-loop')

function update (dt) {
  ..update the world
}

function render (dt) {
  ..render the world
}

function frame (dt) {
  update(dt)
  render(dt)
}

loop(frame).start()

This is about as simple as you'd go but you'd be surprised at how far this will get you, you could certainly make a wide variety of complete paid games using just this method and this method only.

So, if, for example, you had some sort of counter in the game you'd make sure you call its update method with the elapsed time (delta, dt in the example), it would probably add that time to its own internal variable for tracking time and then you'd call its render method in your render function (where, in this case, you wouldn't need delta) and the counters interval variable would be displayed. Et voila! The counter object would update itself when you call it, it would have access to the elapsed time because you pass it a delta, and you can render it every frame (your first attempt to get fancy would be to NOT re-render it if it has not changed, but, if you use a render library like Pixi then its handled for you, remember that the absolute easiest architecture is to re-render everything every frame, unfortunately this quickly becomes a bottleneck, but you might be surprised how far you can get).