0

我有一些无法工作的 JavaScript 代码。我试过移动一些东西，改变一些关键词，但到目前为止没有任何效果。我让你们来试一试。

这是 javascript 文件：

    var GAME = {

  /////////////////////////////
  // GAME PROPERTIES         //
  /////////////////////////////

  /* LAYOUT PROPERTIES */
  ROWS: 3,
  COLS: 3,
  CELLS: {
    TOTAL: ROWS * COLS,
    CELL_SIZE: 25,
  },

  /////////////////////////////
  // GAME METHODS            //
  /////////////////////////////

  display: function() {

    alert( "ROWS: " + ROWS );
  }

};

在单独的 HTML 网页上，我使用以下代码：

<script type="text/javascript">
<!--
GAME.display();
//-->
</script>

我已经在 firebug 上运行了代码，但出现以下错误：

TypeError: GAME is undefined

我已经尝试过了，但我无法让错误消失。帮助！

提供完整的 HTML：

<!doctype html>
<html>
  <head>

    <meta charset="utf-8">
    <title>JavaScript Canvas | Tic-Tac-Toe</title>

    <style type="text/css">
    #canvas01 {
      border: 1px solid #000;
    }
    </style>


    <!-- JQUERY -->

  </head>
<body>


<div id="canvas01"></div>

<script type="text/javascript" src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.min.js"></script>

<script type="text/javascript" src="game/core.js"></script>

<script type="text/javascript">

GAME.display();


</script>

</body>
</html>
4

3 回答 3

1

您不能在实例化点基于同一对象内的另一个属性定义对象的属性。现在，阻止 GAME 被定义的罪魁祸首是 TOTAL 的赋值（你的 JS 运行时会抛出一个 TypeError 说 ROWS 是未定义的，因为它首先出现）。您应该始终使用局部变量来定义对象的属性，因为谁知道您的游戏何时需要不同的要求？另外，请注意，this当您想要显示行数时，应该使用 指向对象的上下文。你必须做这样的事情：

var rows = 3, cols = 3, cellSize = 25;

var GAME = {



/////////////////////////////
  // GAME PROPERTIES         //
  /////////////////////////////

  /* LAYOUT PROPERTIES */
  ROWS: rows,
  COLS: cols,
  CELLS: {
    TOTAL: rows * cols,
    CELL_SIZE: cellSize,
  },

  /////////////////////////////
  // GAME METHODS            //
  /////////////////////////////

  display: function() {
    alert( "ROWS: " + this.ROWS );
  }
};
于 2013-01-20T21:03:23.520 回答
1

@danronmoon 在正确的轨道上，在这里。

首先，如果这将是一个充满嵌套对象的 BIG 对象，则在创建对象之前，您无法访问分配给其他属性的值。

var obj = {
    a : 1,
    b : 2,
    c : a + b // won't work for 2 reasons
};

其次，如果不将属性分配给函数中的变量或引用完整链，则无法引用属性：

var obj = { a : 1, b : 2, c : null };

obj.c = obj.a + obj.b;
obj.c; // 3

现在它起作用了。

或者：

var obj = {
    a : 1,
    b : 2,
    c : null,
    initialize : function () {
        obj.c = obj.a + obj.b;
    }
};

obj.initialize();

或者

var obj = {
    // ...
    initialize : function () {
        this.c = this.a + this.b;
    }
};

最后一种形式的一个警告： this指向比函数高一级，所以你只能访问函数的兄弟。

var obj = {
    level : 1,
    init : function () {
        // this === obj
    },
    nested : {
        level : 2,
        init : function () {
            // this === obj.nested
        },
        nested : {
            level : 3,
            init : function () {
                // this === obj.nested.nested
            }
        }
    }
};

this除非您在对象中存储对的引用或直接引用它，否则无法使用 访问链中更高的级别parent：

console.log( obj.nested.nested.level );

希望有帮助。

于 2013-01-20T21:14:31.720 回答
1

以前的答案很好，但我只是想建议您考虑以这种方式制作游戏对象：

function Game() {
    var rows = 3,
        cols = 3,
        cells = {
            total: rows * cols, // no problem here
            cellSize: 25
        };
    this.display = function () {
        alert('ROWS: ' + rows); // or here
    };
}    
GAME = new Game();

这样，您可以按顺序编写程序逻辑，并定义变量和函数，而无需它们始终是对象的可公开访问的属性。当然，您可以使用复杂的设计模式走得更远，但对我来说，如果您刚刚开始使用 OO javascript，那么这是一个很好的起点，而且不那么违反直觉。

于 2013-01-20T21:36:09.847 回答