Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2016, 20:39
Новичок на форуме
Отправить личное сообщение для Byrger Посмотреть профиль Найти все сообщения от Byrger
 
Регистрация: 07.01.2016
Сообщений: 3

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

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

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

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

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

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

Последний раз редактировалось Byrger, 07.01.2016 в 20:42.
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2016, 23:39
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

// 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
}
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2016, 23:59
Новичок на форуме
Отправить личное сообщение для Byrger Посмотреть профиль Найти все сообщения от Byrger
 
Регистрация: 07.01.2016
Сообщений: 3

Сообщение от Lemme Посмотреть сообщение
Я бы получал координаты мыши и конвертировал их в координаты квадрата на карте.

// 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


Спасибо за то что вы описали, но мне нужно движение в любом направлении, а не только вверх,вних,влево в право. В этом у меня и загвоздка. Как-то через угол надо находить
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2016, 00:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,131

Byrger,
на всякий случай пара вариантов
Прокрутка фона на canvas.
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2016, 00:26
Аватар для Lemme
Профессор
Отправить личное сообщение для Lemme Посмотреть профиль Найти все сообщения от Lemme
 
Регистрация: 15.07.2015
Сообщений: 511

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

if (m.x > p.x && m.y > p.y) {
     // движение по диагонали
}
Ответить с цитированием
  #6 (permalink)  
Старый 09.01.2016, 22:20
Новичок на форуме
Отправить личное сообщение для Byrger Посмотреть профиль Найти все сообщения от Byrger
 
Регистрация: 07.01.2016
Сообщений: 3

Решил проблему
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;
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Движение игрока по стрелкам. Straj Общие вопросы Javascript 4 16.08.2014 00:22
События: движение мыши при нажатой клавише bayah Общие вопросы Javascript 11 18.12.2012 08:18
Кружок прокручивыемый курсором мыши lancer Элементы интерфейса 2 25.12.2011 10:57
Движение объекта за курсором Алексаднр Элементы интерфейса 2 23.10.2011 20:01
движение объектов за курсором по траетории steve Общие вопросы Javascript 1 17.06.2009 15:07