Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   canvas animation (synchronized with the server) (https://javascript.ru/forum/misc/33563-canvas-animation-synchronized-server.html)

Simulator 27.11.2012 19:56

canvas animation (synchronized with the server)
 
Приветствую!
Я уже задавал подобный вопрос, мне на него ответили, но к сожалению я, вероятно, неправильно интерпретировал полученные сведения :cray:
приходится повторятся. Ткните пожалуйста носом, где ошибка.

http://learn.javascript.ru/js-animation - изучил. проблема все еще не решается(

собственно: Пытаюсь рисовать изображения в canvas, используя координаты полученные с сервера, однако в любом случае наблюдаются лаги.

Описание: для рисование везде используется requestAnimationFrame. Обновления приходят раз в 100 миллисекунд через WebSockets.
ссылки на демонстрацию:
http://159.253.23.45:8080/tanksWebApp/
http://159.253.23.45:8080/TanksLogicOnSpeed/

успел попробовать 3 разные техники:
1)
this.x += this.speedX * delta;

где x - текущие координаты, delta - время между текущим вызовом requestAnimationFrame и последним.
скорость на сервере и на клиенте проставлена одинаковая.
так обновляются ракеты в первой ссылке
2)
this.drawX=this.latest_x_from_server+Math.round(this.speedX*numberOfMillisecondsFromLustUpdateFromServer);

фактически тоже самое, но сам x не меняется, а numberOfMillisecondsFromLustUpdateFromServer - время от последнего апдейта с сервера, а не между вызовами requestAnimationFrame.
так обновляются танки во второй ссылке.
3)
var progress  = (new Date().getTime() - this.start.getTime())/100;
    //   if(progress>1) {progress=1;}
    var drawX = this.oldX+(this.x-this.oldX)*progress;

100 - промежуток между рассылками новых апдейтов сервером.
метод апдейта танка в этом случае
Tank.prototype.updateTank = function (x, y, direction) {
    this.oldX=this.x;
    this.oldY=this.y;
    this.x = x;
    this.y = y;
    this.direction = direction;
    this.start=new Date();
    this.isAlive = true;
};

так обновляются танки в первой ссылке

На локальной машине все это работает прекрасно, но на хостинге
во всех трех случаях : лаги, лаги и еще больше лагов.
и все еще никак не могу понять : где я не прав?

Спасибо.


Часовой пояс GMT +3, время: 01:31.