tkojitu · October 25, 2012 14:16
diff --git a/run.html b/run.html
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, target-densitydpi=device-dpi"> 
 <title>Run!</title>
 <style>
 canvas {
  border: 1px solid #9C9898;
 }
 </style>
 <script src='run.js'></script>
 </head>
 <body>
 <canvas id='meter' width='400' height='50'></canvas>
 <br>
 <canvas id='left' width=200 height=480></canvas>
 <canvas id='right' width=200 height=480></canvas>
 <p id='action'>none</p>
 <p id='speed'>0</p>
 </body>
 </html>
diff --git a/run.js b/run.js
 var kNone  = -1;
 var kLeft  = 0;
 var kRight = 1;

 var gAction = kNone;
 var gSteps = 0;
 var gLeft = 0;
 var gRight = 0;

 function getMeterCanvas() {
  return document.getElementById("meter");
 }

 function getLeftCanvas() {
  return document.getElementById("left");
 }

 function getRightCanvas() {
  return document.getElementById("right");
 }

 window.onload = function() {
  initCanvases();
  mainloop();
 };

 function initCanvases() {
  initLeftCanvas();
  initRightCanvas();
 }

 function initLeftCanvas() {  
  var canvas = getLeftCanvas();
  canvas.addEventListener("touchstart", onTouchLeft, false);
 }

 function initRightCanvas() {
  var canvas = getRightCanvas();
  canvas.addEventListener("touchstart", onTouchRight, false);
 }

 function doAction(action) {
  if (action == gAction) {
    gAction = kNone;
    return;
  }
  if (action == kLeft || action == kRight) {
    ++gSteps;
  }
  gAction = action;
 }

 function onTouchLeft() {
  gLeft = Date.now();
  doAction(kLeft);
 }

 function onTouchRight() {
  gRight = Date.now();
  doAction(kRight);
 }

 function mainloop() {
  update();
  draw();
  window.webkitRequestAnimationFrame(mainloop);
 }

 function update() {
  showAction();
  showSpeed();
 }

 function draw () {
  drawLeftCanvas();
  drawRightCanvas();
  drawSpeedCanvas();
 }

 function drawLeftCanvas() {
  if (gAction == kLeft) {
    turnOnStep(getLeftCanvas());
  } else {
    turnOff(getLeftCanvas());
  }
 }

 function drawRightCanvas() {
  if (gAction == kRight) {
    turnOnStep(getRightCanvas());
  } else {
    turnOff(getRightCanvas());
  }
 }

 function turnOnStep(canvas) {
  turnOn(canvas, "rgba(255, 192, 203, 0.1)");
 }

 function turnOn(canvas, color) {
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 }

 function turnOff(canvas) {
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
 }

 function drawSpeedCanvas() {
  var canvas = getMeterCanvas();
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "rgb(255, 0, 0)";
  var width = calcSpeed();
  ctx.fillRect(0, 0, width, canvas.height);
 }

 function showAction() {
  var str = "none";
  switch (gAction) {
  case kLeft:
    str = "left";
    break;
  case kRight:
    str = "right";
    break;
  default:
    str = "none";
    break;
  }
  showText("action", str);
 }

 function calcSpeed() {
  if (gAction == kNone) {
    return 0;
  }
  var diff;
  if (gLeft == 0 || gRight == 0) {
    diff = 0 ;
  } else {
    diff = Math.abs(gLeft - gRight);
  }
  if (diff < 50) {
    return 0;
  }
  var canvas = getMeterCanvas();
  return canvas.width * (1 / diff) * 70;
 }

 function showSpeed() {
  var speed = calcSpeed();
  showText("speed", "" + speed);
 }

 function showText(id, str) {
  var text = document.getElementById(id);
  text.innerHTML = str;
 }
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, target-densitydpi=device-dpi">
	<title>Run!</title>
	<style>
	canvas {
	border: 1px solid #9C9898;
	}
	</style>
	<script src='run.js'></script>
	</head>
	<body>
	<canvas id='meter' width='400' height='50'></canvas>
	<br>
	<canvas id='left' width=200 height=480></canvas>
	<canvas id='right' width=200 height=480></canvas>
	<p id='action'>none</p>
	<p id='speed'>0</p>
	</body>
	</html>
	var kNone = -1;
	var kLeft = 0;
	var kRight = 1;

	var gAction = kNone;
	var gSteps = 0;
	var gLeft = 0;
	var gRight = 0;

	function getMeterCanvas() {
	return document.getElementById("meter");
	}

	function getLeftCanvas() {
	return document.getElementById("left");
	}

	function getRightCanvas() {
	return document.getElementById("right");
	}

	window.onload = function() {
	initCanvases();
	mainloop();
	};

	function initCanvases() {
	initLeftCanvas();
	initRightCanvas();
	}

	function initLeftCanvas() {
	var canvas = getLeftCanvas();
	canvas.addEventListener("touchstart", onTouchLeft, false);
	}

	function initRightCanvas() {
	var canvas = getRightCanvas();
	canvas.addEventListener("touchstart", onTouchRight, false);
	}

	function doAction(action) {
	if (action == gAction) {
	gAction = kNone;
	return;
	}
	if (action == kLeft \|\| action == kRight) {
	++gSteps;
	}
	gAction = action;
	}

	function onTouchLeft() {
	gLeft = Date.now();
	doAction(kLeft);
	}

	function onTouchRight() {
	gRight = Date.now();
	doAction(kRight);
	}

	function mainloop() {
	update();
	draw();
	window.webkitRequestAnimationFrame(mainloop);
	}

	function update() {
	showAction();
	showSpeed();
	}

	function draw () {
	drawLeftCanvas();
	drawRightCanvas();
	drawSpeedCanvas();
	}

	function drawLeftCanvas() {
	if (gAction == kLeft) {
	turnOnStep(getLeftCanvas());
	} else {
	turnOff(getLeftCanvas());
	}
	}

	function drawRightCanvas() {
	if (gAction == kRight) {
	turnOnStep(getRightCanvas());
	} else {
	turnOff(getRightCanvas());
	}
	}

	function turnOnStep(canvas) {
	turnOn(canvas, "rgba(255, 192, 203, 0.1)");
	}

	function turnOn(canvas, color) {
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = color;
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	}

	function turnOff(canvas) {
	var ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	}

	function drawSpeedCanvas() {
	var canvas = getMeterCanvas();
	var ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = "rgb(255, 0, 0)";
	var width = calcSpeed();
	ctx.fillRect(0, 0, width, canvas.height);
	}

	function showAction() {
	var str = "none";
	switch (gAction) {
	case kLeft:
	str = "left";
	break;
	case kRight:
	str = "right";
	break;
	default:
	str = "none";
	break;
	}
	showText("action", str);
	}

	function calcSpeed() {
	if (gAction == kNone) {
	return 0;
	}
	var diff;
	if (gLeft == 0 \|\| gRight == 0) {
	diff = 0 ;
	} else {
	diff = Math.abs(gLeft - gRight);
	}
	if (diff < 50) {
	return 0;
	}
	var canvas = getMeterCanvas();
	return canvas.width * (1 / diff) * 70;
	}

	function showSpeed() {
	var speed = calcSpeed();
	showText("speed", "" + speed);
	}

	function showText(id, str) {
	var text = document.getElementById(id);
	text.innerHTML = str;
	}