为什么我的内部函数在我的简单Javascript OOP游戏中返回为undefined

时间:2014-01-14 00:17:59

标签: javascript jquery oop

我正在构建一个非常简单的!在Javascript中使用面向对象编程的游戏。分数函数, 从另一个函数中调用时,返回为'undefined';

我为'this'设置了一个var并将其命名为'that'。然后在内部函数中使用'that'

bobsGame = {}

bobsGame.player  = function(which){
this.which = which;
this.which.score = 0;
that = this;

this.setScore = function(which, diceVal){
    score = that.which.score;
    console.log(score);
    $('#'+which+'-score').html(score);
    }

this.rollDice = function() {
    diceVal = Math.floor(Math.random() * 6 + 1);
    $('#'+which+'-dice-val').html(diceVal);
    /* console.log(which, diceVal); These vars are correct */
    that.setScore(which, diceVal); //returns undefined
    }
}

var player1 = new bobsGame.player('player1');
var player2 = new bobsGame.player('player2'); 

$('#roll-dice-btn-1').click(function(){
player1.rollDice();
});
$('#roll-dice-btn-2').click(function(){
player2.rollDice();
});

3 个答案:

答案 0 :(得分:2)

看起来你的问题归结为字符串作为字符串文字,而字符串作为字符串对象实例归结为。

var player = new Player("bob");

,其中

Player = function (name) {
    this.name = name;
    this.name.score = 0; // here is the root of the problem
}

关键是字符串文字不能动态地添加属性,因为JS会对它们进行处理。

Player = function (name) {
    this.name = name;
    this.score = 0;
}

应该可以正常工作。

答案 1 :(得分:2)

问题在于:

bobsGame.player  = function(which){
  this.which = which;
  this.which.score = 0;
  /* ... */
};

var player1 = new bobsGame.player('player1');

which是一个原始字符串,您正在尝试在其中定义属性。

在对象或对象String中转换which,你会没事的。

this.which = new String(which);
this.which.score = 0;

或(我个人更喜欢的)

// Dont forget to update the rest of your code.
this.player = {
   name: which,
   score: 0
};

答案 2 :(得分:1)

我认为你的游戏存在一些基本问题,而你并没有真正掌握。

设置值which(基本上是你的玩家名字)的想法很好,但是你试图将该玩家的得分保持在他们的名字上。如果你忽略了那个不可能的根本问题,因为名字(which)是一个字符串,正如其他答案所指出的那样,并检查你要做的事情;看起来你正试图在一个对象中跟踪每个玩家的得分,你可以随时访问这个对象以获得完整的游戏状态。不幸的是,你建立这种方式的方式 - 这是行不通的。您正在为每个玩家创建一个新的玩家对象 - 这些玩家将分别存储在内存中,无法相互访问。

你试图在这里构建的结构不会像你想要做的那样工作,而是在你达到实际的语法和语言之前。你正在努力解决的逻辑实施问题。

你真正想要的东西可能更像是这样:

<script type="text/javascript">
var BobsGame = function()
{
    this.Players = [];
    this.current_player_turn = 0;
}

BobsGame.prototype.addPlayer = function(Player)
{
    Player.Game = this;
    this.Players.push(Player);
    Player.setId(this.Players.length);

    return this;
}

BobsGame.prototype.updateWinner = function()
{
    var Winner = null;
    for (var i = 0, players = this.Players.length; i < players; i++)
    {
        if (!Winner || (this.getPlayer(i) && this.getPlayer(i).score > Winner.score))
        {
            Winner = this.getPlayer(i);
        }
    }

    $('#game-winner').text(Winner.name + " won with a score of " + Winner.score + "!");
}


BobsGame.prototype.getPlayer = function(id)
{
    return this.Players[ id ] || null;
}

var Player = function(name)
{
    this.Game = null;

    this.score = 0;
    this.name = 0;
    this.id = 0;
}

Player.prototype.roll = function()
{
    diceVal = Math.floor(Math.random() * 6 + 1);
    return this.setScore(diceVal);
}

Player.prototype.setScore(new_score)
{
    this.score = new_score;
    $('#' + this.name + '-dice-val').text(new_score);
    this.score = diceVal;

    return this;
}

///implementation

var myGame = new BobsGame();
var Player1 = new Player("Player 1");
var Player2 = new Player("Player 2");

myGame.addPlayer(Player1).addPlayer(Player2);

$('#roll-dice-btn-1').click(function(){
    Player1.roll();
    myGame.updateWinner();
});

$('#roll-dice-btn-2').click(function(){
    Player2.roll();
    myGame.updateWinner();
});
</script>

上面的代码创建了一个游戏对象,它存储整个游戏的状态。它还定义并创建了几个Player对象,它们都负责存储自己的状态(id,name和score)。玩家知道如何掷骰子(掷骰方法),然后使用游戏对象来确定赢得哪个玩家。

这种应用程序结构更容易推理,并且分离了游戏所负责的问题以及玩家负责的内容。