www.webdeveloper.com
Results 1 to 3 of 3

Thread: Need Some Help With Tic Tac Toe Game

  1. #1
    Join Date
    Oct 2013
    Posts
    9

    Need Some Help With Tic Tac Toe Game

    Hey everyone,

    I've been working on a tic tac toe game for a while now. However I have gotten somewhat stuck. I want to be able to do these things:

    • Show player turn
    • Let player know game is over when won
    • Give a restart option


    Here is my javascript so far:

    <script>
    var playerTurn = 1;


    var preOutput = document.getElementById("out");
    var txtInput = document.getElementById("input");
    var btnSubmit = document.getElementById("btnSubmit");


    var board = [
    [ " ", " ", " " ],
    [ " ", " ", " " ],
    [ " ", " ", " " ]
    ];

    updateBoard();


    btnSubmit.addEventListener("click", function() {

    var moveInput = txtInput.value.split(",");
    console.log(moveInput);

    var moveLetter;



    if(playerTurn % 2 == 0) {
    moveLetter = "x";
    } else {
    moveLetter = "o";
    }

    makeMove(moveInput[0], moveInput[1], moveLetter);
    })

    function makeMove(x,y,val) {

    if(board[y][x] == " ") {

    board[y][x] = val;


    var win = checkMove(x,y);


    if(win) {
    console.log('win');
    }

    updateBoard();

    playerTurn ++;
    } else {

    }
    }

    function updateBoard() {

    var newContent = "";

    preOutput.innerHTML = "";

    for(var y = 0; y < 3; y++) {

    for(var x = 0; x < 3; x++) {
    newContent += "<div class='cell' data-pos='" + x + "," + y + "'>" + board[y][x] + "</div> ";
    }
    }

    preOutput.innerHTML = newContent;

    setListeners();
    }

    function setListeners(){
    var cell = document.getElementsByClassName('cell');

    for(var i = 0; i < cells.length; i++){
    cells[i].addEventListener('click', function(event) {
    var tag = event.target;
    var clickCell = targ.getAttribute('data-pos');

    var moveInput = clickCell.split(",");
    if(playerTurn % 2 ==0){
    moveLetter = "x";
    }else{
    moveLetter = "o";
    }

    makeMove(moveInput[0], moveInput[1], moveLetter);
    });
    }

    }
    function checkMove(x,y) {
    if(board[0][x] == board[1][x] &&
    board[1][x] == board[2][x] ) {
    return true;
    }

    if(board[y][0] == board[y][1] &&
    board[y][1] == board[y][2]) {
    return true;
    }

    if(board[0][0] == board[1][1]
    && board[1][1] == board[2][2]) {

    if(board[0][0] != " ") {
    return true;
    }

    }

    if(board[2][0] == board[1][1] &&
    board[1][1] == board[0][2]) {
    if(board[1][1] != " ") {
    return true;
    }
    }


    return false;
    }

    </script>

    Any help would be great!

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,268
    See this tic-tac-toe source code

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    And, since it seems to be a popular topic this week, see: http://www.webdeveloper.com/forum/sh...-a-simple-game

    BTW, you should use [ code] and [ /code] tags (without the spaces) to make your script submissions standout and retain formatting.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles