Javascript Tic-tac-toe，如何在模块之间通信 'move'

Question

我是一个相对较新的开发人员，边做边学 JS。我正在尝试使用 vanillaJS 创建一个简单的 TicTacToe 游戏。

现在我有三个“模块”(它们实际上只是对象文字):Board、Player 和 TicTacToe (基本上只是游戏状态)。

Board有一个state属性，它是一个3*3的数组，代表TicTacToe棋盘。它会在调用 newMove 方法时更新，并且有一个 isInWinningState 方法，当有人连续获得三个时，该方法返回 true。

Player 有一个marker 属性，可以是“X”或“O”。它还具有 turn 属性，当轮到该玩家时，该属性为 true；当玩家赢得游戏时，它还具有 isWinner 属性。玩家可以移动，这意味着它会在棋盘上调用new Move。

TicTacToe 对象具有属性、board、player1 和 player2 以及用于初始化每个属性的方法。这些。它还有一个属性 currentPlayer 来跟踪轮到谁了。

我觉得此时每个对象的内部逻辑已经相当彻底地实现了(尽管，就像我说的，我是一个菜鸟，可能会遗漏一些东西)。

但是，我发现每个对象之间的通信更加困难。

特别是，我不确定如何让玩家移动。 Player 对象有一个 move 方法(尽管我还没有在该方法中编写任何内容)，而 Board 对象有一个 >newMove 方法，但我不知道如何通过 TicTacToe 连接它们，这样当 currentPlayer 调用其 move方法，board 的 newMove 方法被调用。

我希望这一点很清楚。这是代码:

// board.js
var Board; 

Board = {
    state: [[undefined, undefined, undefined], [undefined, undefined, undefined], [undefined, undefined, undefined]],

    isInWinningState: function() { 
        return Board.topLeftToBottomRightIsComplete() || 
            Board.topRightToBottomLeftIsComplete() || 
            Board.aRowIsComplete() || 
            Board.aColIsComplete();
    }, 

    newMove: function(newMarker, x, y) {
        return Board.state.map( function(row, rowIndx) {
            if (rowIndx===y) {
                return row.map( function (marker, colIndx) {
                    if (colIndx===x) {
                        return newMarker;
                    } else {
                        return marker;
                    }
                });
            } else {
                return row;
            }
        });
    },

};

module.exports = Board;




// player.js
var Player; 

Player = {
    marker: undefined,
    turn : false,
    isWinner: false,

    assignMarker: function(newMarker) {
        this.marker = newMarker;
    }, 

    startTurn: function() {
        this.turn = true;
    },

    move: function() {
        if (this.turn = true) {
            // move
        } else {
            // player can't move
        }
    },

    wins: function() {
        this.isWinner = true;
    }
}

module.exports = Player;




// tic-tac-toe.js
let Board = require('./board.js'),
    Player = require('./player.js');

var TicTacToe;

TicTacToe = {
    board: undefined,
    player1: undefined,
    player2: undefined,
    currentPlayer: undefined,

    startGame: function() {
        this.board = Object.create(Board);
        this.currentPlayer = this.player1.marker==='X' ? this.player1 : this.player2;
    },

    initPlayer1: function() {
        marker = Math.random() > 0.5 ? 'X' : 'O';
        this.player1 = Object.create(Player);
        this.player1.assignMarker(marker);
    },

    initPlayer2: function() {
        marker = this.player1.marker==='X' ? 'O' : 'X';
        this.player2 = Object.create(Player);
        this.player2.assignMarker(marker);
    },

    newTurn: function() {
        this.currentPlayer = this.currentPlayer===this.player1 ? this.player2 : this.player1;
    },

    gameOver: function() {
        if this.board.isInWinningState() {
            return true;
        } else {
            return false;
        }
    }
}

module.exports = TicTacToe;

Answer 1

将 TicTacToe 对象传递到其子对象的方法中。您稍后可以使用它来回调主对象中的游戏更新方法，并允许您访问游戏的其他对象。

玩家:

  function doMove(game,x,y,marker)= {
   // you do move here
   game.update(x,y,marker);
  }

井字游戏:

  function update(x,y,marker)={
   this.board.updateBoard(this,x,y,marker);
  }

董事会:

  function updateBoard (game,x,y,marker)={
   //do some update board rendering
  }

然后在 TicTacToe 对象中，您只需调用 this.player1.doMove(this,x,y,marker) 即可正常工作