1    //button colors -- feel free to change these
2    const xColor = "blue";
3    const oColor = "red";
4    const emptyColor = "silver";
5    
6    //reset scores
7    let xWins = 0;
8    let oWins = 0;
9    let draws = 0;
10   
11   let buttons = getButtonIds();
12   clearButtons();
13   
14   let text = "<h3>Let's Play Tic-Tac-Toe</h3>";
15   text += "You’re player X. ";
16   text += "Try to get three Xs in a row. ";
17   text += "The computer, player O, will try to stop you. ";
18   text += "It’s your job to block the computer ";
19   text += "and try to win. ";
20   text += "<h3>Good luck!</h3>";
21   document.getElementById("info").innerHTML = text;
22   
23   function getButtonIds()
24   {
25     let buttonArray = [];
26     for (let b = 0; b < 9; b++)
27     {
28       let buttonId = document.getElementById("button" + b);
29       buttonArray.push(buttonId);
30     }
31     return buttonArray;
32   }
33   
34   function clearButtons()
35   {
36     for (let i = 0; i < buttons.length; i++)
37     {
38       buttons[i].innerHTML = "-";
39       buttons[i].style.color = emptyColor;
40       buttons[i].style.backgroundColor = emptyColor;
41     }
42     updateScores();
43   }
44   
45   function buttonClick(buttonNumber)
46   {
47     let button = buttons[buttonNumber];
48   
49     if (button.innerHTML === "-")
50     {
51       button.innerHTML = "X";
52       button.style.backgroundColor = xColor;
53     }
54     else
55     {
56       return; //Don't do anything
57     }
58     if (checkForWin("X"))
59     {
60       xWins++;
61       alert("X Wins!");
62       clearButtons();
63     }
64     else if (checkForDraw())
65     {
66       draws++;
67       alert("It's a draw!");
68       clearButtons();
69     }
70     computerTakesATurn();
71   }
72   
73   function checkForDraw()
74   {
75     for (let b = 0; b < buttons.length; b++)
76     {
77       if (buttons[b].innerHTML === "-") //found empty cell!
78       {
79         return false; //exit this function
80       }
81     }
82   
83     //If we're still here, it's a draw. The game is over.
84     return true;
85   }
86   
87   function checkForWin(XO)
88   {
89     if (buttons[0].innerHTML === XO &&
90         buttons[1].innerHTML === XO &&
91         buttons[2].innerHTML === XO)
92     {
93       return true;
94     }
95     else if (buttons[3].innerHTML === XO && buttons[4].innerHTML === XO && buttons[5].innerHTML === XO)
96     {
97       return true;
98     }
99     else if (buttons[6].innerHTML === XO && buttons[7].innerHTML === XO && buttons[8].innerHTML === XO)
100    {
101      return true;
102    }
103    else if (buttons[0].innerHTML === XO && buttons[3].innerHTML === XO && buttons[6].innerHTML === XO)
104    {
105      return true;
106    }
107    else if (buttons[1].innerHTML === XO && buttons[4].innerHTML === XO && buttons[7].innerHTML === XO)
108    {
109      return true;
110    }
111    else if (buttons[2].innerHTML === XO && buttons[5].innerHTML === XO && buttons[8].innerHTML === XO)
112    {
113      return true;
114    }
115    else if (buttons[0].innerHTML === XO && buttons[4].innerHTML === XO && buttons[8].innerHTML === XO)
116    {
117      return true;
118    }
119    else if (buttons[2].innerHTML === XO && buttons[4].innerHTML === XO && buttons[6].innerHTML === XO)
120    {
121      return true;
122    }
123    return false;
124  }
125  
126  function computerTakesATurn()
127  {
128    //This checks for the computer to find a winning move
129    for (let b = 0; b < buttons.length; b++)
130    {
131      let button = buttons[b];
132  
133      if (button.innerHTML !== "-")
134      {
135        //The space isn't blank, so there's no point checking for a win
136        continue;
137      }
138      button.innerHTML = "O"; //set the space temporarily
139  
140      if (checkForWin("O")) //if this returns true, it wins
141      {
142        button.style.backgroundColor = oColor;
143        oWins++;
144        alert("O Wins!");
145        clearButtons();
146        return; //exit the function
147      }
148      button.innerHTML = "-"; //Reset the space.
149    }
150  
151    //This second loop checks for a player winning move
152    for (let b = 0; b < buttons.length; b++)
153    {
154      let button = buttons[b];
155  
156      if (button.innerHTML !== "-")
157      {
158        //The space isn't blank, so there's no point checking for a block
159        continue;
160      }
161      button.innerHTML = "X"; //set the space temporarily
162  
163      if (checkForWin("X"))   //if true, player would win
164      {
165        button.innerHTML = "O"; //take over to block
166        button.style.backgroundColor = oColor;
167  
168        if (checkForDraw())
169        {
170          draws++;
171          alert("It's a draw!");
172          clearButtons();
173        }
174  
175        return; //exit the function
176      }
177      button.innerHTML = "-"; //Reset the space.
178    }
179  
180    let pickingASquare = true;
181    while (pickingASquare)
182    {
183      let randomButton = Math.floor(Math.random() * buttons.length);
184      let button = buttons[randomButton];
185  
186      if (buttons[4].innerHTML === "-") //center square
187      {
188        button = buttons[4];
189        pickingASquare = false;
190      }
191      else if (buttons[0].innerHTML === "-")
192      {
193        button = buttons[0];
194        pickingASquare = false;
195      }
196      else if (buttons[2].innerHTML === "-")
197      {
198        button = buttons[2];
199        pickingASquare = false;
200      }
201      else if (buttons[6].innerHTML === "-")
202      {
203        button = buttons[6];
204        pickingASquare = false;
205      }
206      else if (buttons[8].innerHTML === "-")
207      {
208        button = buttons[8];
209        pickingASquare = false;
210      }
211      if (!pickingASquare)
212      {
213        button.innerHTML = "O";
214        button.style.backgroundColor = oColor;
215      }
216      else if (button.innerHTML === "-") //found empty cell
217      {
218        button.innerHTML = "O";
219        button.style.backgroundColor = oColor;
220        pickingASquare = false; //this causes loop to exit
221      }
222    }
223  
224    if (checkForWin("O"))
225    {
226      oWins++;
227      alert("O Wins!");
228      clearButtons();
229    }
230    else if (checkForDraw())
231    {
232      draws++;
233      alert("It's a draw!");
234      clearButtons();
235    }
236  }
237  
238  function updateScores()
239  {
240    let result = document.getElementById("result");
241  
242    let text = "";
243    text += "X Wins: " + xWins + "<br>";
244    text += "O Wins: " + oWins + "<br>";
245    text += "Draws: " + draws + "<br>";
246  
247    result.innerHTML = text;
248  }
249