タッチ判定(CANVAS)2020/08/14

 CANVAS上の任意の場所をタッチしたとき、どの位置に当たるのかを算出します。

 タッチした場所までリトルが歩いていくサンプルです。歩く動作は真面目に実装していません。

 pointerdownイベントで、clientXclientYを受け取ります。getClientRects()で取得した矩形を使用して正規化し、CANVAS上の座標へと変換します。
// イベント追加
if(window.PointerEvent)
{
	frame.addEventListener("pointerdown", onPress, false);
}else
{
	frame.addEventListener("touchstart", onPress, false);
	frame.addEventListener("mousedown", onPress, false);
}

// イベント処理
function onPress(event)
{
	var rect = canvas.getClientRects()[0];
	var x = (event.clientX-rect.left) * canvas.width  / rect.width ;
	var y = (event.clientY-rect.top ) * canvas.height / rect.height;
	/*
	押下時の処理
	*/
}