HTML+CSS+JavaScript to create a simple tic-tac-toe game

Implementing HTML
Add CSS
Implementing the Javascript part

Demo address

Implementing HTML

First in the head section, I will include the css and javascript files that we will create later. I also added a Google font called Itim.

<link rel="stylesheet" href="style.css" rel="external nofollow" >
<link rel="preconnect" href="https://fonts.gstatic.com" rel="external nofollow" >
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="external nofollow" rel="stylesheet">
<script src="index.js"></script>

The body of the HTML will be fairly simple. To wrap everything up, I'll use a main tag and apply a class background to it. Inside the main wrapper, we will have five sections.

The first section will contain only our heading h1.

The second section will show whose turn it is currently. In the display we have a span that contains either an X or an O depending on the current user. We apply a class to this span to color the text.

The third part is the part that holds the game board. It has a container class so we can place the tiles correctly. In this section we have 9 divs that will act as tiles within the board.

The fourth part will be responsible for announcing the final competition results. By default it is empty and we will modify its content from javascript.

The last section will save our control, which includes a restart button.

<main class="background">
        <section class="title">
            <h1>TicTacToe</h1>
        </section>
        <section class="display">
            Player <span class="display-player playerX">X</span>'s turn</section>
        <section class="container">
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
            <div class="tile"></div>
        </section>
        <section class="display announcer hide"></section>
        <section class="controls">
            <button id="reset">Restart</button>
        </section>
    </main>

Add CSS

I won’t go into every line of CSS in detail, but you can check out the full code in the source code.

First, I’ll create the style.css file and remove any browser defined margins and padding and set the Google fonts I included in the HTML for the entire document.

* {
    padding: 0;
    margin: 0;
    font-family: 'Itim', cursive;
}

The next important thing we have to add is the style of our board. We will use CSS Grid to create the board. We can split the container in two by providing 3 times 33% of the space for columns and rows. We'll center the container by setting a max-width and margin: 0 auto; .

.container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 33% 33% 33%;
    max-width: 300px;
}

Next, we'll add styles for the tiles within the board. We'll apply a small white border and set the minimum width and height to 100 pixels. We’ll make use of Flexbox and center the content by setting justify-content and align-items到center . We'll give it a large font size and apply cursor: pointer so users know the field is clickable.

.tile {
    border: 1px solid white;
    min-width: 100px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    cursor: pointer;
}

I used two different colors to better differentiate the two players. To do this, I create two utility classes. Player X's color is green, and player O's color is blue.

.playerX {
    color: #09C372;
}

.playerO {
    color: #498AFB;
}

Implementing the Javascript part

Since we are including the javascript file in <head> . This is required because our script will be loaded before the browser parses the HTML body. If you don't want to wrap everything in this function, feel free to add defer to the script tag or move the script tag to body.

window.addEventListener('DOMContentLoaded', () => {

});

First, we'll save a reference to the DOM node. We'll use document.querySelectorAll(). We want an array, but this function returns a NodeList, so we have to use Array.from(). We'll also get references to the player display, the reset button, and the announcer.

const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const announcer = document.querySelector('.announcer');

Next, we'll add the global variables needed to control the game. We'll initialize a board with an array of nine empty strings. This will save the XabdO values for each tile on the board. We will have a currentPlayer that holds the flag of the player who is active in the current turn. The isGameActive variable will remain true until someone wins or the game ends in a draw. In these cases we set it to false so that the remaining tiles are inactive until reset. We have three constants representing the game ending state. We use these constants to avoid typos.

let board = ['', '', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let isGameActive = true;

const PLAYERX_WON = 'PLAYERX_WON';
const PLAYERO_WON = 'PLAYERO_WON';
const TIE = 'TIE';

In the next step we will store all winning positions on the board. In each sub-array, we will store the indices of the three positions where we can win the game. So this [0, 1, 2] will represent the case where the first horizontal line is occupied by the player. We will use this array to decide if we have a winner.

/*
   Indexes within the board
   [0] [1] [2]
   [3] [4] [5]
   [6] [7] [8]
*/

const winningConditions = [
   [0, 1, 2],
   [3, 4, 5],
   [6, 7, 8],
   [0, 3, 6],
   [1, 4, 7],
   [2, 5, 8],
   [0, 4, 8],
   [2, 4, 6]
];

Now we'll write some utility functions. In the isValidAction function, we will decide whether the user wants to perform a valid action. If the tile's internal text is XorO we return false as the operation is invalid, otherwise the tile is empty so the operation is valid.

const isValidAction = (tile) => {
    if (tile.innerText === 'X' || tile.innerText === 'O'){
        return false;
    }

    return true;
};

The next utility function is going to be very simple. In this function we will receive an index as a parameter and set the corresponding element in the board array to the symbol of our current player.

const updateBoard = (index) => {
   board[index] = currentPlayer;
}

We will write a small function to handle the player changes. In this function we will first retrieve the value from playerDisplay. The string template literal player${currentPlayer} will become either playerX or playerO depending on the current player. Next, we'll use a ternary expression to change the value of the current player. If it is X, it will be O otherwise it will be X. Now that we've changed the value of our player, we need to update the innerText of the playerDisplay and apply the new player class.

const changePlayer = () => {
    playerDisplay.classList.remove(`player${currentPlayer}`);
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    playerDisplay.innerText = currentPlayer;
    playerDisplay.classList.add(`player${currentPlayer}`);
}

Now we will write the announer function that announces the final game result. It will receive the end game type and update the innerText of the announcer DOM node according to the result. In the last line, we have to remove the hidden class because the announcer is hidden by default until the game is over.

const announce = (type) => {
    switch(type){
       case PLAYERO_WON:
            announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
            break;
       case PLAYERX_WON:
            announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
            break;
       case TIE:
            announcer.innerText = 'Tie';
        }
    announcer.classList.remove('hide');
};

Next we will write one of the most interesting parts of this project - the evaluation of the results. First, we'll create a roundWon variable and initialize it to false. We will then iterate through the winConditions array and check each win condition on the board. For example, in the second iteration we will check these values: board3, board4, board5.

We will also do some optimizations, if any of the fields are empty we will call continue and skip to the next iteration since you can't win if there is an empty tile in your win condition. If all fields are equal, then we have a winner, so we set roundWon to true and break out of the for loop, since any further iterations would be a waste of computation.

After the loop we will check the value of the roundWon variable, and if true we will declare a winner and set the game to inactive. If we don't have a winner we check to see if there are any empty tiles on the board, if we don't have a winner and there are no empty tiles we declare a draw.

function handleResultValidation() {
  let roundWon = false;
  for (let i = 0; i <= 7; i++) {
    const winCondition = winningConditions[i];
    const a = board[winCondition[0]];
    const b = board[winCondition[1]];
    const c = board[winCondition[2]];
    if (a === "" || b === "" || c === "") {
      continue;
    }
    if (a === b && b === c) {
      roundWon = true;
      break;
    }
  }

  if (roundWon) {
    announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
    isGameActive = false;
    return;
  }

  if (!board.includes("")) announce(TIE);
}

Next we will handle the user's actions. This function will receive a tile and an index as parameters. When the user clicks a tile, this function is called. First we need to check if it is a valid action, we will also check if the game is currently active. If both are true, we update the tile's innerText with the current player's symbol, add the corresponding class and update the board array. Now that everything is updated, we have to check if the game is over, so we call handleResultValidation(). Finally, we have to call the changePlayer method to pass the turn to the other player.

const userAction = (tile, index) => {
  if (isValidAction(tile) && isGameActive) {
    tile.innerText = currentPlayer;
    tile.classList.add(`player${currentPlayer}`);
    updateBoard(index);
    handleResultValidation();
    changePlayer();
  }
};

In order for the game to work properly, we have to add event listeners to the tiles. We can do this by looping through the array of tiles and adding an event listener for each tile. (For better performance, we could just add an event listener to the container and use event bubbling to capture tile clicks on the parent, but I think this is easier to understand for beginners.)

tiles.forEach( (tile, index) => {
    tile.addEventListener('click', () => userAction(tile, index));
});

There's only one feature we're missing: resetting the game. To do this, we will write a resetBoard function. In this function we set the board X to consist of nine empty strings, set the game to active, remove the announcer and change the player back (by definition X always starts).

The last thing we have to do is iterate through the tiles and set the innerText back to an empty string and remove any player-specific classes from the tiles.

const resetBoard = () => {
    board = ['', '', '', '', '', '', '', '', '', ''];
    isGameActive = true;
    announcer.classList.add('hide');

    if (currentPlayer === 'O') {
        changePlayer();
    }

    tiles.forEach(tile => {
        tile.innerText = '';
        tile.classList.remove('playerX');
        tile.classList.remove('playerO');
    });
}

Now we just need to register this function as the click event handler for the reset button.

resetButton.addEventListener('click', resetBoard);

That's it, we have a fully functional Tic Tac Toe game that you can play with your friends and have fun.

The above is the details of creating a simple tic-tac-toe game with HTML+CSS+JavaScript. For more information about HTML+CSS+JavaScript, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

HTML+CSS+JavaScript to make a girlfriend version of scratch card (you will learn it once you see it)
HTML+CSS+JS realizes canvas follows the mouse small circle special effect source code
Python introductory game tic-tac-toe example code
Implementing Tic-Tac-Toe Game Based on C Language

<<: HTML+CSS+JavaScript to achieve list loop scrolling example code

>>: Detailed steps to install the specified version of docker (1.12.6) using rpm