Androidブラウザは1秒のマウス操作で、長時間無効/マウスアップを保持します

Question

HTML5キャンバスでワンタッチゲームを構築しようとしています。これは、このチュートリアルの助けを借りて作られたランニングゲームです：

http://blog.sklambert.com/html5-game-tutorial-game-ui-canvas-vs-dom/

私はマウスクリックにスペースバーから既存のコントロールを変更しました。これは、Androidデバイスのモバイルブラウザを除くすべてのプラットフォームで完全に動作します。

Android搭載端末では、タッチによりユーザーがジャンプします。タッチが長時間保持されている場合、タッチが離されてもユーザーはジャンプし続けます。この問題は、iPhone、iPad、またはデスクトップでは発生しません。

Javascript機能を使用して、一定時間（数秒）マウスを切っても問題ありませんか？次のようなものがありますか。

if(mousedown for 1sec) 
    mouseup; 

別のアプローチが考えられるかどうか教えてください。

Answer 1

タッチ対応デバイスの場合、マウスではなくタッチイベントを使用できます。参照してください：

function is_touch_device() { 
    /* Function code taken from http://stackoverflow.com/a/4819886/3946520 */ 
    return 'ontouchstart' in window  // works on most browsers 
     || navigator.maxTouchPoints;  // works on IE10/11 and Surface 
}; 

if(is_touch_device()) { 
    canvas.addEventListener('touchstart', handleTouchStart, false); 
    canvas.addEventListener('touchend', handleTouchEnd, false); 
} 
else { 
    // Bind Mouse Events 
} 

function handleTouchStart(e) { 
    // This code runs when user touches the canvas i.e. on touch start 
} 

function handleTouchEnd(e) { 
    // This code runs when user removes finger from canvas i.e. on touch end 
} 

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Eventsはまた、ユーザがキャンバスの上に2本以上の指を置くシナリオがあることに注意してください。それぞれが「タッチスタート」イベントを発射します。だからあなたはそれを処理しなければならないでしょう。 http://www.javascriptkit.com/javatutors/touchevents.shtmlを参照すると、タッチイベントに関する優れたチュートリアルが得られます。