Napisz sobie tzw. "siatkę" - mapę bitową, np. tak:
0 - brak kolizji
1 - kolizja
2 - przedmiot, który można podnieść
3 - potworek, którego można ubić
4 - gracz
Współrzędne umownie: (x,y), możesz mieć odwrotnie, czyli (y,x).
Jeśli gracz znajduje się na 1,1 (współrzędne), to ściana (kolizja) powinna być zbudowana mniej więcej tak:
0,0 -- 7,0
0,1 -- 7,1
...
0,7 -- 7,7
Mapa wyglądałaby tak:
var map_world = [
1,1,1,1,1,1,1,1,
1,4,0,0,0,0,0,1,
1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,1,
1,0,0,0,0,0,0,1,
1,0,2,2,2,3,0,1,
1,1,1,1,1,1,1,1
];
Po napisaniu mapy, możesz przekonwertować taką tablicę na inną, aby mieć układ y, x lub x,y; żeby lepiej Ci się pracowało na danych. I teraz jeśli następnym ruchem postaci byłoby wyjście poza obszar mapy, czyli wejście na 1, to nie pozwól na taki ruch, uruchom blokadę zdarzenia odopowiadający za ruch w tę stronę. Później dzięki mapie najlepiej przekonwertowanej (subiektywna opinia) tworzysz elementy, które będą stały na wirtualnym płótnie, czyli np. canvas, html, czy jeszcze jakieś inne opcje dostępne do osadzania elementów dla interpretera przeglądarki.
Sterowanie możesz napisać tak:
Jeśli następny możliwy ruch jest 0., to wyrzuć poprzedni element np. i wrzuć go przed następny element, czyli jeśli stoi na 1,1 to następny możliwy ruch np. w prawo to 2,1; więc element z 1,1 powinien zostać zdjęty z mapy (usunięty), a nowy wrzucony przed współrzędne 2,1. Ogólnie to możesz napisać to dla dwóch map, jedna będzie odpowiadała za widok, a druga za mechanikę. Na końcu nałożysz te dwie mapy na siebie, np. dając wcześniej elementowi jakiemuś position:relative, a następnemu position:absolute i tyle.
Ogólnie jest sporo możliwości do napisania gry, więc nie generalizowałbym.