Создание карты игрового мира (Браузерная)

WebGL в помощь. Или ActionScript с Flash (устаревший стандарт).

Можно упороться и использовать один из многочисленных фреймворков: KeepDraw.js, Konva.js, Paper.js, Processing.js, Raphael.js (их сотни для самых различных задач).

Самым лучшим вариантом на данный момент будет использование WebGL.
Самая лучшая дока: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
В которой даже есть возможность выбрать русский язык (для незнающих английского). Видеороликов, статьей и форумов, где присутствуют ответы на все многочисленные возникающие вопросы, просто тысячи. Вами предложенная задача реализуется вполне за денёк-другой, даже если в этой теме новичок (естественно при наличии базовых знаний, желании учиться, и при умении гуглить).

Обычно такие вещи Flash выполняют. Разбиваете нужный участок экрана на квадраты, прорисовываете в них соответствующие объекты. Ссылкой или якорем пишете обработчик...

Для начала разбиваем карту на тайлы, к примеру 30х30 px, сам тайл делим на слои. К примеру :
1 (самый нижний). это просто почва (трава, земля).
2. это некие объекты ландшафта: дерьвья в вашем случае
3. более крупные объекты
и так далее...
Поможет https://www.mapeditor.org/
Может сохранить ваше творение в json, который уже можно сохранить в любой БД (MySQL в вашем случае).

Визуализировать лучше с помощью движков, например Phaser.js.

ну а по логике, представляем карту как двумерный массив
map[width][height]

по клавиатуре, мыши или точу (swipe) меняем переменные cur_x и cur_y
и отображаем от них...

есть библиотека на js драг он дроп, разбивает карту на квадратики и обрабатывает события мышки по ним.