вот зацени этот код =) сам мучился на эту тему )
<html><canvas id=c width=512 height=512</canvas> <script>
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("
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;}
</script></html>
