2010-05-04 60 views
3

我正在用HTML5构建一个小游戏。画布元素是进入游戏世界的视口。用户可以通过点击鼠标并拖动一个小图标来移动视口在世界上的位置。使用jQuery拖动的固定鼠标指针

问题是,当鼠标指针碰到屏幕边缘时,滚动停止。很可能,这会严重限制滚动方向之一,因为图标将位于页面的某个角落。

我能想到的唯一技术解决方案是以某种方式修复鼠标指针在图标上的位置并检测每个框架的相对移动。基本上,我会在每次拖动事件后将指针位置重置回图标的中心。不幸的是,我相当肯定这是不可能的。从可用性和安全角度来看,玩用户指针是一个很大的难题。

那么,有没有其他的方式来做我想要的?我主要在这里寻找技术想法,但对更合适的界面的建议也是受欢迎的。

回答

4

三种可能的解决方案:

  1. 移动这个 “摇杆” 图标100个像素角落落的。给它不透明度,直到它被徘徊。点击并拖动移动“延续”,以便点击并拖动并保持距操纵杆中心40个像素的光标会导致连续的屏幕平移。

  2. 使用箭头,类似于Google Maps。 (您也可以通过将手持部件更改为“操纵杆”部件将其与第一种解决方案结合使用。)

  3. 做一些完全不同的事情。例如,当光标接近四个边中的任何一个时,让屏幕平移。

+0

我喜欢选项3最好。当您靠近边缘时,滚动速度可能会增加。我可能希望将它与鼠标单击组合在一起,以防止用户将指针移动到另一个应用程序时发生疯狂滚动。选项1会使视口的中心稍稍凌乱,选项2可能会消除“游戏”的感觉,尽管两者都有效。 – MikeWyatt 2010-05-04 02:17:01

+0

我只是重新阅读你的答案,而选项1似乎比我原先想象的要好得多。我显然掩盖了整个“维持点击,拖动和保持滚动”的想法。我昨天晚上实施了选项3,它运行得非常好,但我可能只是今晚尝试#1并比较两者。 – MikeWyatt 2010-05-04 19:08:35

+0

很酷。不知道为什么我之前没有提到它,但Bing Maps(http://www.bing.com/maps/)实际上是1和2的组合。(它的实现非常灵活。) – Adam 2010-05-10 23:28:58