我已经让这个对象在我的游戏中处理不同的选项。
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();
}
};
目的是以一种我可以在以后添加新选项并使用已存在的相同代码的方式处理游戏的所有不同选项。
我使用创建者功能选项(在主要对象选项中)来实现新选项,因为我将它们实现到游戏中。
我的问题在于for (var o in this)
循环。
console.log(o);
为我提供了我期望的输出
&#34;选项&#34; &#34;肘节&#34; &#34;发起&#34; &#34; randomSpeed&#34; &#34; oneBall&#34; &#34;重力&#34; &#34;碰撞&#34; &#34; paintBackground&#34; &#34;壁&#34; &#34;脱胶&#34; &#34;吹塑&#34; &#34;吸引&#34; &#34; superAttraction&#34;
然后console.log(o.shortcut);
没有返回任何东西!
我检查了console of my browser,对象存在,并且正确实例化
谢谢!
----------------------------
此外,我正在寻找这种设计的例子,但我无法找到任何接近这一点的东西。你有可以参考的例子吗?我真的很想知道它是如何完成的。
答案 0 :(得分: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>
<div id="game">
</div>
<aside>
<p>
Spawn ball: <br/>
remove balls: <br/>
reset:<br />
</p>
<p id="options">
<span id="randomSpeed">Random velocity:<br /></span>
<span id="oneBall">Spawn one ball:<br /></span>
<span id="gravity">Gravity:<br /></span>
<span id="collision">Collision:<br /></span>
<span id="unstuck">Unstuck balls:<br /></span>
<span id="paintBackground">PaintMode:<br /></span>
<span id="wall">Walls:<br /></span>
<span id="blow">Mouse Blow:<br /></span>
<span id="attraction">Mouse attraction:<br /></span>
<span id="superAttraction">Super attraction:</span>
<br />
<br />
</p>
</aside>
<input type="text" onkeypress="keyPressed(event)">
<script>
var options =
{
Option: function(name, value, shortcut)
{
this.name = name;
this.value = value;
this.shortcut = shortcut;
},
toggle: function(shortcut)
{
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);
}
}
},
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();
}
};
function keyPressed(e)
{
if (String.fromCharCode(e.which) == " ")
{
balls.splice(0,balls.length);
background(70,20,150);
addText("Reset");
}
else
{
console.log(""+String.fromCharCode(e.which))
options.toggle(String.fromCharCode(String.fromCharCode(e.which)));
}
}
options.initiate();
</script>
</body>
</html>
&#13;