alaingilbert · May 13, 2012 15:28
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 <style>
 label { display: block; width: 70px; float: left; border-right: 1px solid #187215; padding: 5px; }
 .box { color: #187215; clear: both; border: 1px solid #187215; margin: 5px; background-color: #e9ffe8; }
 .cross { width: 30px; height="30px"; display: block; background-color: #f6fff6; text-align: center; float: left; padding: 5px; }
 .ctrl { margin: 20px; }
 .left { float: left; }
 .clear { clear: both; }
 </style>
 </head>
 <body>

 <div class="left">
   <canvas id="canvas" width="800" height="600"></canvas>
 </div>
 <div class="left ctrl">
   <div class="box"><label>Top:    </label><span id="mvTop"    class="cross"></span><div class="clear"></div></div>
   <div class="box"><label>Bottom: </label><span id="mvBottom" class="cross"></span><div class="clear"></div></div>
   <div class="box"><label>Left:   </label><span id="mvLeft"   class="cross"></span><div class="clear"></div></div>
   <div class="box"><label>Right:  </label><span id="mvRight"  class="cross"></span><div class="clear"></div></div>
 </div>


 <script>
 var $ = function (id) { return document.getElementById(id); };

 var canvas    = $('canvas');
 var c         = canvas.getContext('2d');
 var lastFrame = null;

 var mouse     = { x: 0, y: 0 };
 var moveOpt   = { none: 0, right: 1, left: 2, top: 4, bottom: 8 };
 var move      = 0;
 var leftStart = rightStart = topStart = bottomStart = new Date();

 var pos       = { x: 400, y: 300 };
 var velocity  = 400;
 var delay     = 1000;


 var update = function (dt) {
   // Update flags
   if (mouse.x < pos.x) {
      move |= moveOpt.left;
      move &= ~moveOpt.right;
      leftStart = new Date();
   }
   if (mouse.x > pos.x) {
      move |= moveOpt.right;
      move &= ~moveOpt.left;
      rightStart = new Date();
   }
   if (mouse.y < pos.y) {
      move |= moveOpt.top;
      move &= ~moveOpt.bottom;
      topStart = new Date();
   }
   if (mouse.y > pos.y) {
      move |= moveOpt.bottom;
      move &= ~moveOpt.top;
      bottomStart = new Date();
   }
   if (mouse.x == pos.x) {
      if (move & moveOpt.left && new Date().getTime() - leftStart.getTime() >= delay) {
         move &= ~moveOpt.left;
      } else if (move & moveOpt.right && new Date().getTime() - rightStart.getTime() >= delay) {
         move &= ~moveOpt.right;
      }
   }
   if (mouse.y == pos.y) {
      if (move & moveOpt.top && new Date().getTime() - topStart.getTime() >= delay) {
         move &= ~moveOpt.top;
      } else if (move & moveOpt.bottom && new Date().getTime() - bottomStart.getTime() >= delay) {
         move &= ~moveOpt.bottom;
      }
   }

   // Update UI
   var tmpTop = tmpBottom = tmpLeft = tmpRight = '&nbsp;';
   if (move & moveOpt.top)    { tmpTop    = 'X'; }
   if (move & moveOpt.bottom) { tmpBottom = 'X'; }
   if (move & moveOpt.left)   { tmpLeft   = 'X'; }
   if (move & moveOpt.right)  { tmpRight  = 'X'; }
   $('mvTop').innerHTML    = tmpTop;
   $('mvBottom').innerHTML = tmpBottom;
   $('mvLeft').innerHTML   = tmpLeft;
   $('mvRight').innerHTML  = tmpRight;


   // Update object position
   if (pos.x > mouse.x - 5 && pos.x < mouse.x + 5) {
      pos.x = mouse.x;
   } else {
      if (mouse.x < pos.x)  { pos.x -= dt/1000 * velocity; }
      if (mouse.x >= pos.x) { pos.x += dt/1000 * velocity; }
   }

   if (pos.y > mouse.y - 5 && pos.y < mouse.y + 5) {
      pos.y = mouse.y;
   } else {
      if (mouse.y < pos.y)  { pos.y -= dt/1000 * velocity; }
      if (mouse.y >= pos.y) { pos.y += dt/1000 * velocity; }
   }
 };


 var render = function () {
   c.save();
   c.clearRect(0, 0, 800, 600);
   c.strokeRect(0, 0, 800, 600);

   c.translate(pos.x, pos.y);
   c.fillRect(-10, -10, 20, 20);
   c.restore();
 };


 var cycle = function () {
   var dt = new Date().getTime() - lastFrame.getTime();
   update(dt);
   render();
   lastFrame = new Date();
   requestAnimFrame(cycle);
 };


 var init = function () {
   lastFrame = new Date();
   cycle();
 };


 /**
 * Update the cursor position.
 */
 var mouseMove = function (evt) {
   mouse = { x: evt.x - canvas.offsetLeft, y: evt.y - canvas.offsetTop };
 };
 canvas.addEventListener('mousemove', function (evt) { mouseMove(evt); }, false);


 window.requestAnimFrame = (function () {
   return window.requestAnimationFrame   || // La forme standardisée
      window.webkitRequestAnimationFrame || // Pour Chrome et Safari
      window.mozRequestAnimationFrame    || // Pour Firefox
      window.oRequestAnimationFrame      || // Pour Opera
      window.msRequestAnimationFrame     || // Pour Internet Explorer
      function (callback) {                 // Pour les élèves du dernier rang
         window.setTimeout(callback, 1000 / 60);
      };
 })();

 init();
 </script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style>
	label { display: block; width: 70px; float: left; border-right: 1px solid #187215; padding: 5px; }
	.box { color: #187215; clear: both; border: 1px solid #187215; margin: 5px; background-color: #e9ffe8; }
	.cross { width: 30px; height="30px"; display: block; background-color: #f6fff6; text-align: center; float: left; padding: 5px; }
	.ctrl { margin: 20px; }
	.left { float: left; }
	.clear { clear: both; }
	</style>
	</head>
	<body>

	<div class="left">
	<canvas id="canvas" width="800" height="600"></canvas>
	</div>
	<div class="left ctrl">
	<div class="box"><label>Top: </label><span id="mvTop" class="cross"></span><div class="clear"></div></div>
	<div class="box"><label>Bottom: </label><span id="mvBottom" class="cross"></span><div class="clear"></div></div>
	<div class="box"><label>Left: </label><span id="mvLeft" class="cross"></span><div class="clear"></div></div>
	<div class="box"><label>Right: </label><span id="mvRight" class="cross"></span><div class="clear"></div></div>
	</div>


	<script>
	var $ = function (id) { return document.getElementById(id); };

	var canvas = $('canvas');
	var c = canvas.getContext('2d');
	var lastFrame = null;

	var mouse = { x: 0, y: 0 };
	var moveOpt = { none: 0, right: 1, left: 2, top: 4, bottom: 8 };
	var move = 0;
	var leftStart = rightStart = topStart = bottomStart = new Date();

	var pos = { x: 400, y: 300 };
	var velocity = 400;
	var delay = 1000;


	var update = function (dt) {
	// Update flags
	if (mouse.x < pos.x) {
	move \|= moveOpt.left;
	move &= ~moveOpt.right;
	leftStart = new Date();
	}
	if (mouse.x > pos.x) {
	move \|= moveOpt.right;
	move &= ~moveOpt.left;
	rightStart = new Date();
	}
	if (mouse.y < pos.y) {
	move \|= moveOpt.top;
	move &= ~moveOpt.bottom;
	topStart = new Date();
	}
	if (mouse.y > pos.y) {
	move \|= moveOpt.bottom;
	move &= ~moveOpt.top;
	bottomStart = new Date();
	}
	if (mouse.x == pos.x) {
	if (move & moveOpt.left && new Date().getTime() - leftStart.getTime() >= delay) {
	move &= ~moveOpt.left;
	} else if (move & moveOpt.right && new Date().getTime() - rightStart.getTime() >= delay) {
	move &= ~moveOpt.right;
	}
	}
	if (mouse.y == pos.y) {
	if (move & moveOpt.top && new Date().getTime() - topStart.getTime() >= delay) {
	move &= ~moveOpt.top;
	} else if (move & moveOpt.bottom && new Date().getTime() - bottomStart.getTime() >= delay) {
	move &= ~moveOpt.bottom;
	}
	}

	// Update UI
	var tmpTop = tmpBottom = tmpLeft = tmpRight = ' ';
	if (move & moveOpt.top) { tmpTop = 'X'; }
	if (move & moveOpt.bottom) { tmpBottom = 'X'; }
	if (move & moveOpt.left) { tmpLeft = 'X'; }
	if (move & moveOpt.right) { tmpRight = 'X'; }
	$('mvTop').innerHTML = tmpTop;
	$('mvBottom').innerHTML = tmpBottom;
	$('mvLeft').innerHTML = tmpLeft;
	$('mvRight').innerHTML = tmpRight;


	// Update object position
	if (pos.x > mouse.x - 5 && pos.x < mouse.x + 5) {
	pos.x = mouse.x;
	} else {
	if (mouse.x < pos.x) { pos.x -= dt/1000 * velocity; }
	if (mouse.x >= pos.x) { pos.x += dt/1000 * velocity; }
	}

	if (pos.y > mouse.y - 5 && pos.y < mouse.y + 5) {
	pos.y = mouse.y;
	} else {
	if (mouse.y < pos.y) { pos.y -= dt/1000 * velocity; }
	if (mouse.y >= pos.y) { pos.y += dt/1000 * velocity; }
	}
	};


	var render = function () {
	c.save();
	c.clearRect(0, 0, 800, 600);
	c.strokeRect(0, 0, 800, 600);

	c.translate(pos.x, pos.y);
	c.fillRect(-10, -10, 20, 20);
	c.restore();
	};


	var cycle = function () {
	var dt = new Date().getTime() - lastFrame.getTime();
	update(dt);
	render();
	lastFrame = new Date();
	requestAnimFrame(cycle);
	};


	var init = function () {
	lastFrame = new Date();
	cycle();
	};


	/**
	* Update the cursor position.
	*/
	var mouseMove = function (evt) {
	mouse = { x: evt.x - canvas.offsetLeft, y: evt.y - canvas.offsetTop };
	};
	canvas.addEventListener('mousemove', function (evt) { mouseMove(evt); }, false);


	window.requestAnimFrame = (function () {
	return window.requestAnimationFrame \|\| // La forme standardisée
	window.webkitRequestAnimationFrame \|\| // Pour Chrome et Safari
	window.mozRequestAnimationFrame \|\| // Pour Firefox
	window.oRequestAnimationFrame \|\| // Pour Opera
	window.msRequestAnimationFrame \|\| // Pour Internet Explorer
	function (callback) { // Pour les élèves du dernier rang
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	init();
	</script>

	</body>
	</html>