All geek questions in one place

Tic-tac-toe loop

I am making a tic-tac toe game in javascript. I have outlined some of the ones that, in my opinion, are the main building blocks:

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!");
      }
    }
}

I know that the syntax of my main loop is incorrect. Why can't I do what is currently written? If you had this existing code, what type of loop would you use for this? Sorry if this seems not concrete enough, I just lost all this in the logic!

, , 2 9 ( = 9) . , . 9 ? , , 9 false .

, , .

+4
2

, , .

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.

, :

  • var ask = console.log(prompt('where would you like to go?')); var ask = prompt(currentPlayer + ': where would you like to go?'); - ask .
  • : drawBoard(), .
  • , , "A", . .
  • solutions() , , .
  • "exit" , .
  • ""! .
+1

, window.prompt , console.log . . Chrome Developer Tools.

window.prompt , jsfiddle, . 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 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();
    });
};


;(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 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);
#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;
}
<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>
Hide result
0

Source: https://habr.com/ru/post/1611204/

More articles:


All Articles