The way to Construct a Tic-Tac-Toe Sport with Vanilla JavaScript

Right here’s the tic-tac-toe sport we’re going to be coding. Click on on every sq. to put the items, and attempt to get three in a row:

HTML Construction

The HTML Construction will encompass the next parts:

• A board which is able to characteristic 9 div parts representing the three×3 grid
• A Bootstrap modal will likely be proven when the sport ends. The modal will show the winner.
• A button which when clicked will restart the sport

Create a container containing the board and the restart button with Bootstrap.

1

<div class="container">

2

  <h1 class="text-center mt-5">Tic Tac Toe Sport</h1>

3

  <div class="board" id="board">

4

    <div class="cell" data-cell></div>

5

    <div class="cell" data-cell></div>

6

    <div class="cell" data-cell></div>

7

    <div class="cell" data-cell></div>

8

    <div class="cell" data-cell></div>

9

    <div class="cell" data-cell></div>

10

    <div class="cell" data-cell></div>

11

    <div class="cell" data-cell></div>

12

    <div class="cell" data-cell></div>

13

  </div>

14

  <!-- <div class="text-center mt-3">

15

    <h3 id="winnner"></h3>

16

  </div> -->

17

  <div class="text-center mt-3">

18

    <button id="restartButton" class="btn btn-primary">Restart Sport</button>

19

  </div>

20

</div>

Under the container, add the outcomes modal.

1

<div

2

  class="modal fade"

3

  id="resultModal"

4

  tabindex="-1"

5

  aria-labelledby="resultModalLabel"

6

  aria-hidden="true"

7

>

8

  <div class="modal-dialog">

9

    <div class="modal-content">

10

      <div class="modal-header">

11

        <h5 class="modal-title" id="resultModalLabel">Sport Over</h5>

12

        <button

13

          sort="button"

14

          class="shut"

15

          data-dismiss="modal"

16

          aria-label="Shut"

17

        >

18

          <span aria-hidden="true">&instances;</span>

19

        </button>

20

      </div>

21

      <div class="modal-body" id="outcomes"></div>

22

      <div class="modal-footer">

23

        <button

24

          sort="button"

25

          class="btn btn-primary"

26

          data-dismiss="modal"

27

          id="playBtn"

28

        >

29

          Play Once more

30

        </button>

31

      </div>

32

    </div>

33

  </div>

34

</div>

Styling With CSS

To make sure the </div> parts within the board are organized in a 3×3 grid, apply the next types:

1

.board {

2

    show: grid;

3

    grid-template-columns: repeat(3, 1fr);

4

    hole: 10px;

5

    max-width: 300px;

6

    margin: 50px auto;

7

  }

For every cell within the grid, add the next types.

1

.cell {

2

    width: 100px;

3

    top: 100px;

4

    show: flex;

5

    align-items: middle;

6

    justify-content: middle;

7

    font-size: 2rem;

8

    cursor: pointer;

9

    border: 1px strong #000;

10

  }

Create the types which is able to add the X and O within the board cells. When it’s participant O’s flip, we’ll add the circle class; when it’s participant X’s flip, we’ll add the x class.

1

.x::earlier than {

2

    content material: "X";

3

    colour: blue;

4

    place: absolute;

5

  }

6

  .circle::earlier than {

7

    content material: "O";

8

    colour: crimson;

9

    place: absolute;

10

  }

JavaScript Performance

Let’s outline some variables:

1

const X_CLASS = "x";

2

const CIRCLE_CLASS = "circle";

3

const WINNING_COMBINATIONS = [

4

[0, 1, 2],

5

[3, 4, 5],

6

[6, 7, 8],

7

[0, 3, 6],

8

[1, 4, 7],

9

[2, 5, 8],

10

[0, 4, 8],

11

[2, 4, 6],

12

];

X_CLASS defines the CSS class that will likely be added on participant X’s flip, whereas CIRCLE_CLASS represents the CSS class that will likely be added to every cell when it’s participant CIRCLES’s flip. 

Every array within the successful combos represents the indexes of a successful row both horizontally, vertically, or diagonally. 

Choose the weather utilizing the DOM (Doc Object Mannequin) 

1

const cellElements = doc.querySelectorAll("[data-cell]");

2

const board = doc.getElementById("board");

Begin by defining the preliminary participant flip.

Subsequent, create a perform referred to as  starGame() which appears to be like like this: 

1

 perform startGame() {

2

    cellElements.forEach((cell) => {

3

      cell.classList.take away(X_CLASS);

4

      cell.classList.take away(CIRCLE_CLASS);

5

      cell.removeEventListener("click on", handleClick);

6

      cell.addEventListener("click on", handleClick, { as soon as: true });

7

    });

8

9

10

 startGame();

This perform will reset the sport by eradicating any X or O from the cells, therefore clearing the board.

1

cell.classList.take away(X_CLASS);

2

cell.classList.take away(CIRCLE_CLASS);

It additionally removes any present click on occasions to make sure that there aren’t any occasion handlers in any cell when the sport begins. The perform will even be certain that as soon as the sport begins, every cell can solely be clicked as soon as utilizing the { as soon as: true } possibility which will likely be chargeable for toggling the gamers and including O’s and X’s on the board.

Subsequent, create a perform referred to as handleClick(), which is able to deal with the logic of what occurs when a participant clicks a cell.

1

perform handleClick(e) {

2

    const cell = e.goal;

3

    const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS;

4

    cell.classList.add(currentClass);

5

    circleTurn = !circleTurn;

6

}

Within the handleClick perform, as a result of every cell aspect has been assigned the handleClick perform by way of occasion listeners, e.goal refers back to the particular cell aspect that was clicked.

1

 perform checkWin(currentClass) {

2

    return WINNING_COMBINATIONS.some((mixture) => {

3

      return mixture.each((index) => {

4

        return cellElements[index].classList.accommodates(currentClass);

5

      });

6

    });

7

  }

Right here, we use the .some() technique, which checks if a minimum of one array within the WINNING_COMBINATIONS array returns true for the situation inside each().The .each() technique will test if each index within the internal array accommodates currentClass, which means all parts in that array are marked by the identical participant. If this situation is true for any mixture, the participant represented by currentClass wins the sport.

To test if the sport is a draw, the isDraw() perform checks if each cell on the board accommodates both the X_CLASS or CIRCLE_CLASS class. If both participant marks all cells, the sport is taken into account a draw.

1

perform isDraw() {

2

    return [...cellElements].each((cell) => 

5

        cell.classList.accommodates(CIRCLE_CLASS)

6

      );

7

    );

8

  }

Now replace the handleClick() perform to indicate the suitable outcomes  if checkWin() or isDraw() capabilities return true.

1

perform handleClick(e) {

2

    const cell = e.goal;

3

    const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS;

4

    console.log(currentClass);

5

6

    cell.classList.add(currentClass);

7

    circleTurn = !circleTurn;

8

9

    if (checkWin(currentClass)) {

10

      showResult(`${currentClass.toUpperCase()} wins`);

11

    } else if (isDraw()) {

12

      showResult(`It is a Draw`);

13

    }

14

  }

Now, let’s create theshowResult() perform, which is able to show the outcomes.

1

const resultModal = new bootstrap.Modal(

2

    doc.getElementById("resultModal"),

3

    {

4

      keyboard: false,

5

    }

6

);

7

 perform showResult(message) {

8

    resultMessage.textContent = message;

9

    resultModal.present();

10

11

  }

Within the code above, we initialize a Bootstrap modal occasion resultModal for the modal with ID “resultModal”. We then use the showResult(message) perform to replace the textual content content material of the modal’s physique (resultMessage.textContent) with the message parameter and show the modal utilizing resultModal.present().

When the sport ends, the modal will likely be displayed as proven beneath:

To shut the modal, add an occasion listener to each the shut and PlayAgain buttons. When every button is clicked, the sport ought to reset by invoking the startGame() perform. The modal will even be hidden.

1

const closeButton = doc.querySelector(".modal .shut");

2

doc.getElementById("playBtn").addEventListener("click on", startGame);

3

closeButton.addEventListener("click on", () => {

4

    resultModal.conceal();

5

    startGame();

6

  });

The final a part of this sport is so as to add visible indicators that present whose flip it’s. Add the CSS lessons for these.

1

.board.hover-x [data-cell]:hover:not(.x):not(.circle) {

2

    background-color: lightblue;

3

  }

4

5

  .board.hover-circle [data-cell]:hover:not(.x):not(.circle) {

6

    background-color: lightcoral;

7

  }

On the high of the file, outline these variables, which symbolize the hover lessons.

1

const HOVER_X_CLASS = "hover-x";

2

const HOVER_CIRCLE_CLASS = "hover-circle";

Subsequent, create a perform referred to as setBoardHoverClass(), whose function will likely be so as to add a hover colour impact relying on whose flip it’s. It will be certain that the gamers will know whose flip it’s once they hover over the board cells. 

Within the setBoardHoverClass,  we first take away any present lessons .

1

perform setBoardHoverClass() {

2

  board.classList.take away(HOVER_X_CLASS);

3

  board.classList.take away(HOVER_CIRCLE_CLASS);

4

5

}

Then, we create an if-else assertion that checks whose flip it’s and applies the suitable lessons to the board cells.

1

perform setBoardHoverClass() {

2

  board.classList.take away(HOVER_X_CLASS);

3

  board.classList.take away(HOVER_CIRCLE_CLASS);

4

  if (circleTurn) {

5

    board.classList.add(HOVER_CIRCLE_CLASS);

6

  } else {

7

    board.classList.add(HOVER_X_CLASS);

8

  }

9

}

Lastly return to the handleClick() perform and replace it as follows:

1

perform handleClick(e) {

2

  const cell = e.goal;

3

  const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS;

4

  console.log(currentClass);

5

6

  cell.classList.add(currentClass);

7

  circleTurn = !circleTurn;

8

9

  if (checkWin(currentClass)) {

10

    showResult(`${currentClass.toUpperCase()} wins`);

11

  } else if (isDraw()) {

12

    showResult(`It is a Draw`);

13

  } else {

14

    setBoardHoverClass();

15

  }

16

}

Whenever you hover over any cell after the sport begins, you need to see the impact. 

Remaining Consequence

Let’s remind ourselves what we’ve constructed!

Conclusion

This tutorial has lined tips on how to create a tic-tac-toe sport in JavaScript. The ideas lined will function a strong basis for constructing much more advanced video games.