Движение игрока за курсором мыши
 

Привет.

Подскажите в каком направлении думать.
Не знаю как реализовать движение игрока за курсором мыши
Игра написана с помощью Canvas на JS, размер игрового поля 100*100 ячеек массива в котором содержаться объекты.
Игроку выгружается экран 20*20 объектов

При движении вверх,вниз,вправо, влево я просто подгружаю кусок карты относительно начальной точки

Тем самым игрок всегда находится в центре экрана, а двигается карта.
Но нужно управление при котором игрок передвигается за указателем мыши, скорость постоянная, при наведении указателя на игрока перемещения не происходит.

Положение мыши внутри Canvas я ловлю через onmousemove и значения layerX,layerY

Я так понимаю надо вычислить угол относительно положения мышки и центра блока canvas, но что с ним делать дольше я ума не приложу :-?

Я бы получал координаты мыши и конвертировал их в координаты квадрата на карте.

// x,y = e.layerX, e.layerY
// size = размер квадрата, например - 50.
function getCoords(x,y) {
	return {
  	x: Math.floor(x / size),
    y: Math.floor(y / size)
  }
}

Теперь нужно знать в каком квадрате xy находится игрок.

// если игрок всегда находится в центре карты, то это легко получить и опять же конвертировать в координаты.
// допустим игрок находится тут.
var playerCoords = { x: 10, y: 20 };

Передвижение игрока.

canvas.onmousemove = function(e) {
     var coords = getCoords(e.layerX, e.layerY);
     
     // сверяем координаты игрока и координаты мыши, после этого сдвигаем карту в нужное направление.
    
     if (coords.x > playerCoords.x) {
          // move right
     }
     
     //etc
}

Я знаю координаты мыши и координаты игрока.
Он всегда в центре поля. Эта точка X 13 Y 13 или по пикселям 312px*312px


Спасибо за то что вы описали, но мне нужно движение в любом направлении, а не только вверх,вних,влево в право. В этом у меня и загвоздка. Как-то через угол надо находить :-?

Byrger,
на всякий случай пара вариантов
http://javascript.ru/forum/misc/5790...na-canvas.html

Byrger, дак а вчем проблема то?=)

if (m.x > p.x && m.y > p.y) {
     // движение по диагонали
}

Решил проблему

var deg = Math.atan2(target.y, target.x);
var deltaY = 2500 * Math.sin(deg)/ 10000;
var deltaX = 2500 * Math.cos(deg)/ 10000;

player.x = player.x+deltaX;
player.y = player.y+deltaY;