Сделать поле, разметку и заполнить Javascript [закрыт]

Подскажите пожалуйста, как реализовать:

1. Нужно сделать поле 5х5, 10х10 (не принципиально), я делал каждую клеточку отдельно <div> блоком, но как дальше не знаю..
2. Есть допустим кнопка (сгенерировать квадрат), он появлялся над полем(как всплывший элемент) и мышкой перетягивать его в нужную область, как только он в нужной области, он прикрепляется как на картинке.

3. И самое тяжелое, что я не могу раздуплится, так это, если при перетягивании квадрат не соприкасается с квадратом рядом стоящим, красного или если квадрат синий, синего цвета, то он возвращается на место, обратно в центр или если мышка ушла за границы поля, тоже квадрат возвращается на центр.

   Это задал преподаватель сделать, а подача материала ужасная :( Нужно реализовать на Javascript + (jQuery) + Css + Html(без бутстрапа, хотя не принципиально). Вот правила:

4. Бросьте 2 кубика.
5. Сделайте прямоугольник со сторонами, сгенерированными кубиками
6. Прямоугольник должен быть присоединён к вашей существующей территории.
7. Первый прямоугольник игрока помещается в угол, прямоугольник соперника - в противоположный.
8. Если вы не можете сделать сгенерированный прямоугольник, вы пропускаете ход.
9. Игра считается оконченной, когда все пространство заполнено.
10. Побеждает тот, у кого большая территория. Проконсультируйте как вообще это можно сотворить, уже второй день бьюсь, никак не получаеться.. Помогите с созданием Поля и перетаскиванием квадрата с место на место, остальное думаю справлюсь