Untitled


<!DOCTYPE HTML>
<html>
<body>

<canvas id="e" width="300" height="300" tabindex="0" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
  var canvas = document.getElementById("e");
  canvas.addEventListener( "keydown", doKeyDown, true);
  var cxt = canvas.getContext("2d");

  var mapArray =  [ [0,0,0],
      [0,0,1],
      [0,1,0]  ];

  var cellSize = 100;
  var mainChar = [1,0]; // y , x

  var timeCounter = 1.0;

  function doKeyDown(e) {

 if (e.keyCode == 38) {
  if(mainChar[1]>0 && mapArray[mainChar[0]][mainChar[1]-1] == 0){
   mainChar[1]-=1;
  }
 }
 if (e.keyCode == 40) {
  if(mainChar[1]<2 && mapArray[mainChar[0]][mainChar[1]+1] == 0){
   mainChar[1]+=1;
  }
 }
 if (e.keyCode == 37) {
  if(mainChar[0]>0 && mapArray[mainChar[0]-1][mainChar[1]] == 0){
   mainChar[0]-=1;
  }
 }
 if (e.keyCode == 39) {
  if(mainChar[0]<2 && mapArray[mainChar[0]+1][mainChar[1]] == 0){
   mainChar[0]+=1;
  }
 }

 }

  function draw(){
   cxt.clearRect(0,0,300,300);

   for(var i in mapArray){
  for (var j in mapArray[i]){
   if (mapArray[i][j] == 1){
    cxt.fillStyle="#DDDDDD";
    cxt.fillRect(i*cellSize,j*cellSize,100,100);
   }
  }
   }

   cxt.fillStyle="#FFCC00";
   cxt.beginPath();

   if (timeCounter%2 == 0){
    cxt.arc(mainChar[0]*cellSize+50,mainChar[1]*cellSize+50,50,0,2.0*Math.PI,true);
   }

  cxt.closePath();
  cxt.fill();
  timeCounter += 1;

  }

  setInterval(draw,100);


</script>
</body>
</html>