Creating a Tic Tac Toe Game Project in JavaScript: A Beginner’s Guide

Creating a Tic Tac Toe Game Project in JavaScript: A Beginner’s Guide

Developing a Tic Tac Toe game using JavaScript is a fantastic way for beginners to dive into the world of web development. This project combines HTML, CSS, and JavaScript to create a simple yet engaging game that can run in a browser. In this blog post, we’ll walk you through building a Tic Tac Toe game from scratch.

What is Tic Tac Toe?

Tic Tac Toe, also known as Noughts and Crosses, is a two-player game. The objective is to get three of your symbols (either “X” or “O”) in a row, column, or diagonal on a 3×3 grid.

Why Build Tic Tac Toe?

Interactive Learning: Enhances your understanding of JavaScript concepts.
Logic Building: Strengthens problem-solving skills.
Fun and Engaging: Creates a rewarding experience for both the developer and players.

Prerequisites

Before starting, ensure you have basic knowledge of:

HTML for structuring the page.
CSS for styling.
JavaScript for game logic.

Setting Up the Project

1. HTML Structure

Create a div for the game board and a section to display game status.

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Tic Tac Toe Game</title>  
  <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  <h1>Tic Tac Toe</h1>  
  <div id="status"></div>  
  <div class="board" id="board"></div>  
  <script src="script.js"></script>  
</body>  
</html>

2. CSS for Styling

Create a styles.css file for the game board and styling elements.

body {  
  font-family: Arial, sans-serif;  
  text-align: center;  
  background-color: #f4f4f4;  
}  

.board {  
  display: grid;  
  grid-template-columns: repeat(3, 100px);  
  grid-gap: 5px;  
  margin: 20px auto;  
}  

.board div {  
  width: 100px;  
  height: 100px;  
  background-color: #fff;  
  border: 1px solid #000;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 24px;  
  font-weight: bold;  
  cursor: pointer;  
}  

#status {  
  margin: 20px;  
  font-size: 20px;  
}

3. JavaScript for Game Logic

Now, let’s add interactivity through script.js.

const board = document.getElementById('board');  
const status = document.getElementById('status');  
let currentPlayer = 'X';  
let gameBoard = ['', '', '', '', '', '', '', '', ''];  

function renderBoard() {  
  board.innerHTML = '';  
  gameBoard.forEach((cell, index) => {  
    const cellDiv = document.createElement('div');  
    cellDiv.textContent = cell;  
    cellDiv.addEventListener('click', () => handleCellClick(index));  
    board.appendChild(cellDiv);  
  });  
}  

function handleCellClick(index) {  
  if (!gameBoard[index]) {  
    gameBoard[index] = currentPlayer;  
    if (checkWin()) {  
      status.textContent = `${currentPlayer} wins!`;  
      return;  
    }  
    if (gameBoard.every(cell => cell)) {  
      status.textContent = 'It\'s a draw!';  
      return;  
    }  
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';  
    status.textContent = `Player ${currentPlayer}'s turn`;  
    renderBoard();  
  }  
}  

function checkWin() {  
  const winningCombinations = [  
    [0, 1, 2], [3, 4, 5], [6, 7, 8],  
    [0, 3, 6], [1, 4, 7], [2, 5, 8],  
    [0, 4, 8], [2, 4, 6]  
  ];  

  return winningCombinations.some(combination => {  
    return combination.every(index => gameBoard[index] === currentPlayer);  
  });  
}  

renderBoard();  
status.textContent = `Player ${currentPlayer}'s turn`;

Features to Enhance

Restart Button: Allow players to restart the game.
Score Tracking: Track wins for both players.
AI Opponent: Add a single-player mode with basic AI.

Conclusion

Building a Tic Tac Toe game is a great project to practice JavaScript. You’ll gain hands-on experience with DOM manipulation, event handling, and game logic. Once you’ve mastered the basics, you can enhance the game further.

Let us know in the comments if you tried building this project or have suggestions for improvements!

This project provides a solid foundation for learning web development and is a perfect step toward more complex projects.