Javascript中的多个对象

Javascript中的多个对象,javascript,oop,Javascript,Oop,我在用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("

我在用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);

    }
};
};
它应该创建两个爬行器,然后向下移动第一个,向右移动第二个,但是第二个对象正在覆盖第一个,或者它们只是同时移动,因为我只能看到最后一个爬行器


我知道我的类中一定有一些全局变量,但我一直找不到,而且我是javascript新手,因此希望您能提供帮助。

他们都在共享该图像。您可能需要在构造函数中创建一个新映像。您将无法重用getElementById返回的值

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

他们都在分享这个形象。您可能需要在构造函数中创建一个新映像。您将无法重用getElementById返回的值

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

他们都在分享这个形象。您可能需要在构造函数中创建一个新映像。您将无法重用getElementById返回的值

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

他们都在分享这个形象。您可能需要在构造函数中创建一个新映像。您将无法重用getElementById返回的值

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


document.getElementById(“spider”)
这一行就足以让您只能拥有一个。如果您有两个实例,如果它们都有相同的id,那么如何获得一个实例图像与另一个实例图像?也不要忘记JavaScript有函数作用域。你有很多
这个
可能没有引用你认为它们是什么。你可以使用元素作为构造函数的参数。一直以来都是document.getElementById(“spider”)。多亏了大家,问题解决了。
document.getElementById(“spider”)
这一行就足以让您只能拥有一个。如果您有两个实例,如果它们都有相同的id,那么如何获得一个实例图像与另一个实例图像?也不要忘记JavaScript有函数作用域。你有很多
这个
可能没有引用你认为它们是什么。你可以使用元素作为构造函数的参数。一直以来都是document.getElementById(“spider”)。多亏了大家,问题解决了。
document.getElementById(“spider”)
这一行就足以让您只能拥有一个。如果您有两个实例,如果它们都有相同的id,那么如何获得一个实例图像与另一个实例图像?也不要忘记JavaScript有函数作用域。你有很多
这个
可能没有引用你认为它们是什么。你可以使用元素作为构造函数的参数。一直以来都是document.getElementById(“spider”)。多亏了大家,问题解决了。
document.getElementById(“spider”)
这一行就足以让您只能拥有一个。如果您有两个实例,如果它们都有相同的id,那么如何获得一个实例图像与另一个实例图像?也不要忘记JavaScript有函数作用域。你有很多
这个
可能没有引用你认为它们是什么。你可以使用元素作为构造函数的参数。一直以来都是document.getElementById(“spider”)。感谢大家,问题解决了。您应该将
parent
更改为
parentNode
:)你是对的,我改变了图像,它完全是非故意的。非常感谢@Germanignacioortgarodrigue如果此答案通过单击答案分数下方的复选标记解决了您的问题,则您应该接受此答案。您应该将
父节点
更改为
父节点
:)你是对的,我改变了图像,它完全是非故意的。非常感谢@Germanignacioortgarodrigue如果此答案通过单击答案分数下方的复选标记解决了您的问题,则您应该接受此答案。您应该将
父节点
更改为
父节点
:)你是对的,我改变了图像,它完全是非故意的。非常感谢@Germanignacioortgarodrigue如果此答案通过单击答案分数下方的复选标记解决了您的问题,则您应该接受此答案。您应该将
父节点
更改为
父节点
:)你是对的,我改变了图像,它完全是非故意的。非常感谢@Germanignacioortgarodrigue如果通过单击答案分数下方的复选标记解决了您的问题,您应该接受此答案。