Tic Tac Toe in Javascript

Question

The code works fine but the compMove() function isn't working as I intended. I want it to do the following: 1. If the user(X) has a winning move then block it. 2. If the computer has a winning move(O) then take it.

This is the link to the program:

This is the hyperlink to the jsfiddle implementation of my code

Given below is the javascript part of the game.

$(document).ready(function () {
  var count = 0;

  function isAvailableField($this) {
    return !$this.attr('data-move');
  }

  function userMove($this, move) {
    $this.attr('data-move', move);
    $this.addClass(move);
  }

  function reset() {
    $('.move-x').removeClass('move-x');
    $('.move-o').removeClass('move-o');
    $('.grid td').attr('data-move', '');
    count = 0;
  }

  $('.grid td').click(function () {
    if (isAvailableField($(this))) {
      userMove($(this), 'move-x');
      count++;
      checkWin();
      compMove();
    }
  });

  function compMove(){
    if(isAvailableField('#field' + 1)&&($('#field'+2).attr('data-move') == $('#field' + 3).attr('data-move') || $('#field' + 5).attr('data-move') == $('#field' + 9).attr('data-move') || $('#field' + 4).attr('data-move')==$('#field' + 7).attr('data-move'))) {
      userMove('#field'+1,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+2)&&($('#field'+1).attr('data-move')==$('#field'+3).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+8).attr('data-move'))){
      userMove('#field'+2,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+3)&&($('#field'+2).attr('data-move')==$('#field'+1).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+7).attr('data-move')||$('#field'+6).attr('data-move')==$('#field'+9).attr('data-move'))){
      userMove('#field'+3,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+4)&&($('#field'+1).attr('data-move')==$('#field'+7).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+6).attr('data-move'))){
      userMove('#field'+4,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+5)&&($('#field'+2).attr('data-move')==$('#field'+8).attr('data-move')||$('#field'+1).attr('data-move')==$('#field'+9).attr('data-move')||$('#field'+3).attr('data-move')==$('#field'+7).attr('data-move')||$('#field'+4).attr('data-move')==$('#field'+6).attr('data-move'))){
      userMove('#field'+5,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+6)&&($('#field'+4).attr('data-move')==$('#field'+5).attr('data-move')||$('#field'+3).attr('data-move')==$('#field'+9).attr('data-move'))){
      userMove('#field'+6,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+7)&&($('#field'+1).attr('data-move')==$('#field'+4).attr('data-move')||$('#field'+5).attr('data-move')==$('#field'+3).attr('data-move')||$('#field'+8).attr('data-move')==$('#field'+9).attr('data-move'))){
      userMove('#field'+7,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+8)&&($('#field'+2).attr('data-move')==$('#field'+5).attr('data-move')||$('#field'+7).attr('data-move')==$('#field'+9).attr('data-move'))){
      userMove('#field'+8,'move-o');
      count++;
      checkWin();
    }

    else if(isAvailableField('#field'+9)&&($('#field'+1).attr('data-move')==$('#field'+5).attr('data-move')||$('#field'+3).attr('data-move')==$('#field'+6).attr('data-move')||$('#field'+7).attr('data-move')==$('#field'+8).attr('data-move'))){
      userMove('#field'+9,'move-o');
      count++;
      checkWin();
    }

    else{
      if(isAvailableField('#field'+5)){
        userMove('#field'+5,'data-move');
        count++;
        checkWin();
      }
      else if(isAvailableField('#field'+1)){
        userMove('#field'+1,'data-move');
        count++;
        checkWin();
      }
      else if(isAvailableField('#field'+9)){
        userMove('#field'+9,'data-move');
        count++;
        checkWin();
      }
      else if(isAvailableField('#field'+8)){
        userMove('#field'+8,'data-move');
        count++;
        checkWin();
      }
      else{
        userMove('#field'+4,'data-move');
        count++;
        checkWin();
      }
    }

  }

  var winconditions = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [1, 4, 7],
    [2, 5, 8],
    [3, 5, 7],
    [1, 5, 9],
    [3, 6, 9]
  ];

  function judgmentDay(move) {
    for (var i = 0; i < winconditions.length; i++) {
      var line = winconditions[i];
      var j = 0;
      for (; j < line.length; j++) {
        var num = line[j];
        if ($('#field' + num).attr('data-move') != move) {
          break;
        }
      }
      if (j == line.length) {
        return true;
      }
    }
  }

  function checkWin() {
    if (count < 5) {
      return;
    }
    if (judgmentDay('move-x')) {
      alert("X wins!");
      reset();
    } else if (judgmentDay('move-o')) {
      alert("O wins!");
      reset();
    } else if (count == 9) {
      alert("It's a draw!");
      reset();
    }

  }
});

Answer 1

You did not use jquery elements as parameters for isAvailableField and userMove. e.g.

isAvailableField('#field'+3)

must be

isAvailableField($('#field'+3))

http://jsfiddle.net/ha4n3c27/ is a working example