jsocol · November 13, 2012 18:13
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <title>Multitouch Test</title>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <meta name="apple-mobile-web-app-capable" content="yes">

 <style>
 html, body {
  background-color: #000;
  color: #fff;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
 }

 #output {
  height: 70%;
 }

 #input {
  height: 30%;
  position: relative;
 }

 #input div {
  background-color: #fcc;
  height: 120px;
  position: absolute;
  bottom: 5px;
  width: 120px;
 }

 #dpad {
  border-radius: 50%;
  left: 5px;
 }

 #fire {
  border-radius: 0 100% 100% 0;
  right: 5px;
 }

 #ship {
  background-color: #fff;
  height: 10px;
  left: 0;
  position: absolute;
  top: 0;
  width: 20px;
 }
 </style>

 <div id="ship"></div>

 <div id="output">
  <div id="direction"></div>
  <div id="pulse"></div>
 </div>


 <div id="input">
  <div id="dpad">&nbsp;</div>
  <div id="fire">&nbsp;</div>
 </div>

 <script>
 var $ = function(sel) {
  return document.querySelectorAll(sel);
 }
 var outDir = $("#direction")[0];
 var outPulse = $("#pulse")[0];
 var dpad = $("#dpad")[0];
 var fire = $("#fire")[0];
 var ship = $("#ship")[0];

 function p(e) { e.preventDefault(); }

 var dpadZero = (function(cur) {
  var x = cur.clientWidth / 2;
  var y = cur.clientHeight / 2;
  while (cur.offsetParent) {
    x += cur.offsetLeft;
    y += cur.offsetTop;
    cur = cur.offsetParent;
  }
  outDir.innerHTML = x + "," + y;
  return {"x": x, "y": y};
 })(dpad);
 var dpadTouch = false;
 var dpadOffset = {"x": 0, "y": 0};

 function dpadStart(e) {
  p(e);
  var touch = e.changedTouches[0];
  dpadTouch = touch.identifier;
 }

 function dpadMove(e) {
  var touches = e.changedTouches;
  for (var i = 0; i < touches.length; i++) {
    if (touches[i].identifier == dpadTouch) {
      break;
    }
  }
  if (!touches[i]) return;
  p(e);
  var x = touches[i].clientX - dpadZero.x;
  var y = touches[i].clientY - dpadZero.y;
 //  outDir.innerHTML = x + "," + y;
  dpadOffset.x = x;
  dpadOffset.y = y;
 }

 function dpadEnd(e) {
  dpadTouch = false;
  dpadOffset.x = dpadOffset.y = 0;
 }

 dpad.addEventListener("touchstart", dpadStart, false);
 dpad.addEventListener("touchmove", dpadMove, false);
 dpad.addEventListener("touchend", dpadEnd, false);

 var fireState = false;

 function fireStart(e) {
  p(e);
  fireState = true;
  outPulse.innerHTML = "Firing...";
 }

 function fireCancel(e) {
  p(e);
  fireState = false;
  outPulse.innerHTML = "";
 }

 fire.addEventListener("touchstart", fireStart, false);
 fire.addEventListener("touchleave", fireCancel, false);
 fire.addEventListener("touchend", fireCancel, false);
 fire.addEventListener("touchcancel", fireCancel, false);

 window.addEventListener("touchstart", p, false);
 window.addEventListener("touchmove", p, false);

 var requestAnim = (
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  function(cb) { setTimeout(cb, 30) });

 var prev = new Date();
 var shipPos = {"x": 0, "y": 0};
 var bounds = {
  "x": window.innerWidth - ship.offsetWidth,
  "y": window.innerHeight - ship.offsetHeight
 };
 function rbound(i, max, min) {
  i = Math.min(i, max);
  i = Math.max(i, min);
  return Math.round(i);
 }
 function tick() {
  var dt = new Date() - prev;
  shipPos.x += dpadOffset.x / (dt / 30);
  shipPos.y += dpadOffset.y / (dt / 30);
  shipPos.x = rbound(shipPos.x, bounds.x, 0);
  shipPos.y = rbound(shipPos.y, bounds.y, 0);
  outDir.innerHTML = shipPos.x + "," + shipPos.y;
  ship.style.left = shipPos.x + "px";
  ship.style.top = shipPos.y + "px";
  prev = new Date();
  requestAnim(tick);
 }
 requestAnim(tick);
 </script>
	<!DOCTYPE html>
	<title>Multitouch Test</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">

	<style>
	html, body {
	background-color: #000;
	color: #fff;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	}

	#output {
	height: 70%;
	}

	#input {
	height: 30%;
	position: relative;
	}

	#input div {
	background-color: #fcc;
	height: 120px;
	position: absolute;
	bottom: 5px;
	width: 120px;
	}

	#dpad {
	border-radius: 50%;
	left: 5px;
	}

	#fire {
	border-radius: 0 100% 100% 0;
	right: 5px;
	}

	#ship {
	background-color: #fff;
	height: 10px;
	left: 0;
	position: absolute;
	top: 0;
	width: 20px;
	}
	</style>

	<div id="ship"></div>

	<div id="output">
	<div id="direction"></div>
	<div id="pulse"></div>
	</div>


	<div id="input">
	<div id="dpad"> </div>
	<div id="fire"> </div>
	</div>

	<script>
	var $ = function(sel) {
	return document.querySelectorAll(sel);
	}
	var outDir = $("#direction")[0];
	var outPulse = $("#pulse")[0];
	var dpad = $("#dpad")[0];
	var fire = $("#fire")[0];
	var ship = $("#ship")[0];

	function p(e) { e.preventDefault(); }

	var dpadZero = (function(cur) {
	var x = cur.clientWidth / 2;
	var y = cur.clientHeight / 2;
	while (cur.offsetParent) {
	x += cur.offsetLeft;
	y += cur.offsetTop;
	cur = cur.offsetParent;
	}
	outDir.innerHTML = x + "," + y;
	return {"x": x, "y": y};
	})(dpad);
	var dpadTouch = false;
	var dpadOffset = {"x": 0, "y": 0};

	function dpadStart(e) {
	p(e);
	var touch = e.changedTouches[0];
	dpadTouch = touch.identifier;
	}

	function dpadMove(e) {
	var touches = e.changedTouches;
	for (var i = 0; i < touches.length; i++) {
	if (touches[i].identifier == dpadTouch) {
	break;
	}
	}
	if (!touches[i]) return;
	p(e);
	var x = touches[i].clientX - dpadZero.x;
	var y = touches[i].clientY - dpadZero.y;
	// outDir.innerHTML = x + "," + y;
	dpadOffset.x = x;
	dpadOffset.y = y;
	}

	function dpadEnd(e) {
	dpadTouch = false;
	dpadOffset.x = dpadOffset.y = 0;
	}

	dpad.addEventListener("touchstart", dpadStart, false);
	dpad.addEventListener("touchmove", dpadMove, false);
	dpad.addEventListener("touchend", dpadEnd, false);

	var fireState = false;

	function fireStart(e) {
	p(e);
	fireState = true;
	outPulse.innerHTML = "Firing...";
	}

	function fireCancel(e) {
	p(e);
	fireState = false;
	outPulse.innerHTML = "";
	}

	fire.addEventListener("touchstart", fireStart, false);
	fire.addEventListener("touchleave", fireCancel, false);
	fire.addEventListener("touchend", fireCancel, false);
	fire.addEventListener("touchcancel", fireCancel, false);

	window.addEventListener("touchstart", p, false);
	window.addEventListener("touchmove", p, false);

	var requestAnim = (
	window.requestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	function(cb) { setTimeout(cb, 30) });

	var prev = new Date();
	var shipPos = {"x": 0, "y": 0};
	var bounds = {
	"x": window.innerWidth - ship.offsetWidth,
	"y": window.innerHeight - ship.offsetHeight
	};
	function rbound(i, max, min) {
	i = Math.min(i, max);
	i = Math.max(i, min);
	return Math.round(i);
	}
	function tick() {
	var dt = new Date() - prev;
	shipPos.x += dpadOffset.x / (dt / 30);
	shipPos.y += dpadOffset.y / (dt / 30);
	shipPos.x = rbound(shipPos.x, bounds.x, 0);
	shipPos.y = rbound(shipPos.y, bounds.y, 0);
	outDir.innerHTML = shipPos.x + "," + shipPos.y;
	ship.style.left = shipPos.x + "px";
	ship.style.top = shipPos.y + "px";
	prev = new Date();
	requestAnim(tick);
	}
	requestAnim(tick);
	</script>
No results found