مدونة مقالة للمعلوميات

Introduction

Tic Tac Toe is a classic game that’s simple yet fun to play. In this tutorial, you’ll learn how to create a Tic Tac Toe game using HTML, CSS, and JavaScript. By the end of this guide, you’ll have a fully functional game that you can play with your friends!

Step 1: Set Up the HTML Structure

First, let’s create the basic HTML structure for the game. We’ll use a grid layout for the game board and add placeholders for the game status.

<div id="game-board">
  <div class="cell" data-index="0"></div>
  <div class="cell" data-index="1"></div>
  <div class="cell" data-index="2"></div>
  <div class="cell" data-index="3"></div>
  <div class="cell" data-index="4"></div>
  <div class="cell" data-index="5"></div>
  <div class="cell" data-index="6"></div>
  <div class="cell" data-index="7"></div>
  <div class="cell" data-index="8"></div>
</div>
<div id="status">Player X's turn</div>
      

Step 2: Style the Game with CSS

Next, let’s style the game board and cells using CSS. We’ll use a grid layout to create a 3x3 board and add some hover effects to make the game interactive.

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

.cell {
  width: 100px;
  height: 100px;
  background: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.cell:hover {
  background: #2980b9;
}

#status {
  text-align: center;
  font-size: 1.2rem;
  margin: 20px 0;
  color: #2c3e50;
}
      

Step 3: Add JavaScript for Game Logic

Finally, let’s add the JavaScript code to handle the game logic. This includes checking for a winner, switching turns, and resetting the game.

const cells = document.querySelectorAll('.cell');
const statusText = document.getElementById('status');
let currentPlayer = 'X';
let gameActive = true;
let gameState = ['', '', '', '', '', '', '', '', ''];

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]
];

function handleCellClick(event) {
  const clickedCell = event.target;
  const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));

  if (gameState[clickedCellIndex] !== '' || !gameActive) return;

  gameState[clickedCellIndex] = currentPlayer;
  clickedCell.textContent = currentPlayer;

  checkForWinner();
}

function checkForWinner() {
  let roundWon = false;

  for (let i = 0; i < winningConditions.length; i++) {
    const [a, b, c] = winningConditions[i];
    if (gameState[a] === '' || gameState[b] === '' || gameState[c] === '') continue;
    if (gameState[a] === gameState[b] && gameState[b] === gameState[c]) {
      roundWon = true;
      break;
    }
  }

  if (roundWon) {
    statusText.textContent = `Player ${currentPlayer} wins!`;
    gameActive = false;
    return;
  }

  if (!gameState.includes('')) {
    statusText.textContent = 'It\'s a draw!';
    gameActive = false;
    return;
  }

  currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  statusText.textContent = `Player ${currentPlayer}'s turn`;
}

function resetGame() {
  gameState = ['', '', '', '', '', '', '', '', ''];
  gameActive = true;
  currentPlayer = 'X';
  statusText.textContent = `Player ${currentPlayer}'s turn`;
  cells.forEach(cell => cell.textContent = '');
}

cells.forEach(cell => cell.addEventListener('click', handleCellClick));
      

Step 4: Play the Game

Now that everything is set up, you can play the game! Click on any cell to make your move. The game will automatically switch turns between Player X and Player O and announce the winner or a draw.

Player X's turn

Conclusion

Congratulations! You’ve successfully created a Tic Tac Toe game using HTML, CSS, and JavaScript. You can now customize the game further by adding more features, such as a score tracker or animations. Happy coding!