Блог

Я делаю небольшую бесплатную игру ascii ski … возврат к игре Win95.

По какой-то причине добавленные промежутки препятствий сгруппированы в одну сторону, несмотря на то, что я устанавливаю абсолютное положение и оставляю произвольную координату.

Вот как это должно выглядеть (промежутки распределены случайным образом):

Вот мой фрагмент кода, который генерирует препятствия с определенным интервалом и назначает абсолютное позиционирование и левое позиционирование:

 function objectFactory() {

var randObj = Math.floor((Math.random()*7) 1),
            randX = Math.floor((Math.random()*700) 1),
            randY = Math.floor((Math.random()*400) 1);

$('#myObstacles').append("<span id=""   randX   "">"   items[randObj]   "</span>");

document.getElementById(randX).style.position = "absolute";
document.getElementById(randX).style.left = randX;
document.getElementById(randX).style.top = 500;
console.log(document.getElementById(randX).style.left);
}
 

Добавленным подразделениям не присваивается left позиция:

Вот как это должно выглядеть:

И console.log(document.getElementById(randX).style.left); ничего не отображает.

Есть мысли?

Вам необходимо указать единицы измерения при назначении .style.left и .style.top :

 document.getElementById(randX).style.left = randX   "px";
document.getElementById(randX).style.top = "500px";
 

(Обычно я бы сказал «Или как вы используете jQuery», за которым следует пример с селектором, но id селекторы, начинающиеся с цифр, — это ЛАВАШ …)

Но отдельно: что, если два (или более) из ваших случайно созданных препятствий находятся в одном и том же randX положении? В конечном итоге вы создадите несколько одинаковых элементов id , что недопустимо.

Вместо этого просто работайте непосредственно с объектами:

 function objectFactory() {
    var randObj  = Math.floor((Math.random()*7) 1),
        randX    = Math.floor((Math.random()*700) 1),
        randY    = Math.floor((Math.random()*400) 1),
        obstacle = $("<span id=""   id   "">"   items[randObj]   "</span>");

    obstacle.css({
        position: "absolute",
        left:     randX,
        top:      500
    }).appendTo("#myObstacles");

}
 

Примечание: всякий раз, когда вы обнаруживаете, что присваиваете информацию о статическом стиле множеству элементов ( position: absolute , top: 500px ), стоит подумать, использовать ли вместо этого класс.