DEV Community

Cover image for TicTacToe - the pragmatic way
Frank Wisniewski
Frank Wisniewski

Posted on

TicTacToe - the pragmatic way

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title>
  <style>
    html{
      font-family: system-ui, sans-serif;
    }
    body{
      display:flex;
      flex-direction:column;
      align-items: center;
      width: 360px;
      margin:auto;
    }
    table{
      border-spacing:0px; 
      border-collapse: collapse;
    }
    td{
      box-sizing: border-box;
      display: inline-grid;
      place-items: center;
      width:100px;
      height:100px;
      background:blue;
      font-weight:bold;
      font-size: 4em;
      cursor:pointer;
      user-select: none;  
      margin:2px;
      }
    td:hover{
      background: silver;
    }
    button{
      margin: 1em 0;
      font-size:2em;
      padding: 0.25em 1em;
      font-weight:bold;
    }
    ::backdrop {
      opacity: 0.75;
      backdrop-filter: blur(3px);
    }
  </style>
</head>
<body>
  <h1>TicTacToe</h1>
  <table id=board></table>
  <button>new Game</button>
  <dialog id=dialog>
    <h2 id=winner></h2>
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
  <script>
    var player = "X"
    const clearBoard = () => board.innerHTML = '<tr><td><td><td>'.repeat(3)
    clearBoard()
    board.onclick = (el, cell=el.target) => {
      if (cell.tagName == 'TD' && cell.innerText == ''){
        cell.innerText = player
        cell.style.background = "silver"
        let vert = diaglr = diagrl = ''
        for (let i=0; i<3; i++){
          let row = board.rows[i].cells
          vert += row[cell.cellIndex].textContent
          diaglr += row[i].textContent
          diagrl += row[2-i].textContent
        }
        if ([cell.parentNode.textContent, vert, diaglr, diagrl].includes(player.repeat(3))){
          winner.textContent=`Winner player "${player}" !`
          dialog.showModal()
        } else {
          if(board.textContent.length==9){
            winner.textContent="The game ends in a tie"
            dialog.showModal()
          }
        }
        player = player === 'X' ? 'O' : 'X'
      } 
    }
    document.querySelectorAll('button').forEach( 
      el => el.addEventListener('click', () => 
      clearBoard()))
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This HTML and JavaScript code represents a simple implementation of the Tic-Tac-Toe game. Let me explain the code step by step:

HTML Part:

<!DOCTYPE html>
<html lang="de">
<head>
  <!-- Meta tags for character set and viewport settings -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>Document</title>
  <!-- Internal CSS styles for the document -->
  <style>
    /* CSS styles for various HTML elements */
  </style>
</head>
<body>
  <!-- Game title and game board rendered as a table -->
  <h1>TicTacToe</h1>
  <table id=board></table>
  <!-- Button to start a new game and a dialog box for displaying game results -->
  <button>new Game</button>
  <dialog id=dialog>
    <h2 id=winner></h2>
    <!-- Form inside the dialog box with an OK button -->
    <form method="dialog">
      <button>OK</button>
    </form>
  </dialog>
  <script>
    // JavaScript code for game logic
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Part:

  • The CSS styles define the appearance of various HTML elements, including the game board cells, buttons, and dialog box. It sets the layout, colors, and interactions for the Tic-Tac-Toe game.

JavaScript Part:

  1. Initialization:

    • var player = "X" initializes the current player as "X".
    • const clearBoard = () => board.innerHTML = '<tr><td><td><td>'.repeat(3) clears the game board by resetting the inner HTML of the table to three rows with three empty cells each.
  2. Event Handling:

    • board.onclick handles click events on the game board. It checks if a clicked cell is empty and sets it to the current player ("X" or "O"). It then checks for winning conditions in rows, columns, and diagonals. If a player wins, a dialog is displayed with the winner's message. If the game ends in a tie, a tie message is displayed.
  • document.querySelectorAll('button').forEach(...) adds a click event listener to all buttons in the document. When a button is clicked, it calls the clearBoard function to reset the game board.
// Initialize the current player as "X"
var player = "X";

// Function to clear the game board by resetting HTML content
const clearBoard = () => board.innerHTML = '<tr><td><td><td>'.repeat(3);

// Clear the board when the page loads
clearBoard();

// Event handler for clicks on the game board
board.onclick = (el, cell = el.target) => {
  // Check if the clicked element is a cell and is empty
  if (cell.tagName == 'TD' && cell.innerText == '') {
    // Set the cell text to the current player ("X" or "O")
    cell.innerText = player;
    cell.style.background = "silver";

    // Variables to store values of current row, column, and diagonals
    let vert = diaglr = diagrl = '';

    // Loop through rows to check for winning conditions
    for (let i = 0; i < 3; i++) {
      let row = board.rows[i].cells;
      vert += row[cell.cellIndex].textContent; // Vertical
      diaglr += row[i].textContent; // Diagonal from top-left to bottom-right
      diagrl += row[2 - i].textContent; // Diagonal from top-right to bottom-left
    }

    // Check if any of the winning conditions are met
    if ([cell.parentNode.textContent, vert, diaglr, diagrl].includes(player.repeat(3))) {
      // Display winner message in the dialog box
      winner.textContent = `Winner player "${player}" !`;
      dialog.showModal();
    } else {
      // If the board is full and there is no winner, display a tie message
      if (board.textContent.length == 9) {
        winner.textContent = "The game ends in a tie";
        dialog.showModal();
      }
    }

    // Switch players for the next turn
    player = player === 'X' ? 'O' : 'X';
  }
};

// Event listener for all buttons to start a new game
document.querySelectorAll('button').forEach(
  el => el.addEventListener('click', () =>
    clearBoard())
);
Enter fullscreen mode Exit fullscreen mode

Overall Summary:

This code creates a functional Tic-Tac-Toe game. Players can click on the cells to make their moves, and the game checks for win or draw conditions after each move. The game interface includes a "new Game" button to reset the board and a dialog box to display the game result messages. The styling is kept minimal, focusing on the game functionality.

Top comments (0)