I wrote a multiplayer pong game, but because of a ~60ms lag my bouncing ball is not moving smoothly. The game itself is available here, but since it works only on chrome, and the site itself is written in my native language (also you obviously need two browsers in order for it to work), here is jsfiddle of the problem:

/

As you can see in the fiddle, dx and dy are defined and the refreshes per second is defined as speed. I need those three variables to remain constant (I know that they are causing the ball to not move smoothly).

Now the question: Are there any tricks to not touch those variables, but make the ball look like it moves smoothly? I was thinking about rendering the new position of the ball + rendering previous position of the ball with 50% opacity, but I have yet to test it. Are there any other solutions to this problem?

I wrote a multiplayer pong game, but because of a ~60ms lag my bouncing ball is not moving smoothly. The game itself is available here, but since it works only on chrome, and the site itself is written in my native language (also you obviously need two browsers in order for it to work), here is jsfiddle of the problem:

http://jsfiddle/yc6Lb/75/

As you can see in the fiddle, dx and dy are defined and the refreshes per second is defined as speed. I need those three variables to remain constant (I know that they are causing the ball to not move smoothly).

Now the question: Are there any tricks to not touch those variables, but make the ball look like it moves smoothly? I was thinking about rendering the new position of the ball + rendering previous position of the ball with 50% opacity, but I have yet to test it. Are there any other solutions to this problem?

• javascript
• jquery
• html
• canvas

Share Improve this question Follow edited Oct 23, 2013 at 19:20 Tim M. 54.4k1414 gold badges124124 silver badges166166 bronze badges asked Oct 23, 2013 at 19:08 ojekojek 10.1k2222 gold badges7474 silver badges116116 bronze badges 6

• 1 Is there a specific reason you don't want to touch the dx, dy, and speed? More frequent updates make for smoother animations. – Jason P Commented Oct 23, 2013 at 19:25
• @JasonP: First of all, in my original app, dx, dy are as small as possible (values 1 and 2). So there's that. Speed cannot be changed because of the lag that is between client and server (about 50ms), and I cannot do anything about that either. So I need some kind of a trick here. – ojek Commented Oct 23, 2013 at 19:31
• 2 What if you were to let the game animate on it's own on the client, and only make changes when necessary to sync with the server? Also, you can make the step smaller than one. – Jason P Commented Oct 23, 2013 at 19:32
• @JasonP: That's something that I would not want to change. But I will try with changing dx and dy to 0.5 and 1 and see what happens. – ojek Commented Oct 23, 2013 at 19:37
• @JasonP has your solution. Pong logic would allow you to let each user do 1 course correction that must be transmitted across the network. After that, the ball's path across the pong field can be automatically calculated and animated entirely on both clients' puters. No more network traffic is required until the other player does their course correction. – markE Commented Oct 23, 2013 at 20:41

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

I think, as @Jason said, that you could have the step as precise as you want in the animation (using animationFrame for instance), and handle separately the issue of getting the remote information.
However, for a quick fix you could use that trick i sometimes use : have a trail/shadow effect by clearing the context2d with lowered opacity.
So the clear function bees :

function clear() {
  cxt.globalAlpha=0.3;
  cxt.fillStyle='#FFFFFF';
  cxt.fillRect(0, 0, WIDTH, HEIGHT);
  cxt.globalAlpha=1;
}

then you must not clear in the draw() function, and call to clear() in the draw loop.

i updated your fiddle :

http://jsfiddle/gamealchemist/yc6Lb/86/

play with the alpha to get the effect you want.

Rq : you might want to clear with full opacity some parts of the screen ( like the score ), and use lower opacity only in the animated part of the canvas.

This is ugly, but here's a FPS reference for you: http://jsfiddle/yc6Lb/84/

Specifically using requestAnimationFrame() and having a FPS counter. Note the performance difference :)

Here's a BEAUTIFUL CODE version: http://jsfiddle/neuroflux/Ey9uz/1/
You're most wele!

You can gain a little bit of performance from not doing your 2*pi calc in every loop. Round it to a static value of 6.28.

You may also want to look at processing.js, which may speed things up.

There's nothing wrong with your math. You should be using requestAnimationFrame. Change your init function so that it looks like this:

function init() {
  window.requestAnimationFrame(init, cxt)
  draw();  
}

Here's a working JSFiddle example

You'll probably also need a polyfill for requestAnimationFrame to get it working on all browsers.