Исправлен указатель мыши с возможностью перетаскивания jQuery.

Я создаю небольшую игру в HTML5. Элемент canvas — это окно просмотра игрового мира. Пользователь может изменить положение области просмотра в мире, щелкнув и перетащив мышь на маленькую иконку.

Проблема в том, что прокрутка останавливается, когда указатель мыши достигает края экрана. Скорее всего, это сильно ограничит прокрутку в одном из направлений, так как иконка будет находиться в одном из углов страницы.

Единственное техническое решение, которое я могу придумать, - это как-то зафиксировать положение указателя мыши на значке и определить относительное движение в каждом кадре. По сути, я бы просто сбрасывал положение указателя обратно в центр значка после каждого события перетаскивания. К сожалению, я вполне уверен, что это невозможно. Играть с указателем пользователя — категорически нельзя с точки зрения удобства использования и безопасности.

Итак, есть ли другой способ сделать то, что я хочу? В первую очередь я ищу здесь технические идеи, но также приветствуются предложения по более подходящему интерфейсу.


person MikeWyatt    schedule 04.05.2010    source источник


Ответы (1)


Три возможных решения:

  1. Переместите этот значок «джойстика» на 100 пикселей за угол. Дайте ему непрозрачность, пока он не будет наведен. Сделайте так, чтобы движения щелчка и перетаскивания «поддерживались», чтобы нажатие и перетаскивание курсора на расстоянии 40 пикселей от центра джойстика вызывало непрерывное панорамирование экрана.

  2. Используйте стрелки, как в Картах Google. (Вы также можете комбинировать это с первым решением, заменив часть ручного захвата на часть «джойстик».)

  3. Сделайте что-то совершенно другое. Например, панорамирование экрана при приближении курсора к любому из четырех краев.

person Adam    schedule 04.05.2010
comment
Мне больше всего нравится вариант 3. Скорость прокрутки может увеличиваться по мере приближения к краю. Я могу совместить это с щелчком мыши, чтобы предотвратить сумасшедшую прокрутку, когда пользователь перемещает указатель на другое приложение. Вариант 1 немного загромоздит центр окна просмотра, а вариант 2 может испортить впечатление от игры, хотя оба варианта также будут работать. - person MikeWyatt; 04.05.2010
comment
Я только что перечитал ваш ответ, и вариант 1 кажется намного лучше, чем я думал изначально. Я, по-видимому, упустил из виду всю идею поддержки прокрутки при нажатии, перетаскивании и удержании. Прошлой ночью я применил вариант 3, и он сработал очень хорошо, но я мог бы просто попробовать вариант 1 сегодня вечером и сравнить два. - person MikeWyatt; 04.05.2010
comment
Прохладно. Не знаю, почему я не упомянул об этом раньше, но Bing Maps (bing.com/maps) на самом деле делает комбинацию 1 и 2. (Его реализация 1 довольно гладкая.) - person Adam; 11.05.2010