Question

我正在编写一个游戏，到目前为止我所拥有的代表该游戏的游戏板的对象是

// define game object
function Game ( board, numBlocks ) {
    //     board: Raphael object that the snake will live on
    // numBlocks: Number of blocks both horizontally AND vertically -- the grid structure should be squares

    this.board = board;
    this.numBlocks = numBlocks;
    this.snake; // Snake object on the board
    this.openCoords = []; // coordinates on which the snake is not living at the moment
    this.food = null; // food element on board

    this.getAllCoords = function ( )
    {
        // returns list of all grid coordinates on the canvas, 
        // e.g. [{x:0,y:0}, {x:0,y:1}, ..., {x:15, y:15}] on a 16x16 board
        var retList = [];
        for (var i = 0; i < this.numBlocks; ++i)
            for (var j = 0; j < this.numBlocks; ++j)
                retList.push({ x : i, y : j });
        return retList;
    }

    this.Snake = function ( )
    {

        // start with 3 blocks in the center-ish
        var blockWidth = this.board.getSize().width / this.numBlocks;
        var centerCoord = this.openCoords[this.openCoords.length / 2];
        var headElement = new elementOnGrid(
                board.rect(centerCoord.x * blockWidth, centerCoord.y * blockWidth, blockWidth, blockWidth, 5).attr('fill', '#19FF19'),
                centerCoord.x,
                centerCoord.y
            );
    }

    this.elementOnGrid = function ( elem, xpos, ypos )
    {
        //       elem: Rapael element (see: http://raphaeljs.com/reference.html#Element) 
        // xpos, ypos: x and y grid coordinates of the current position of the element 
        return { elem: elem, pos : [xpos, ypos] };
    }

    this.placeFood = function ( )
    {
        var randIndex = randInt(0, this.openCoords.length);
        var randCoord = this.openCoords[randIndex]; // get random x-y grid coordinate from list of open coordinates
        var blockWidth = this.board.getSize().width / this.numBlocks; // width in pixels of a block on the board
        if (this.food == null) // if food element hasn't been initialized
        {
            // initialize the food element
            this.food = new this.elementOnGrid( 
                    board.circle(randCoord.x * blockWidth + blockWidth / 2, randCoord.y * blockWidth + blockWidth / 2, blockWidth / 2).attr('fill', '#cf6a4c'),  // place circle in random location on the board (see http://raphaeljs.com/reference.html#Paper.circle)
                    randCoord.x, 
                    randCoord.y
            ); // set food to be new element of type elementOnGrid
        }
        else // food element has been initialized (game is in play)
        {
            // move the food element

            // ... 
        }

        this.openCoords.splice(1, randIndex); // remove from openCoords the element that    

    }


    this.startNew = function ( ) {
        this.openCoords = this.getAllCoords();
        this.snake = new this.Snake();
        this.placeFood();       
    }
}

我的问题是我得到了

未捕获的TypeError：无法读取属性＆＃39; getSize＆＃39;未定义的

就行了

var blockWidth = this.board.getSize().width / this.numBlocks;

当我跑

时

SG = new Game(snakeBoard, 16);
SG.startNew();

开始游戏。

我知道这是某种类型的范围/继承/提升/等。问题，但我无法确切地指出问题所在。奇怪的是，我刚刚创建了this.Snake ( ) { ... }函数/对象，在此之前var blockWidth = this.board.getSize().width / this.numBlocks;函数中的行this.placeFood ( ) { ... }并没有造成问题，尽管我我们看不出任何根本不同的东西..

CLICK HERE FOR A LIVE EXAMPLE

Answer 1

你认为这是一个范围问题是正确的。您之前使用placeFood()执行的操作与使用Snake()执行的操作之间的差异是new关键字。

new关键字告诉该函数管理自己的this，因此Game上下文不再适用于this函数中的Snake。

一种解决方案是将上下文传递给Snake函数，就像这样

this.snake = new this.Snake(this);

然后像{/ p>这样管理Snake构造函数中的上下文

this.Snake = function(game) {
  var blockWidth = game.board.getSize().width / game.numBlocks;
  ...
  // replacing `this` with `game` for all relevant properties

有关new关键字的详细信息，请参阅here。

需要帮助弄清楚为什么这个对象是未定义的

1 个答案: