Question

您好我是javascript的新手并且正在尝试使用纯javascript编写Tic Tac Toe游戏。我已经实现了大部分内容，但在尝试找出获胜组合时我会陷入困境。

我想在玩家点击元素后检查innerHtml，并检查序列是否匹配，以便我可以宣布获胜者。

这样做我失败了..以下是我写的代码： -

var tile = function(r,c){
  this.row = r;
  this.col = c;

};

var player = function(name, sign){
  this.name = name;
  this.sign = sign
};
var players =[];
players[0]= new player('Surya','X');
players[1]= new player('Darshan','0');
var playerCounter=0;

var board = function(){
  this.tiles =[];
  //create tic and toe tile array
  this.init = function(){
    for(var i = 0; i<3; i++)
      for(var j=0; j<3; j++)
        this.tiles.push(new tile(i,j));
  };
  //Draw the tic tac toc board
  this.drawBoard = function(){
    var boardDiv = document.createElement('div');
    boardDiv.className = 'board';
    boardDiv.setAttribute('id','board');
    var row=0;
    var rowDiv= [];
    for(var i = 0; i<3; i++)
    {
      rowDiv[i] = document.createElement('div');
      rowDiv[i].className = 'row';      
    }
    //9 tiles
    for(var i = 0; i<this.tiles.length; i++)
    {
      var tileDiv = document.createElement('span');
      tileDiv.className = 'tile';
      tileDiv.setAttribute('id','tile['+i+']');
      tileDiv.setAttribute('data-row',this.tiles[i].row);
      tileDiv.setAttribute('data-col',this.tiles[i].col);
      tileDiv.addEventListener('click',function(){
        this.innerHTML = players[playerCounter].sign;
        playerCounter= 1- playerCounter;
      });
      rowDiv[row].appendChild(tileDiv);
      if(i==2 || i==5 || i==8)
        row++;
    }    
    for(var i = 0; i<3; i++)
    {
      boardDiv.appendChild(rowDiv[i]);
    }
    document.body.appendChild(boardDiv);


    this.checkWinner = function(tile,players){

       for(var z=0;z<=1;z++){

        if(tile[0].innerHTML == players[z].sign && <------ Getting Error Here
          tile[1].innerHTML == players[z].sign &&
          tile[2].innerHTML == players[z].sign)
          return true;

        if(tile[3].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[5].innerHTML == players[z].sign)
          return true;

        if(tile[6].innerHTML == players[z].sign &&
          tile[7].innerHTML == players[z].sign &&
          tile[8].innerHTML == players[z].sign)
          return true;

        if(tile[0].innerHTML == players[z].sign &&
          tile[3].innerHTML == players[z].sign &&
          tile[6].innerHTML == players[z].sign)
          return true;

        if(tile[1].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[7].innerHTML == players[z].sign)
          return true;

        if(tile[2].innerHTML == players[z].sign &&
          tile[5].innerHTML == players[z].sign &&
          tile[8].innerHTML == players[z].sign)
          return true;

        if(tile[0].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[8].innerHTML == players[z].sign)
          return true;

        if(tile[2].innerHTML == players[z].sign &&
          tile[4].innerHTML == players[z].sign &&
          tile[7].innerHTML == players[z].sign)
          return true;

           else
               console.log("outside");
       }
    }; 


    isGameOver = this.checkWinner(2,1);

    console.log(isGameOver)

  };




};

var myBoard = new board();
myBoard.init();
myBoard.drawBoard();
myBoard.checkWinner();

我已经指出了我收到错误的位置。当我试图找到innerHtml的值时出现错误..这是Cannot read property 'sign' of undefined

请帮帮我

Answer 1

当你调用函数时，你必须将参数传递给函数checkWinner：tile，players。

var tile = new Tile(0,1);
var player = new player('jiraya','X');
var myBoard = new board();
myBoard.init();
myBoard.drawBoard();
myBoard.checkWinner(tile, player);

TicTacToe游戏中的javascript错误

1 个答案: