намудрил ты, да)
во-первых, отдели мух от котлет: игровой мир (структуры данных, "физические координаты" и прочее) и визуальный мир (то что видят игроки).
то есть, условно, сервер тебе присылает структуру вида
{
gameState: 'active',
// ...
players: [
{ name: 'First', positionX: 10, positionY: 20 },
{ name: 'Second', positionX: 30, positionY: 35}
]
}
а тебе надо всё это вывести на экран.
для этого напиши функцию, которая будет "физические" координаты переводить в экранные.
грубо говоря, позиция (10;20) в физическом мире это (170;180) в экранном, так что функция будет выглядить типа так:
function Phisic2Screen(player) {
return {
screenX: player.positionX * 1 + 70,
screenY: player.positionY * 9
};
}
во-вторых, если игра в реальном времени, а не пошаговая, то надо немного хитрить.
смотри - "по-хорошему" когда игрок нажимает стрелку вверх, клиент должен послать серверу сообщение об этом, сервер должен его обработать и прислать новый снапшот состояния игры, в котором игрок переместился вверх. на практике это приведёт к задержке и дёрганиям (пока запрос уйдёт, пока сервер ответит..).
поэтому как только запрос ушёл, сразу начинай отрисовывать анимацию (чтобы игрок не видел никаких задержек) - но будь аккуратен, делай доп. проверки - вдруг запрос не дойдёт - и тогда у игрока на экране будет одно, а на сервере совсем другое.
к слову, в интерактивном режиме лучше пользоваться не аяксом, а веб-сокетами.
не знаю, об этом ли ты спрашивал, очень уж всё изложено сумбурно. так что уточняй вопрос, помогу если что.