Tic-Tac-Toe Loop

时间:2015-10-11 20:22:49

标签: javascript function loops control-flow

我正在用javascript制作一个井字游戏。我已经列出了一些我认为是基本构建模块的内容:

var board = [
            0, 0, 0,
            0, 0, 0,
            0, 0, 0
            ];
gameOn = true;
player1Move = true;
counter = 0;
player1 = [];
player2 = [];
var ask = console.log(prompt('where would you like to go?'));

var drawBoard = function(){
    console.log("   A " + (board[0]) + "| B " + (board[1]) + "| C " + (board[2]));
    console.log("  ------------- ");
    console.log("   D " + (board[3]) + "| E " + (board[4]) + "| F " + (board[5]));
    console.log("  ------------- ");
    console.log("   G " + (board[6]) + "| H " + (board[7]) + "| I " + (board[8]));
    console.log("  ------------- ");
};

var solutions = [
    (board[0] && board[1] && board[2]) || (board[3] && board[4] && board[5]) ||
    (board[6] && board[7] && board[8]) || (board[0] && board[3] && board[6]) ||
    (board[1] && board[4] && board[7]) || (board[2] && board[5] && board[8]) ||
    (board[0] && board[4] && board[8]) || (board[2] && board[4] && board[6])
];



while (gameOn === true){
// for loop for game logic
    for (var i = 0 ; i < 9; i++){
      if (player1Move === true) {
        player1.push(ask);
        drawBoard();
        player1Move = false;
      } else if (player1Move === false){
        player2.push(ask);
        drawBoard();
        player1Move = true;
      } else if ((player1 || player2) === solutions){
          gameOn = false;
          console.log((player1 || player2) + "wins!");
      } else {
        gameOn = false;
        console.log("Tie Game!");
      }
    }
}

我知道主循环的语法不正确。为什么我不能做目前写的?如果你有这个现有的代码,你会用什么类型的循环设置来完成这个?对不起,如果这看起来不够具体,我只是迷失在这一切的逻辑中!

使用这个现有的循环我想要做的就是通过并提示2个用户9次(因为最大移动= 9)现在总共。一旦有效,我将不断添加更多游戏逻辑。为什么我不能得到9次提示?目前的结果是,它提示我一次,打印出9次,然后打错。

顺便说一句,这只需要在终端窗口中工作。

2 个答案:

答案 0 :(得分:1)

我尽可能少地更改了你的代码,但有些东西是不同的,我正在逐步解释。

var board = {
    A: null,
    B: null,
    C: null,
    D: null,
    E: null,
    F: null,
    G: null,
    H: null,
    I: null
};

gameOn = true;
player1Move = true;

var drawBoard = function(){
    console.log("   A " + (board.A || '') + "| B " + (board.B || '') + "| C " + (board.C || ''));
    console.log("  ------------- ");
    console.log("   D " + (board.D || '') + "| E " + (board.E || '') + "| F " + (board.F || ''));
    console.log("  ------------- ");
    console.log("   G " + (board.G || '') + "| H " + (board.H || '') + "| I " + (board.I || ''));
    console.log("  ------------- ");
};

var solutions = function() {
    return (board.A && (board.A == board.B && board.A == board.C))
        || (board.D && (board.D == board.E && board.D == board.F))
        || (board.G && (board.G == board.H && board.G == board.I));
};

drawBoard();
var currentPlayer;

while (gameOn === true){
// for loop for game logic
    for (var i = 0 ; i < 9; i++){
        if (solutions()){
            console.log(currentPlayer + " wins!");
            gameOn = false;
            break;
         }
        //else {
        //    gameOn = false;
        //    console.log("Tie Game!");
        //}
        currentPlayer = 'Player 1';
        if(!player1Move)
            currentPlayer = 'Player 2';

        var ask = prompt(currentPlayer + ': where would you like to go (A or B or C or ..)?');
        if(ask == 'exit') {
            gameOn = false;
            break;
        }

        if (player1Move === true) {
            //player1.push(ask);
            board[ask] = 'X';
            drawBoard();
            player1Move = false;
        } else if (player1Move === false){
            board[ask] = 'O';
            drawBoard();
            player1Move = true;
        }
    }
}

它没有完全结束,但之后你可以做的事情,也许你不希望我为你做这一切。

这一切都适用于Chrome控制台。

有一些基本的东西阻碍了你:

  1. var ask = console.log(prompt('where would you like to go?'));应为var ask = prompt(currentPlayer + ': where would you like to go?'); - 您的版本填充ask为空。
  2. 此提示也位于错误的位置:它需要在循环中,并且在drawBoard()之后,以便玩家可以查看。
  3. 我已经将电路板从一个阵列变成了一个物体,所以玩家的答案就像是&#39; A&#39;直接引用对象字段。这样就可以移除播放器阵列。
  4. 正如您所见,solutions()功能需要完成,并且可能有更简洁的方法来执行此操作。
  5. 我增加了写“退出”的可能性。在提示中,否则无法提前退出游戏。
  6. 我没有完成领带游戏!&#39;代码。

答案 1 :(得分:0)

确保您了解全局对象,window.prompt是什么,以及console.log在您的上下文中是什么。 绝对必要来了解您的环境的调试器。在Chrome中,它被称为开发人员工具。

window.prompt在像jsfiddle这样的代码沙箱或者堆栈溢出的bulit-in中并不是很有用。我建议您使用HTML作为用户界面。

function init() {
    trapForm();
    trapInput();
    toggleCurrentUser();
    askUser();
}

var game = [
    [null,null,null],
    [null,null,null],
    [null,null,null]
];

var trapInput = function() {
    //  capture input and use to to create a play in the game
    document.querySelector('#go').addEventListener('click',function(ev) {

        var position = document.querySelector('#square').valueAsNumber;

        if (position < 10 && position > 0) {

            //  render X or O to the HTML
            var td = document.querySelectorAll('#t3 td')[position-1];
            td.innerHTML = currentUser;

            //  modify the corresponding game array
            var row = Math.floor( (position-1) / 3 );
            var col = ( (position+2) % 3) ;
            game[row][col] = currentUser;

            //  this helps us visualize what's happening
            debug(game);
            checkGameStatus();
            toggleCurrentUser();            

        } else {
            debug({"msg":"illegal move"});
        }

    });
};

var trapForm = function() {
    //  prevent form from submitting
    var f = document.querySelector('#f');
    f.addEventListener('submit',function(ev) {
        ev.preventDefault();
        trapInput();
    });
};

&#13;
&#13;
;(function(window,document,undefined){
  "use strict";

  function init() {
      trapForm();
      trapInput();
      toggleCurrentUser();
      askUser();
  }

  var currentUser = 'Y';

  var toggleCurrentUser = function(){
      if (currentUser === 'X') {
       currentUser = 'Y';   
      } else {
          currentUser = 'X';
      }
      document.querySelector('#currentuser').value = currentUser;
  };

  var isVirginal = function(game) {
      return game.every(function(row) {
          return row.every(function(cell) { return (cell === null); });
      });
  };

  var isStaleMate = function(game){
      return game.every(function(row){
          return row.every(function(cell){
              return (cell === 'X' || cell === 'Y');
          });
      });
  };

  var horizontalWinner = function(game) {
      var r = false;
      return game.some(function(row){
          var firstletter = row[0];
          if (firstletter === null) {
              return false;
          } else {
              return row.every(function(cell){
                  return ( cell !== null && cell === firstletter);
              });            
          }
      });
  };

  var verticalWinner = function(game) {
      var r = false;
      for (var i = 0; i < 4; i++) {
          if (game[0][i] === null) {
              continue;
          }
          if (game[0][i] === game[1][i] && game[1][i] === game[2][i]) {
              r = game[0][i];
              break;
          }
      };
      return r;
  };

  var diagonalWinner = function(game) {
      var r = false;
      if (game[0][0] !== null && (game[0][0] === game[1][1] === game[2][2])) {
          r = game[0][0];
      }
      if (game[0][2] !== null && (game[0][2] === game[1][1] === game[2][0])) {
          r = game[0][2];
      }    
      return r;
  };

  var checkGameStatus = function(){
      var r = 'unknown';
      if (isVirginal(game)) {
          r = 'Virginal Game';   
      } else {
          r = 'In Play';   
      }
      if (isStaleMate(game)) {
          r = 'Stale Mate';
      }
      if (diagonalWinner(game)){
          r = 'Diagonal Winner: ' + diagonalWinner(game);
      }
      if (verticalWinner(game)) {
          r = 'vertical Winner: ' + verticalWinner(game);
      }
      if (horizontalWinner(game)) {
          r = 'Horizontal Winner: ' + horizontalWinner(game);
      }
      document.querySelector('#status').value = r;
  };

  var debug = function(stuff) {
      document.querySelector('#debug').innerHTML = JSON.stringify(stuff);
  };

  var game = [
      [null,null,null],
      [null,null,null],
      [null,null,null]
  ];

  var trapInput = function() {
      //	capture input and use to to create a play in the game
      document.querySelector('#go').addEventListener('click',function(ev) {

          var position = document.querySelector('#square').valueAsNumber;

          if (position < 10 && position > 0) {

              //	render X or O to the HTML
              var td = document.querySelectorAll('#t3 td')[position-1];
              td.innerHTML = currentUser;

              //	modify the corresponding game array
              var row = Math.floor( (position-1) / 3 );
              var col = ( (position+2) % 3) ;
              game[row][col] = currentUser;

              //	this helps us visualize what's happening
              debug(game);
              checkGameStatus();
              toggleCurrentUser();            

          } else {
              debug({"msg":"illegal move"});
          }

      });
  };

  var trapForm = function() {
      //	prevent form from submitting
      var f = document.querySelector('#f');
      f.addEventListener('submit',function(ev) {
          ev.preventDefault();
          trapInput();
      });
  };

  document.addEventListener('DOMContentLoaded',init);

})(window,document);
&#13;
#t3 {
    font-family: "Courier New";
    font-size: xx-large;
}
#t3 td {
	border: 1px solid silver;
	width: 1em;
	height: 1em;
    vertical-align: middle;
    text-align: center;
}

#f {
    position: relative;
}

#f label, input, button {
    float: left;
    width: 200px;
}

#f label, button {
    clear: left;
}

hr {
    clear: both;
    visibility: hidden;
}
&#13;
<form id="f">
    <label for="currentuser">Current User</label>
    <input type="text" readonly id="currentuser" name="currentuser" />
    <label for="square">What Square (1-9)?</label>
    <input type="number" step="1" min="1" max="9" id="square" name="square" />
    <label for="status">Game Status</label>
    <input type="text" readonly id="status" name="status" value="Virgin Game" />
    <button type="button" id="go">make move</button>
</form>

<hr />

<table id="t3">
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

<pre id="debug"></pre>
&#13;
&#13;
&#13;