Несколько объектов в Javascript

126
17

У меня возникли проблемы с созданием нескольких экземпляров класса в Javascript. Класс выглядит следующим образом:

function spider(){
this.step = 3;
this.moveDelay = 12;
this.moving = false;
this.moveInterval = null;
this.movement_list = null;
this.iterator = 0;
this.movement_delay = 500;
this.image = document.getElementById("spider");

this.iterate_movement = function (){
var bx = board.to_block_x(this.getx());
var by = board.to_block_y(this.gety());

switch(this.movement_list[this.iterator]) {
case "l":
var pos = {x: bx-1, y: by};
this.test_and_move(pos);
break;

case "d":
var pos = {x: bx, y: by+1};
this.test_and_move(pos);
break;

case "r":
var pos = {x: bx+1, y: by};
this.test_and_move(pos);
break;

case "u":
var pos = {x: bx, y: by-1};
this.test_and_move(pos);
break;
}
if(this.iterator < this.movement_list.length - 1) this.iterator += 1;
else this.iterator = 0;
};

this.animate = function (final_pos) {
var x = this.getx();
var y = this.gety();

var dx = final_pos.x - x;
var dy = final_pos.y - y;

this.moving = dx!=0 || dy!=0;

if (this.moving) {
if (dx >= this.step)
this.setx(x+this.step);
else if (dx <= -this.step)
this.setx(x-this.step);
else
this.setx(final_pos.x);

if (dy >= this.step)
this.sety(y+this.step);
else if (dy <= -this.step)
this.sety(y-this.step);
else
this.sety(final_pos.y);
}
else
window.clearInterval(this.moveInterval);
};

this.setx = function (x, set_layer) {
this.image.setAttribute("x", +x);
this.conditioned_set_layer(set_layer);
};

this.sety = function (y, set_layer) {
this.image.setAttribute("y", +y);
this.conditioned_set_layer(set_layer);
};

this.set_pos = function (x, y, movement_list, set_layer) {
this.setx(x, false);
this.sety(y, false);
this.movement_list = movement_list;
this.conditioned_set_layer(set_layer);
};

this.getx = function () {
return +this.image.getAttribute("x");
};

this.gety = function () {
return +this.image.getAttribute("y");
};

this.get_pos = function () {
return {
x: this.getx(),
y: this.gety(),
}
};

this.set_layer = function (layer) {
layer.appendChild(this.image);
};

this.auto_set_layer = function () {
var pos = this.get_pos();

if (board.blocks[pos.x][pos.y].hill)
this.set_layer(l_hill_entities);
else
this.set_layer(l_ground_entities);
};

this.conditioned_set_layer = function (set_layer) {
if ((set_layer === undefined || set_layer == true) &&
!this.moving)
this.auto_set_layer();
};

this.test_and_move = function (pos) {
if (board.is_inside(pos)) {
this.moving = true;
var self = this;

var move_f = function () {
self.animate(board.to_board_pos(pos))
};

this.moveInterval = window.setInterval(move_f,
this.moveDelay);

}
};
};

Идея состоит в том, чтобы стимулировать множественные пауки на игровом поле, но когда я это делаю:

var spider1 = new spider();
spider1.set_pos(0, 0, ["d"]);
spider1.iterate_movement();
var spider2 = new spider();
spider2.set_pos(0, 0, ["r"]);
spider2.iterate_movement();

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

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

спросил(а) 2021-01-25T17:34:20+03:00 5 месяцев назад
1
Решение
90

Все они разделяют изображение. Вероятно, вам нужно создать новое изображение внутри конструктора. Вы не сможете повторно использовать значение, возвращаемое getElementById.

this.image = document.createElement("img");
document.getElementById("spider").parentNode.appendChild(this.image);

ответил(а) 2021-01-25T17:34:20+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема