[Seva Pletnev]

c= document.getElementById('c');g= c.getContext('2d');  //вызываем canvas и задаем его параметры

xq=0; yq=0;   // координаты игрока
xw=16; yw=16; // координвты моба

mapDot=16;    //размер клетки

// 0 уголь  1 мостовая 2 земля 3 песок 4 лес 5 трава 6 вода 7 камень
mapCol = ['#333','#936','#963','#990','#693','#396','#369','#999'];       //массив цветов           
map =[5,5,5,5,5,5,5,5,1,4,4,4,4,5,5,5,5,5,3,6,6,6,6,6,6,6,6,6,6,6,6,6,
      5,5,5,5,5,5,0,5,1,4,5,5,5,5,4,5,5,5,5,3,6,6,6,6,6,6,6,6,6,6,6,6,
      0,0,5,5,5,5,0,5,1,4,5,5,5,0,0,0,4,4,4,4,4,6,6,6,6,6,6,6,6,6,6,6,
      5,0,0,5,5,5,5,5,1,4,5,5,5,0,0,0,0,5,5,5,4,4,6,6,6,6,6,6,6,6,6,6,
      5,5,5,5,5,5,5,5,1,4,5,5,5,5,0,0,0,5,5,5,5,4,4,3,6,6,6,6,6,6,6,6,
      5,5,0,0,0,5,5,5,1,4,4,4,4,4,5,5,5,5,5,5,5,5,4,4,3,3,6,6,6,6,6,6,
      5,5,5,0,0,5,5,5,1,4,5,7,7,7,7,5,5,5,5,5,5,5,5,4,4,5,3,6,6,6,6,6,
      5,5,5,5,5,5,5,5,1,1,1,1,1,1,1,1,7,5,5,5,5,0,0,5,4,4,5,3,3,3,3,3,
      1,1,1,1,1,1,1,1,1,5,5,7,7,7,7,7,1,7,5,5,5,5,0,5,5,4,4,4,4,4,4,4,
      5,5,5,5,5,5,5,5,5,5,5,5,3,3,3,3,7,1,7,5,5,5,5,5,5,5,5,5,4,4,5,5,
      4,4,4,4,4,4,4,4,4,4,5,3,3,3,6,6,3,3,1,7,5,5,5,5,5,5,5,5,5,4,5,5,
      4,4,4,4,4,4,4,4,5,4,4,3,6,6,6,6,6,3,3,1,5,5,5,5,5,5,5,5,5,5,4,5,
      6,5,5,5,5,5,5,5,5,5,4,3,6,6,6,6,6,6,3,5,1,1,1,1,1,1,1,1,1,1,1,1,
      4,6,5,5,6,6,6,6,6,6,6,6,6,6,6,6,6,3,3,5,1,5,0,5,5,5,5,5,5,5,5,5,
      4,5,6,6,6,5,5,5,5,5,5,4,5,3,6,6,3,3,5,5,1,5,0,5,5,5,7,5,5,5,5,5,
      4,4,4,4,4,4,4,4,4,4,4,5,5,5,3,3,3,5,5,5,1,5,5,5,5,7,7,7,5,5,5,5,
      5,4,5,4,4,4,5,4,4,5,4,4,5,5,4,4,4,4,4,5,1,5,5,5,7,0,0,7,7,5,5,5,
      5,4,5,4,4,4,4,4,5,4,5,5,4,4,5,4,5,4,4,5,1,5,5,5,7,7,7,7,7,5,5,5,
      5,4,4,5,4,5,4,5,4,4,4,4,4,5,4,5,4,4,5,5,1,5,5,5,7,0,7,7,5,5,5,5,
      5,5,5,4,4,5,4,5,4,4,4,4,4,4,5,4,4,5,4,4,1,5,5,5,7,0,0,7,5,5,5,5,
      4,4,4,4,4,4,4,5,4,5,4,4,5,4,5,5,5,5,4,5,1,5,5,5,7,7,7,7,5,0,0,5,
      5,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,1,5,0,5,7,7,7,7,0,0,0,0,
      4,4,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,5,1,5,5,5,7,7,0,7,5,0,0,5,
      5,5,4,4,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,4,1,5,5,5,5,7,7,7,5,0,0,5,
      5,4,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,4,1,5,5,5,5,5,7,5,5,0,5,5,
      4,5,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,4,1,5,5,5,5,5,5,5,5,5,5,5,
      5,4,4,5,5,5,2,2,2,2,5,5,5,5,5,5,5,5,4,5,1,5,5,0,5,5,5,0,0,5,5,5,
      4,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,1,5,5,0,5,5,5,0,0,5,5,5,
      5,4,4,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,4,1,5,5,0,5,5,5,5,0,0,5,5,
      4,4,4,5,4,4,4,4,4,5,5,5,4,4,5,5,5,4,4,4,1,5,5,5,5,5,5,5,5,5,5,5,
      4,4,4,4,4,5,4,4,4,4,5,5,4,5,4,5,5,4,4,4,1,5,5,5,5,5,5,5,5,5,5,5,
      5,5,3,5,4,5,5,4,5,4,4,4,4,5,4,4,5,5,4,4,1,5,5,5,5,5,5,5,5,5,5,5];  //массив содержащий индексы клеток
// 1 вверх 2 вниз 3 влево 4 вправо
Mobprid=[1,1,1,1,4,4,4,1,1,1,1,4,4,4,4,2,2,2,2,3,3,3,3,4,2,2,2,2,1,1,1,1,4,4,4,4,2,2,2,2,3,3,3,3,3,3,3,3]; //массив содержащий путь моба
Mobi=0;


w= c.width; h= c.height;     
setInterval('run()', 100);   // таймер перерисовки экрана

function run() {            
  g.clearRect(0,0,w,h);      

  for (n=0; n<1024; n++){  //цыкл переберающий массив
    y=n>>5;x=n&31;
    z=map[n];
    g.fillStyle=mapCol[z]; //рисуем клетку цвета соответствующему индексу из массива map
    g.fillRect(x*mapDot,y*mapDot,mapDot,mapDot);  
  } 
  scrPlayer();   //вызываем игрока
  scrMob();      //вызываем моба
}



function scrPlayer(){
  switch (key){               //проверка нажатия клавишь
    case 37: xq--;
        break;
    case 38: yq--;
         break;
    case 39: xq++;
        break;
    case 40: yq++;
        break;
    case 32: yq=0; xq=0;
        break;
  }
  g.fillStyle="#0000ff";
  g.fillRect(xq*mapDot,yq*mapDot,mapDot,mapDot);  //рисуем игрока (синий)
  if(xq==xw&&yq==yw) {alert(":p game over")}       //проаеряем столкновение с мобом
 }



function scrMob() {

  g.fillStyle="#ff0000";
  g.fillRect(xw*mapDot,yw*mapDot,mapDot,mapDot);  //рисуем моба
  i=Mobprid[Mobi];
  Mobi++;
  if(Mobi>=Mobprid.length) {Mobi=0;}    //вытаскиваем индексы направлений из массива Mobprid и задаем путь
  switch(i){
    case 1: yw--;
    break;
    case 2: yw++;
    break;
    case 3: xw--;
    break;
    case 4: xw++;
    break;
 }          
 }


document.onkeydown = keyDn; document.onkeyup = keyUp; key=0;
function keyDn(e) {key = e.which; /*alert(key);*/  }
function keyUp(e) {key = 0;}

отрисовка карты.