Для рисования произвольных фигур в браузере я бы предложил использовать либо Canvas, либо SVG.
Я бы не стал «рисовать» с использованием элементов HTML <div> и CSS.Это возможно, но в лучшем случае это хак и может стать довольно грязным, и я, конечно, не хотел бы писать игру, используя эту технику.
Так что ваш лучший выбор - SVG или Canvas.
Выбор SVG против Canvas зависит как от того, какие платформы / браузеры вы хотите поддерживать, так и от свойств двух технологий.
Очевидно, вы уже знаете основное отличие SVG (векторная графика) и Canvas (пиксельная графика), но у обоих также есть различная поддержка браузеров, что важно учитывать.
Учитывая предоставленную вами ограниченную информацию, я бы сказал, что SVG выглядитнаиболее естественно подходит для того, что вы делаете.Тем не менее, SVG еще не поддерживается браузером Android, поэтому, если вы хотите, чтобы ваша игра работала на мобильных устройствах, вы должны принять это во внимание.Это, вероятно, означало бы, что вам нужно использовать Canvas вместо этого.
Если вы придерживаетесь рабочего стола, все современные браузеры поддерживают Canvas и SVG.Очевидно, что оба отсутствуют в IE8 и более ранних версиях, но IE действительно поддерживает конкурирующий формат, называемый VML, который является векторным языком на основе XML, похожим на SVG.
Если вы хотите поддерживать IE8 (и вполне возможно, что выне!), для IE доступны библиотеки javascript, которые будут отображать графику Canvas и SVG с использованием движка VML в IE.Очевидно, что это очень хорошо работает для SVG, так как два языка очень похожи.Я слышал немного более смешанные сообщения о конвертации холста, но вы можете попробовать.Помните, что движок Javascript в IE8 довольно медленный, поэтому преобразование графического формата на основе javascript может не дать вам достаточной производительности, чтобы быть полезным в контексте игры.
Надеюсь, это поможет.