TicTacToe-101/scripts.js at master · DavidRios22/TicTacToe-101 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
let currentMarker = 'X'

let board = [
  ["", "", ""], // <-- Row 1, index 0
  ["", "", ""], // <-- Row 2, index 1
  ["", "", ""] // <-- Row 3, index 2
]


const handleClick = (element) => {

  console.log(`The element you clicked on has an id:  ${element.id}`)

  if (!document.getElementById(element.id).innerHTML) {
    addMarker(element.id)
  }
}

const addMarker = (id) => {
  console.log(`*** The current marker is:  ${currentMarker}. ***`)
  console.log(`Therefore, a  "${currentMarker}"  should be placed in the square with the id:  ${id}`)

  document.getElementById(id).innerHTML = currentMarker

  const row = parseInt(id.charAt(0));

  const column = parseInt(id.charAt(2));

  board[row][column] = currentMarker
  checkForWin()
}

const changeMarker = () => {
  if (currentMarker === "X") {
    currentMarker = "O"
  } else {
    currentMarker = "X"
  }

}

const resetBoard = () => {
  const squares = document.getElementsByTagName("TD")

  for (i = 0; i < squares.length; i++) {
    console.log(squares[i].id)
    squares[i].innerHTML = null
  }
  location.reload();
}

const horizontalwin = () => {

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


  else if ((board[1][0] == "X" && board[1][1] == "X" && board[1][2] == "X")
    || (board[1][0] == "O" && board[1][1] == "O" && board[1][2] == "O")) {
    return true;
  }

  else if ((board[2][0] == "X" && board[2][1] == "X" && board[2][2] == "X")
    || (board[2][0] == "O" && board[2][1] == "O" && board[2][2] == "O")) {
    return true;
  }

  else {
    return false;
  }
}

const verticalwin = () => {
  if ((board[0][0] == "X" && board[1][0] == "X" && board[2][0] == "X")
    || (board[0][0] == "O" && board[1][0] == "O" && board[2][0] == "O")) {
    return true;
  }

  else if ((board[0][1] == "X" && board[1][1] == "X" && board[2][1] == "X")
    || (board[0][1] == "O" && board[1][1] == "O" && board[2][1] == "O")) {
    return true;
  }

  else if ((board[0][2] == "X" && board[1][2] == "X" && board[2][2] == "X")
    || (board[0][2] == "O" && board[1][2] == "O" && board[2][2] == "O")) {
    return true;
  }
  else {
    return false;
  }

}

const diagonalwin = () => {
  if ((board[0][0] == "X" && board[1][1] == "X" && board[2][2] == "X")
    || (board[0][0] == "O" && board[1][1] == "O" && board[2][2] == "O")) {
    return true;
  }
  else if ((board[0][2] == "X" && board[1][1] == "X" && board[2][0] == "X")
    || (board[0][2] == "O" && board[1][1] == "O" && board[2][0] == "O")) {
    return true;
  }
  else {
    return false;
  }


}

const checkForWin = () => {
  if (horizontalwin() || verticalwin() || diagonalwin()) {
    window.alert("Player " + currentMarker + " won!")
  } else {
    changeMarker()
  }
}