Объект рисуется не удовлетворяя условия......

[Ndex]

Всем привет , я новичок в этом деле))) Проблема в следующем:
есть кнопка при нажатии на которую в html добавляется новый див( с новыми координатами он же кубик который рисуется). Есть функция которая проверяет нет ли уже дива по заданным координатам и если есть то рекурсивно вызывается новое смещение по координатам.

<div id="obert">
       <div id="cubik"></div>
</div>
          <div class="top_button">
       <button  type="submit">
             <img src="http://2.bp.blogspot.com/-       Ka01fTxAf60/UgiQjKfcTAI/AAAAAAAAC3U/YZMu6PIB1cg/s1600/str_15.gif"onclick="Up()"> 
       </button>

А вот скрипт, при выводе к консоль всё ок, условие выполняется, но всё равно кубик рисуется ....( есть и другие кнопки (права,лева , низ....)

var lastX, lastY, firstX, firstY, shiftX = 32, shiftY = 32;
var offset = $('#cubik').offset();
lastX = offset.left;
lastY = offset.top;

var lookDiv = function(lX, lY)
{
  var element = document.elementFromPoint(lastX,lastY);
  console.log(lastX,lastY,element);
  if (window.element != 'undefine') { 
   console.log("ok");
   return false;
 
 }

};
 

var addDiv = function()
{


	$ ( "#obert" ) 
		.append ( "<div></div>");
	$( "#obert div:last-child" )
		.addClass("cube")
		.offset( { 
			top: lastY,
			left: lastX 
		});



};



function Up(lX, lY)
{
 lastX = lastX;
 lastY -= shiftY;
if (lookDiv()) {
// не ресуем, а рекурсивно вызываемся повторно
up(lastX, lastY);
} else {
addDiv();
}
 };

[tsigel]

Ndex,
Условие на 42-й строке никогда не будет истинно, так как функция "lookDiv" всегда возвращает ложь.
Каждому свое, но мне нравится этот гайд по оформлению кода.

[Ndex]

Да со стилем у меня бардак(((((

я решил сравнивать не со значением а с классом дива....

if (element != $('#cube'))

какое значение мне в итоге возвращать ?


p.S. учебник читаю)))

[tsigel]

Ndex,

if ($(".cube").length) {
    // кубик есть
    return true;
  } else {
    // кубика нет
    return false;
  }

Можно сделать метод:

function hasCube() {
   return $(".cube").length;
}

Тогда:

function Up(lX, lY) {
  lastX = lastX;
  lastY -= shiftY;
  if (hasCube()) {
    // не ресуем, а рекурсивно вызываемся повторно
    up(lastX, lastY);
  } else {
     addDiv();
  }
};

Правда теперь у вас функция up войдет в бесконечную рекурсию, так как нет условия выхода.

[Ndex]

да именно так и происходит,

с  $(".cube").length;

в любой вариации происходит тоже самое....

[tsigel]

$(".cube").length возвращает количество элементов с классом "cube" в документе. В javascript работает динамическое приведение типов. 0 - ложь , 1 и более - истина. Если у вас что-то не работает - значит у вас либо всегда есть элемент с таким классом и тогда надо уточнить селектор, либо его никогда нет

[Ndex]

да именно в этом то и проблема ведь каждому div
присваевается класс cube

$( "#obert div:last-child" )
        .addClass("cube")

соответственно ($(".cube").length) полюбому будет в документе.
поэтому получается, что такая реализация не подойдёт.((((

может есть другие мысли о том как это сделать?)

[tsigel]

Ndex,
Не до конца понимаю что вы хотите сделать. Объясните подробно всю задачу целиком.

[Ndex]

задача такова: в середине окна браузера имеется квадратик с фиксированными размерами,
Так же имеется консоль(4 кнопки: вверх вправо,влево вниз) при нажатии например кнопки вверх происходит добавление ещё одного квадрата над фиксированным. так же при нажатии других кнопок происходит это же только в соответствующих направлениях.

всё отрисовывается и работает. только вот проблема если мы нарисуем квадрат этими "кубиками" и вернёмся в начальное положение и нарисует квадрат на месте где уже есть ..... мне нужно если мы натыкаемся на квадрат делать сдвиг......

[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>