[Rise]

но там объекты создаются рандомно.

Когда элементы создаются скриптом это называется динамически. Рандомно это псевдослучайное что-то.

Но разница в том, что там canvas, а у тебя div.
В HTML есть три контейнера для интерактивной анимированной графики, это тэги: <canvas>, <svg>, <div>.

Они значительно отличаются:
<canvas> не имеет разметки (видимой), имеет специальные JS-функции (Canvas API) для рисования (CSS отсутствует).
<svg> имеет XML-разметку, имеет специальные SVG-элементы и атрибуты для рисования (CSS не обязательно).
<div> имеет HTML-разметку, имеет обычные HTML-элементы для рисования (CSS обязательно).

Получается три способа:
1. <canvas> / JS
2. <svg> / CSS? / JS
3. <div> / CSS / JS

про коллизию div'ов.

Коллизия это пересечение фигур: прямоугольник-прямоугольник, круг-круг, прямоугольник-круг, и тд. Эти фигуры определяют некую область на игровом объекте, object.area=rect, при этом она не обязана соответствовать форме объекта. Далее эти области попарно проверяются на предмет коллизии при каждой итерации игрового цикла.

состоит из большего количества div.

Область коллизии может состоять из нескольких простых фигур, object.area=[rect,circle], или одной сложной фигуры, object.area=polygon. Более сложные фигуры влияют на производительность игры.

показать пример кода

Для игр используй canvas, туториал, его для этого и ввели в HTML5, иначе много геморроя тебя ждет в будущем.