tl;dr
2番目のキャンバス要素を表示すると、ユーザーのタッチが失われます-ユーザーが画面に再度タッチする必要はありません
私は HTML5 Canvas ゲームを構築しています (ゲームは画像を表示し、それをパズルのピースにスライスし、ユーザーがピースを再び組み立てられるようにランダムな順序でピースを表示します)。
ソース コード (私の開発ブランチ用) は次の場所で確認できます。
https://github.com/Integralist/HTML5-Image-Slider-Game/tree/dragdrop
このゲームの重要な部分の 1 つは、ユーザーがパズルのピースをクリックすると、選択したピースがパズル内の利用可能なスペースに移動することです。ユーザーがクリックを数ミリ秒以上保持している場合、選択したパズルのピースが自動的に移動するのではなく、ドラッグしたいと考えています。
これを行う方法は、元のキャンバスの上に別のキャンバスを配置することです。この 2 番目のキャンバスは、「ドラッグ アンド ドロップ」機能にのみ使用されます。私がこの方法をとった理由は、そうでなければ、パズルのピースをドラッグしているときに、現在のパズルの状態を保存してから、常に再描画する必要があったためです。これは、パフォーマンス上の理由からやりたくないことでした。
私がこれまでに得たものは、マウスベースのコンピューターで正常に動作します.2番目のキャンバスにドラッグするピースを設定した後、発生してユーザーがキャンバスの周りにピースをドラッグできるようにするmousemoveイベントがあるためです。
私が抱えている問題はタッチ デバイスにあります。mousemove イベントがないため、touchmove イベントを使用していますが、2 番目のキャンバスを表示してドラッグ プロセスを開始すると、もう一度画面に触れて touchmove リスナーをトリガーする必要があります。 . ユーザーに関する限り、デバイスをクリックして指を押したままにしているのでひどいですが、表示されている2番目のキャンバスにより、その指のタッチがフォーカスを失い、今必要なことに少しがっかりするでしょう.画面をもう一度タッチしてドラッグを開始します。
touchmove イベントを手動でトリガーすることで、この問題を回避しようとしましたが、うまくいきませんでした。コード (上記参照) をダウンロードしてタッチ デバイスで試してみると、私の言いたいことがわかるでしょう。なんらかの理由で、パズルのピースがキャンバスの左上隅に突然ジャンプしますか? また、タッチマウスイベントのトリガーを開始するには、もう一度画面に触れる必要があります。
これがほんの小さな問題であり、誰かが本当に巧妙な回避策を持っていることを本当に望んでいます.
前もって感謝します！