Create TIK-TOK-TOE game using Angular

In this tutorial, we will create a simple yet interactive Tic-Tac-Toe game using Angular.

Tic-Tac-Toe is a classic game that serves as an excellent project to learn Angular concepts like component interaction, event handling, and state management.

Prerequisites

Before getting started, ensure you have the following installed:

• Node.js (with npm)
• Angular CLI (npm install -g @angular/cli)

Step 1: Create a New Angular Project

Run the following command to create a new Angular application:

ng new tic-tac-toe-angular
cd tic-tac-toe-angular

Once inside the project folder, start the development server:

ng serve

Step 2: Generate Game Component

Create a new component to manage the game logic and UI:

ng generate component game

This will create game.component.ts, game.component.html, and game.component.css in the src/app/game folder.

Step 3: Implement Game Logic

Modify game.component.ts to handle player moves, check for wins, and reset the game:

import { Component } from '@angular/core';

@Component({
  selector: 'app-game',
  templateUrl: './game.component.html',
  styleUrls: ['./game.component.css']
})
export class GameComponent {
  board: string[] = Array(9).fill(null);
  currentPlayer: string = 'X';
  winner: string | null = null;

  makeMove(index: number) {
    if (!this.board[index] && !this.winner) {
      this.board[index] = this.currentPlayer;
      if (this.checkWinner()) {
        this.winner = this.currentPlayer;
      } else {
        this.currentPlayer = this.currentPlayer === 'X' ? 'O' : 'X';
      }
    }
  }

  checkWinner(): boolean {
    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]
    ];
    for (const [a, b, c] of winningCombinations) {
      if (this.board[a] && this.board[a] === this.board[b] && this.board[a] === this.board[c]) {
        return true;
      }
    }
    return false;
  }

  resetGame() {
    this.board = Array(9).fill(null);
    this.currentPlayer = 'X';
    this.winner = null;
  }
}

Step 4: Create Game UI

Modify game.component.html to display the game board and controls:

<div class="game-container">
  <h1>Tic-Tac-Toe</h1>
  <div class="board">
    <div *ngFor="let cell of board; let i = index"
         class="cell"
         [class.winner]="winner && board[i] === winner"
         (click)="makeMove(i)">
      {{ cell }}
    </div>
  </div>
  <p *ngIf="winner">Winner: {{ winner }}</p>
  <button (click)="resetGame()">Reset Game</button>
</div>

Step 5: Style the Game Board

Modify game.component.css to style the board and cells:

.game-container {
  text-align: center;
}

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

.cell {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  background: lightgray;
  border: 2px solid black;
  cursor: pointer;
}

.cell.winner {
  background: lightgreen;
}

Step 6: Integrate the Component

To use the game component, update app.component.html:

<app-game></app-game>

Step 7: Run the Game

Save all changes and run:

ng serve

Open the browser and navigate to http://localhost:4200 to play the game.

Conclusion

Congratulations! 🎉 You have successfully created a Tic-Tac-Toe game using Angular. This project helps in understanding:

• Component-based architecture
• Event handling
• State management in Angular

Happy coding! 🚀