[tsigel]

<style>
    html, body, #game {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .square {
        position: absolute;
        background: red;
        border: solid 1px #000;
    }

</style>

<div id="game">
    <div id="controls">
        <div data-direction="left" class="control">Налево</div>
        <div data-direction="top" class="control">Вверх</div>
        <div data-direction="down" class="control">Вниз</div>
        <div data-direction="right" class="control">Вправо</div>
    </div>
</div>

<script>

    /**
     * Объект квадрата
     * @param {Number} x
     * @param {Number} y
     * @param {{x: number, y: number}} size
     * @constructor
     */
    var Square = function Square(x, y, size) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.node = null;

        this.createNode();
        this.setStyle();
    };

    /**
     * Создаем элемент
     */
    Square.prototype.createNode = function () {
        this.node = document.createElement("DIV");
        this.node.className = "square";
        document.querySelector("#game").appendChild(this.node);
    };

    /**
     * Добавляем к элементу стили
     */
    Square.prototype.setStyle = function () {
        this.node.style.left = this.x + "px";
        this.node.style.top = this.y + "px";
        this.node.style.width = this.size.width + "px";
        this.node.style.height = this.size.height + "px";
    };

    /**
     * Проверяем есть ли уже такой квадрат
     * @param {{x: number, y: number}} coords
     * @return {boolean}
     */
    Square.prototype.hitTest = function (coords) {
        return this.x == coords.x && this.y == coords.y;
    };

    /**
     * Объект игры
     * @constructor
     */
    var Game = function Game() {

        this.collection = [];
        this.node = document.querySelector("#game");

        this.squareSize = {
            width: 10,
            height: 10
        };

        this.activeSquareCoords = {
            x: 300, y: 300
        };

        this.start();
        this.setHandlers();

    };

    /**
     * Назначаем обработчики на кнопки управления
     */
    Game.prototype.setHandlers = function () {

        var that = this;

        Array.prototype.forEach.call(this.node.querySelectorAll(".control"), function (control) {

            control.addEventListener("click", function () {

                var direction = this.getAttribute("data-direction");

                if (that.collection.some(function (square) {
                            return square.hitTest(this.get()[direction]);
                        }, that)) {
                    alert("О господи! Там уже есть квадрат! Что же делать?");
                } else {
                    that.addSquare(that.get()[direction]);
                }

            }, false)
        });

    };

    /**
     * Создаем первый квадрат, запускаем игру
     */
    Game.prototype.start = function () {
        this.addSquare(this.activeSquareCoords);
    };

    /**
     * Добавляем квадрат
     * @param {{x: number, y: number}} coords
     */
    Game.prototype.addSquare = function (coords) {
        this.collection.push(new Square(coords.x, coords.y, this.squareSize));
        this.activeSquareCoords = {
            x: coords.x, y: coords.y
        };
    };

    /**
     * Получаем объект смещений квадрата
     * @return {{top: {x: number, y: number}, left: {x: number, y: number}, right: {x: number, y: number}, down: {x: number, y: number}}}
     */
    Game.prototype.get = function () {
        return {
            top: {
                x: this.activeSquareCoords.x,
                y: this.activeSquareCoords.y - this.squareSize.height - 2
            },
            left: {
                x: this.activeSquareCoords.x - this.squareSize.width - 2,
                y: this.activeSquareCoords.y
            },
            right: {
                x: this.activeSquareCoords.x + this.squareSize.width + 2,
                y: this.activeSquareCoords.y
            },
            down: {
                x: this.activeSquareCoords.x,
                y: this.activeSquareCoords.y + this.squareSize.height + 2
            }
        }
    };

    var game = new Game();
</script>