TL;第二canvas要素を表示するDR
は、ユーザのタッチが失われた意味 - 私は、ユーザーが他の要素を重ねるときにtouchmoveイベントトリガーを維持するにはタッチデバイスが必要ですか?
もう一度を画面をタッチする必要はしたくない私は(HTML5のCanvasゲームを構築していますゲームは画像を表示し、それをパズルピースにスライスし、ユーザがそのピースを再び一緒に戻す準備ができているランダムな順序でピースを表示する)。
(私の開発ブランチのための)ソースコードはここで見ることができます:
https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop
ゲームの一つの重要な部分は、ユーザーが一枚選択した後、パズルのピースをクリックした場合は、いずれかに移動していることですパズルの利用可能なスペース。ユーザーが数ミリ秒以上クリックしていると、自動的に動くのではなく、選択したパズルピースをドラッグしたいと思います。
私がこれを行う方法は、元のキャンバスの上に別のキャンバスを置くことです。この2番目のキャンバスはドラッグ&ドロップ機能のためにのみ使用されています。私がこのルートに行った理由は、パズルピースをドラッグしている間に、現在のパズル状態を保存してから、それを絶えず再描画する必要があるからです。パフォーマンス上の理由からしたくないものでした。
これまでのところ、マウスベースのコンピュータでうまくいきました.2番目のキャンバスにドラッグするように設定した後、私はmousemoveイベントが発生し、ユーザーはキャンバスの周りをドラッグできます。
タッチデバイスでmousemoveイベントが発生していないため、私はtouchmoveイベントを使用していますが、2番目のキャンバスを表示してドラッグプロセスを開始すると、再び画面に触れる必要がありますタッチ移動リスナーをトリガーします。ユーザーがクリックして自分のデバイスで指を押さえているが、表示されている2番目のキャンバスが指のタッチにフォーカスを失わせてしまったので、ユーザーが恐ろしいことが懸念される限り、彼らは現在、再び画面に触れてドラッグを開始します。
これを回避するには、手動でtouchmoveイベントをトリガしていましたが、これはうまくいきませんでした。コードをダウンロードして(上記を参照)、これをタッチデバイスで試してみると、私の言いたいことがわかります。何かの理由でパズルピースが突然キャンバスの左上に飛びますか? touchmouseイベントがトリガを開始するためには、画面に再び触れる必要があります。
私は本当にこれがちょっとした問題だと思っています。誰かがそれについて本当に巧妙な作業をしています。
ありがとうございます!