私のコードでタッチコントロールを実装する方法は？

Question

どのように私は私のfuntion moveBloco（）タッチを介して白いバーを制御するために置く。

スマートフォンユーザーのために白いバーをタッチできるようにしたいと考えています。タッチでバーを上下に移動する。あなたはTouchEventsを使用してタッチを処理する必要が

function moveBloco(){ 
     if(87 in keyBoard && left.y > 0) 
      left.y -= left.speed; 
     if(83 in keyBoard && left.y + left.altura < canvas.height) 
      left.y += left.speed; 
     if(38 in keyBoard && right.y >0) 
      right.y -= right.speed; 
     if(40 in keyBoard && right.y + right.altura < canvas.height) 
      right.y += right.speed; 
    }; 

https://jsfiddle.net/bd7v016e/1/

Answer 1

。 touchstart、touchmove、およびtouchendに対応する3つのイベントリスナーを追加する必要があります。タッチの場合、pageXとpageYを得ることができます。これらをカンバスに相対的な位置に変換し、バーを上下に動かすロジックを適用する必要があります。

document.addEventListener("touchstart", handleTouchStart, false); 
document.addEventListener("touchend", handleTouchMove, false); 
document.addEventListener("touchend", handleTouchEnd, false); 

var touchPosition = { 
    x: 0, 
    y: 0 
}; 

function handleTouchStart(e) { 
    e.preventDefault(); 
    touchPosition.x = e.changedTouches[0].pageX; 
    touchPosition.y = e.changedTouches[0].pageY; 
    var canvasPosition = canvas.getBoundingClientRect(); 
    if (touchPosition.x - canvasPosition.left > canvas.width/2) { 
     // Trigger Right Bar 
     if (touchPosition.y - canvasPosition.top > right.y) { 
      // Move Down the Right Bar 
     } 
     else { 
      // Move Up the Right Bar 
     } 
    } 
    else { 
     // Trigger Left Bar and apply same logic as above 
     if (touchPosition.y - canvasPosition.top > right.y) { 
      // Move Down the left bar 
     } 
     else { 
      // Move Up the left bar 
     } 
    } 
} 

function handleTouchMove(e) { 
    // Handle When User drags along the touch point 
} 

function handleTouchEnd(e) { 
    // Handle Touch End 
}