Multiple objects in Javascript

Question

I'm having troubles making multiple instances of a class in Javascript. The class is like this:

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);

    }
};
};

The idea is to instanciate multiple spiders on a game board, but when I do:

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();

It should create 2 spiders, and then move the first down and the second one right, but the second object is overwriting the first one, or they just move at the same time because I can see only the last spider.

I know that there must be some global variable in my class, but I've been unable to find it, and I'm new to javascript, so any help would be appreciated.

document.getElementById("spider") that line alone makes it so that you can only have one. If you had two, how would you get one instances image vs another, if they both have the same id? — user400654
– user400654, Commented Jul 11, 2014 at 20:22
Also don't forget that JavaScript has function scope. You have a lot of this that are probably not referencing what you think they are. — dee-see
– dee-see, Commented Jul 11, 2014 at 20:23
You could use the element as a parameter to the constructor. — NickSuperb
– NickSuperb, Commented Jul 11, 2014 at 20:26
It was the document.getElementById("spider") all along. Thanks to everyone, problem solved. — German Ignacio Ortega Rodrigue
– German Ignacio Ortega Rodrigue, Commented Jul 11, 2014 at 20:29

Rich Remer · Accepted Answer · 2014-07-11 20:24:15Z

3

They are all sharing the image. You need to create a new image inside the constructor, probably. You won't be able to reuse the value returned by getElementById.

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

answered Jul 11, 2014 at 20:24

Rich Remer

2,7971 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

taggon Over a year ago

You should change parent into parentNode. :)

German Ignacio Ortega Rodrigue Over a year ago

You are right, I changed the image and it completely worked as indended. Thanks a lot!

dee-see Over a year ago

@GermanIgnacioOrtegaRodrigue You should accept this answer if it solved your problem by clicking the check mark below the answer's score.

Collectives™ on Stack Overflow

Multiple objects in Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related