tic tac toe using html 2c javascript and css

Solutions on MaxInterview for tic tac toe using html 2c javascript and css by the best coders in the world

showing results for - "tic tac toe using html 2c javascript and css"
Mirielle
07 Jan 2021
1const player = "O";
2const computer = "X";
3
4let board_full = false;
5let play_board = ["", "", "", "", "", "", "", "", ""];
6
7const board_container = document.querySelector(".play-area");
8
9const winner_statement = document.getElementById("winner");
10
11check_board_complete = () => {
12  let flag = true;
13  play_board.forEach(element => {
14    if (element != player && element != computer) {
15      flag = false;
16    }
17  });
18  board_full = flag;
19};
20
21const check_line = (a, b, c) => {
22  return (
23    play_board[a] == play_board[b] &&
24    play_board[b] == play_board[c] &&
25    (play_board[a] == player || play_board[a] == computer)
26  );
27};
28
29const check_match = () => {
30  for (i = 0; i < 9; i += 3) {
31    if (check_line(i, i + 1, i + 2)) {
32      return play_board[i];
33    }
34  }
35  for (i = 0; i < 3; i++) {
36    if (check_line(i, i + 3, i + 6)) {
37      return play_board[i];
38    }
39  }
40  if (check_line(0, 4, 8)) {
41    return play_board[0];
42  }
43  if (check_line(2, 4, 6)) {
44    return play_board[2];
45  }
46  return "";
47};
48
49const check_for_winner = () => {
50  let res = check_match()
51  if (res == player) {
52    winner.innerText = "Winner is player!!";
53    winner.classList.add("playerWin");
54    board_full = true
55  } else if (res == computer) {
56    winner.innerText = "Winner is computer";
57    winner.classList.add("computerWin");
58    board_full = true
59  } else if (board_full) {
60    winner.innerText = "Draw!";
61    winner.classList.add("draw");
62  }
63};
64
65const render_board = () => {
66  board_container.innerHTML = ""
67  play_board.forEach((e, i) => {
68    board_container.innerHTML += `<div id="block_${i}" class="block" onclick="addPlayerMove(${i})">${play_board[i]}</div>`
69    if (e == player || e == computer) {
70      document.querySelector(`#block_${i}`).classList.add("occupied");
71    }
72  });
73};
74
75const game_loop = () => {
76  render_board();
77  check_board_complete();
78  check_for_winner();
79}
80
81const addPlayerMove = e => {
82  if (!board_full && play_board[e] == "") {
83    play_board[e] = player;
84    game_loop();
85    addComputerMove();
86  }
87};
88
89const addComputerMove = () => {
90  if (!board_full) {
91    do {
92      selected = Math.floor(Math.random() * 9);
93    } while (play_board[selected] != "");
94    play_board[selected] = computer;
95    game_loop();
96  }
97};
98
99const reset_board = () => {
100  play_board = ["", "", "", "", "", "", "", "", ""];
101  board_full = false;
102  winner.classList.remove("playerWin");
103  winner.classList.remove("computerWin");
104  winner.classList.remove("draw");
105  winner.innerText = "";
106  render_board();
107};
108
109//initial render
110render_board();
111