スワイプによる入力を行うためには、直前までのポインタ座標を退避しておく必要があります。

　画面枠をスワイプさせることでエンジュアンが移動するサンプルです。

• 直接移動量
  スワイプで移動した分だけ移動します。
• 間接移動量
  スワイプ開始点から現在点までのベクトル分だけ移動し続けます。

　今回のサンプルは画面が常時動き続けるため、blurイベントを受け取った、または枠外がタッチされたとき動作を停止しています。枠内をタッチすることで再開します。

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var frame = document.getElementById("frame");
var chara = { node:document.getElementById("chara"), x:144, y:80, count:0 };
var point = { x:0, y:0, lx:0, ly:0, id:-2, bDown:false };
var nodePoint0 = document.getElementById("point0");
var nodePoint1 = document.getElementById("point1");
var nodeType = document.getElementById("type");
var bActive = true;
var width = parseInt(frame.style.width) || 320;
var height = parseInt(frame.style.height) || 192;
initialize();

function initialize()
{
	// イベント登録
	if(window.PointerEvent)
	{
		document.addEventListener("pointerdown", onPress, false);
		document.addEventListener("pointermove", onPress, false);
		document.addEventListener("pointerup", onRelease, false);
		document.addEventListener("pointerleave", onRelease, false);
		document.addEventListener("pointercancel", onRelease, false);
	}else
	{
		document.addEventListener("touchstart", onPress, false);
		document.addEventListener("mousedown", onPress, false);
		document.addEventListener("touchmove", onPress, false);
		document.addEventListener("mousemove", onPress, false);
		document.addEventListener("touchend", onRelease, false);
		document.addEventListener("touchcancel", onRelease, false);
		document.addEventListener("mouseup", onRelease, false);
		document.addEventListener("mouseleave", onRelease, false);
	}
	frame.addEventListener("selectstart", function(event){ event.preventDefault(); }, false);
	frame.addEventListener("contextmenu", function(event){ event.preventDefault(); }, false);
	window.addEventListener("blur", function(event){ bActive = false; }, false);
	if(requestAnimationFrame){ requestAnimationFrame(onAnimationFrame) }else{ setInterval(onInterval, 16); }
}
// ポインタイベント
function onPress(event)
{
	var it, ip, id, rect;
	rect = frame.getClientRects()[0];
	if(event.touches)
	{
		for(it=0; it<event.touches.length; it++){ onPress(event.touches[it]); }
		return;
	}
	point.x = (event.clientX - rect.left) * width  / rect.width;
	point.y = (event.clientY - rect.top ) * height / rect.height;
	id = event.pointerId != undefined ? event.pointerId : (event.identifier != undefined ? event.identifier:-1);
	if(point.id != id)
	{
		if(event.type == "pointermove" && event.pointerType == "mouse" || event.type == "mousemove"){ return; }
		if(event.target == frame || event.target.parentNode == frame)
		{
			point.id = id;
			point.bDown = true;
			point.lx = point.x;
			point.ly = point.y;
			bActive = true;
		}else
		{
			bActive = false;
		}
	}
}
function onRelease(event)
{
	point.id = -2;
	point.bDown = false;
}
// 定期処理
function onAnimationFrame(){ onInterval(); requestAnimationFrame(onAnimationFrame); }
function onInterval()
{
	var typeSwipe = nodeType.selectedIndex;
	if(!bActive){ return; }
	if(point.bDown)
	{
		if(typeSwipe == 0)
		{
			chara.x += point.x-  point.lx; point.lx = point.x;
			chara.y += point.y - point.ly; point.ly = point.y;
		}else
		{
			chara.x += (point.x-  point.lx) * 0.1;
			chara.y += (point.y - point.ly) * 0.1;
		}
		if(chara.x <   0){ chara.x =   0; }
		if(chara.x > 288){ chara.x = 288; }
		if(chara.y <   0){ chara.y =   0; }
		if(chara.y > 160){ chara.y = 160; }
		chara.count += 3;
	}
	if(!point.bDown || typeSwipe == 0)
	{
		nodePoint0.style.display = "none";
		nodePoint1.style.display = "none";
	}else
	{
		nodePoint0.style.display = "";
		nodePoint0.style.left = point.lx-8 + "px";
		nodePoint0.style.top  = point.ly-8 + "px";
		nodePoint1.style.display = "";
		nodePoint1.style.left = point.x-8 + "px";
		nodePoint1.style.top  = point.y-8 + "px";
	}
	chara.count++;
	chara.node.style.left = chara.x + "px";
	chara.node.style.top  = chara.y + "px";
	chara.node.style.backgroundPosition  = ((chara.count>>5)&1) ? "-231px -132px" : "-198px -132px";
}