tl;博士
显示第二个画布元素意味着用户的触摸丢失 - 我不希望用户再次触摸屏幕
我正在构建一个 HTML5 Canvas 游戏(游戏显示一张图片,将其切成拼图块,然后以随机顺序显示这些块,以便用户将这些块重新组合在一起)。
源代码(我的开发分支)可以在这里看到:
https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop
游戏的一个关键部分是,如果用户点击一块拼图,那么选定的一块就会移动到拼图中的任何可用空间中。如果用户按住他们的点击超过几毫秒,我假设他们想要拖动他们选择的拼图而不是自动为他们移动。
我这样做的方法是在原始画布上放置另一个画布。这第二张画布仅用于“拖放”设施。我走这条路的原因是,否则,在拖动我的拼图时,我需要存储当前的拼图状态,然后不断地重新绘制它——出于性能原因,我不想这样做。
到目前为止,我在基于鼠标的计算机上工作得很好,因为在我设置要在第二个画布上拖动的部分后,我有一个 mousemove 事件,它只会触发并让用户在画布周围拖动部分。
我遇到的问题是在触摸设备上,因为没有 mousemove 事件,我正在使用 touchmove 事件,但是当我显示第二个画布并开始拖动过程时,我必须再次触摸屏幕才能触发 touchmove 监听器. 就用户而言,这很糟糕,因为他们在设备上单击并按住手指,但是显示的第二个画布导致手指触摸失去焦点,因此他们会有点失望,因为他们现在需要再次触摸屏幕开始拖动。
我尝试通过手动触发 touchmove 事件来解决此问题,但这不起作用。如果您下载代码(见上文)并在触摸设备上尝试此操作,您就会明白我的意思。拼图不知为何突然跳到画布的左上角?并且仍然需要我再次触摸屏幕才能开始触发触摸鼠标事件。
我真的希望这只是一个小问题,并且有人有一个非常聪明的解决方法。
提前致谢!