2017-01-11 147 views
0

我已經使這個對象處理我的遊戲中的不同選項。對於對象內的每個屬性

var options = 
{ 
    Option: function(name, value, shortcut) 
    { 
     this.name = name; 
     this.value = value; 
     this.shortcut = shortcut; 
     this.texte = createElement("span",this.name + " : " + this.shortcut + "<br />"); 
     this.texte.parent("options"); 
     this.texte.id(this.name); 
    }, 

    toggle: function(shortcut) 
    { 
     for (var o in this) 
     { 
      console.log(o); 
      console.log(o.shortcut); 
      if (o.shortcut == shortcut) 
      { 
       o.value = !o.value; 
       if (o.value) 
       { 
        o.texte.style("fontWeight","bold"); 
        o.texte.style("color","green"); 
       } 
       else 
       { 
        o.texte.style("fontWeight","normal"); 
        o.texte.style("color","red"); 
       } 
       addText("Toggled"+ o.name); 
      } 
     } 
    }, 

    initiate: function() 
    { 
     this.randomSpeed = new this.Option("Random Speed", true,"R"); 
     //this.randomSpeed.show(); 
     this.oneBall = new this.Option("Spawn one ball", false,"O"); 
     //this.oneBall.show(); 
     this.gravity = new this.Option("gravity", false,"G"); 
     //this.gravity.show(); 
     this.collision = new this.Option("Collision", false,"C"); 
     //this.collision.show(); 
     this.paintBackground = new this.Option("Paint mode",false,"P"); 
     //this.paintBackground.show(); 
     this.wall = new this.Option("Wall Collision", false,"W"); 
     //this.wall.show(); 
     this.unstuck = new this.Option("Unstuck", false,"U"); 
     //this.unstuck.show(); 
     this.blow = new this.Option("Mouse blow", false,"B"); 
     //this.blow.show(); 
     this.attraction = new this.Option("Mouse Attraction", false,"A"); 
     //this.attraction.show(); 
     this.superAttraction = new this.Option("Super attraction", false,"A"); 
     //this.superAttraction.show(); 
    } 
}; 

目的是來處理,我可以添加後和使用已經存在相同的代碼新的選擇方式,所有的遊戲型動物的選項。

我使用創建者函數Option(在主對象選項內)在實現它們到遊戲中時創建新選項。

我的問題是與for (var o in this)循環。

console.log(o);給我我所期望的輸出

「選項」 「切換」, 「啓動」, 「randomSpeed」 「oneBall」 「萬有引力」 「碰撞」 「paintBackground」 「牆」, 「脫膠」,「打擊「」景點「 」superAttraction「

但是然後console.log(o.shortcut);不返回任何東西! 我檢查了console of my browser,該物體存在,並且正確地實例化了

謝謝!

----------------------------

此外,我正在尋找這種設計的例子,但我無法找到與此相近的任何東西。你有我可以參考的例子嗎?我真的好奇,看看它通常是如何做到的。

+0

你能提供工作的jsfiddle或者您的代碼部署 – GraveyardQueen

+0

這是當前版本http://gosuness.free.fr/ballsOptions/ 這最新的一個url工作版本http://gosuness.free.fr/balls/ – Albizia

回答

1

的方式參考已經做了的該對象是錯誤的構件,

在代碼for (var o in this)變量o將提及在this對象中的項目的索引,以便以參考的你將不得不項調用它使用this[o]指一個數組時一樣,如下圖所示,

for (var o in this) 
    { 
     console.log(this[o].shortcut); 
     if (this[o].shortcut == shortcut) 
     { 
      this[o].value = !this[o].value; 
      if (this[o].value) 
      { 
       this[o].texte.style("fontWeight","bold"); 
       this[o].texte.style("color","green"); 
      } 
      else 
      { 
       this[o].texte.style("fontWeight","normal"); 
       this[o].texte.style("color","red"); 
      } 
      addText("Toggled"+ this[o].name); 
     } 
    } 

下面是一個工作片段,它不包含遊戲或代碼的所有功能,但它包含的代碼解釋上面,如果你檢查控制檯的快捷鍵將被打印泰德右

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Insert title here</title> 
 
</head> 
 
<body> 
 

 
\t \t <div id="game"> 
 
\t \t </div> 
 
\t \t <aside> 
 
\t \t \t <p> 
 
\t \t \t \t Spawn ball: <br/> 
 
\t \t \t \t remove balls: <br/> 
 
\t \t \t \t reset:<br /> 
 
\t \t \t </p> 
 
    \t \t \t <p id="options"> 
 
    \t \t \t \t <span id="randomSpeed">Random velocity:<br /></span> 
 
\t \t \t \t <span id="oneBall">Spawn one ball:<br /></span> 
 
\t \t \t \t <span id="gravity">Gravity:<br /></span> 
 
\t \t \t \t <span id="collision">Collision:<br /></span> 
 
\t \t \t \t <span id="unstuck">Unstuck balls:<br /></span> 
 
\t \t \t \t <span id="paintBackground">PaintMode:<br /></span> 
 
\t \t \t \t <span id="wall">Walls:<br /></span> 
 
\t \t \t \t <span id="blow">Mouse Blow:<br /></span> 
 
\t \t \t \t <span id="attraction">Mouse attraction:<br /></span> 
 
\t \t \t \t <span id="superAttraction">Super attraction:</span> 
 
\t \t \t \t <br /> 
 
\t \t \t \t <br /> 
 
\t \t \t </p> 
 

 
\t \t </aside> 
 
\t \t <input type="text" onkeypress="keyPressed(event)"> 
 

 
<script> 
 
var options = 
 
{ 
 
\t Option: function(name, value, shortcut) 
 
\t { 
 
\t \t this.name = name; 
 
\t \t this.value = value; 
 
\t \t this.shortcut = shortcut; 
 
\t }, 
 
\t 
 
\t toggle: function(shortcut) 
 
\t { 
 
\t \t for (var o in this) 
 
\t \t { 
 
\t \t \t console.log(this[o].shortcut); 
 
\t \t \t if (this[o].shortcut == shortcut) 
 
\t \t \t { 
 
\t \t \t \t this[o].value = !this[o].value; 
 
\t \t \t \t if (this[o].value) 
 
\t \t \t \t { 
 
\t \t \t \t \t this[o].texte.style("fontWeight","bold"); 
 
\t \t \t \t \t this[o].texte.style("color","green"); 
 
\t \t \t \t } 
 
\t \t \t \t else 
 
\t \t \t \t { 
 
\t \t \t \t \t this[o].texte.style("fontWeight","normal"); 
 
\t \t \t \t \t this[o].texte.style("color","red"); 
 
\t \t \t \t } 
 
\t \t \t \t addText("Toggled"+ this[o].name); 
 
\t \t \t } 
 
\t \t } 
 
\t }, 
 
\t 
 
\t initiate: function() 
 
\t { 
 
\t \t this.randomSpeed = new this.Option("Random Speed", true,"R"); 
 
\t \t //this.randomSpeed.show(); 
 
\t \t this.oneBall = new this.Option("Spawn one ball", false,"O"); 
 
\t \t //this.oneBall.show(); 
 
\t \t this.gravity = new this.Option("gravity", false,"G"); 
 
\t \t //this.gravity.show(); 
 
\t \t this.collision = new this.Option("Collision", false,"C"); 
 
\t \t //this.collision.show(); 
 
\t \t this.paintBackground = new this.Option("Paint mode",false,"P"); 
 
\t \t //this.paintBackground.show(); 
 
\t \t this.wall = new this.Option("Wall Collision", false,"W"); 
 
\t \t //this.wall.show(); 
 
\t \t this.unstuck = new this.Option("Unstuck", false,"U"); 
 
\t \t //this.unstuck.show(); 
 
\t \t this.blow = new this.Option("Mouse blow", false,"B"); 
 
\t \t //this.blow.show(); 
 
\t \t this.attraction = new this.Option("Mouse Attraction", false,"A"); 
 
\t \t //this.attraction.show(); 
 
\t \t this.superAttraction = new this.Option("Super attraction", false,"A"); 
 
\t \t //this.superAttraction.show(); 
 
\t } 
 
}; 
 

 
function keyPressed(e) 
 
{ 
 
\t if (String.fromCharCode(e.which) == " ") 
 
\t { 
 
\t \t \t balls.splice(0,balls.length); 
 
\t \t \t background(70,20,150); 
 
\t \t \t addText("Reset"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t console.log(""+String.fromCharCode(e.which)) 
 
\t \t options.toggle(String.fromCharCode(String.fromCharCode(e.which))); 
 
\t } 
 
} 
 

 

 
options.initiate(); 
 

 
</script> 
 
</body> 
 
</html>

+0

它就像一個魅力! 當你使用括號到一個對象,就像你會用數組一樣調用它是什麼?我對JavaScript很陌生,這不是我學到的東西。 – Albizia

+0

這就是我們從數組中獲取項目的方式 – GraveyardQueen

+0

因此,當您爲'(blabla中的x)'時,'blabla總是被視爲一個數組? – Albizia