6

I'm a web developer who is trying to know more about game development.

I've started trying to make Pong using canvas, just to see how far I can go (and what I can learn along the way).

I have heard a lot about the game loop but being a novice was not sure how it applies to Pong. I figured it would be something like a setInterval() that changes the game's state as it runs (ball movement, enemy position, etc).

I have also created two objects, Paddle and Ball, but looked at implementing the bouncing inside one of Ball's methods. I'm not sure if that is right.

What I want to know is am I on the right track? What suggestions would you have to my code in terms of layout/structure (and any recommended reading)?

Most of the articles I found regarding JavaScript game development were horribly outdated or didn't deal with canvas; only animating DOM elements.

alex
  • 763
  • 1
  • 9
  • 17

2 Answers2

7

This is a very common problem. To solve it right you need to make sure the game time and the game framerate are not dependent (you don't want all you game elements to move slowly if the framerate is low and faster if it's high). From my point of view setInterval will not be efficient. Here is what I suggest:

You need to have three methods in your game: main (that we will try to run 60 times per seconds), update (that will update elements positions) and draw (that will display all the elements) and a variable to store the current time. Initialize your currentTime variable to now then start your main method.

Here is what your main method should do:

  • compute the time elapsed since the last execution of the main method (timeElapsed = now - currentTime)
  • reset the current time variable (currentTime = now)
  • run the update method with timeElapsed has argument
  • run the draw method
  • compute the time elapsed since we started the main method (timeElapsed = now - currentTime)
  • compute the time wee need to wait before running again the main method for an expected framerate of 60 frame per seconds (timeout = 1000 / 60 - timeElapsed)
  • prevent this time from being less than zero (timeout = timeout < 0 ? 0 : timeout)
  • schedule the next execution of the main method using setTimeout: setTimeout(main, tiemout)

Then in your update method multiply every translations operations by the elapsedTime variable passed has argument (x = x + speed * elapsedTime). This way, if the ball has a speed of 1.6 it will always move 96 pixel per seconds even if the framerate too is slow or too high.

This way you make sure the game run at (almost) exactly 60 fps all the time and that you elements moves at the right speed even if the framerate changes for some reason.

Implementing the bounce logic within your Ball class is up to you. Try to write your game step by step and do not hesitate to change and move your code so it always looks simple. There is no "right way" to do it. I suggest you give a look to this project (a nice javascript pong game but without canevas). It does implement the loop method described above. You can also test it here.

I hope this help ! Good luck !

XPac27
  • 458
  • 3
  • 7
  • 1
    I would also recommend calculating delta time (ie. the time elapsed since last cycle) so using setInterval or setTimeout to do the looping amounts to the same thing. Don't assume setInterval is giving you a consistent framerate; it's more of a target framerate than the actual framerate. – jhocking Apr 27 '11 at 14:16
  • 1
    Exactly. setInterval wont be linear and anything else wont every be perfectly linear so delta time calculation is required. I handle it in the 1st step of the main loop above. – XPac27 Apr 27 '11 at 14:20
4

Yes you're on the right track. In some languages the main loop is written with an explicit "while" loop, but in many languages you want to hook into a built in main loop using an event listener or callback. JavaScript is the latter.

jhocking
  • 15,786
  • 2
  • 43
  • 59