Javascript中的多個對象

Question

我在使用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很陌生，所以任何幫助將不勝感激。

Answer 1

他們都在分享圖片。您可能需要在構造函數中創建一個新的圖像。您將無法重新使用getElementById返回的值。

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