Game 2: Jinsi ya kutengeneza tic toc game ya single player kwa kutumia javascript, html na css

Bila shaka! Hapa kuna mfano wa jinsi unavyoweza kuandika mchezo wa Tic Tac Toe kwa mchezaji mmoja kwa kutumia HTML na JavaScript. Katika toleo hili, mchezaji anashindana na kompyuta, ambayo hufanya hoja za kubahatisha. Nakili na ubandike nambari hii kwenye faili ya HTML na ufungue kwenye kivinjari ili kucheza mchezo.

```html
<!DOCTYPE html>
<html lang="sw">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tic Tac Toe - Mchezaji Mmoja</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }

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

    .cell {
      width: 100px;
      height: 100px;
      font-size: 24px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
  </style>
</head>
<body>

<h1>Tic Tac Toe - Mchezaji Mmoja</h1>

<div id="board"></div>
<p id="status"></p>

<script>
  // Hali ya mchezo
  let board = ['', '', '', '', '', '', '', '', ''];
  let currentPlayer = 'X';
  let gameActive = true;

  // Elementi
  const boardElement = document.getElementById('board');
  const statusElement = document.getElementById('status');

  // Unda ubao wa mchezo
  for (let i = 0; i < 9; i++) {
    const cell = document.createElement('div');
    cell.classList.add('cell');
    cell.dataset.index = i;
    cell.addEventListener('click', handleCellClick);
    boardElement.appendChild(cell);
  }

  // Fungua kushughulikia bonyeza la kiini
  function handleCellClick(event) {
    const index = event.target.dataset.index;

    // Angalia kama kiini tayari kimejazwa au mchezo umekwisha
    if (board[index] !== '' || !gameActive) {
      return;
    }

    // Sasisha ubao na angalia mshindi
    board[index] = currentPlayer;
    updateBoard();
    const winner = checkWinner();

    // Onyesha mshindi au endelea na hoja ya kompyuta
    if (winner) {
      statusElement.textContent = `${winner} ameshinda!`;
      gameActive = false;
    } else if (board.every(cell => cell !== '')) {
      statusElement.textContent = 'Ni sare!';
      gameActive = false;
    } else {
      currentPlayer = 'O'; // Rudi kwa zamu ya kompyuta
      statusElement.textContent = `Zamu ya Kompyuta`;
      setTimeout(makeComputerMove, 1000); // Kuchelewesha ili kuiga kompyuta "kufikiria"
    }
  }

  // Fungua kufanya hoja ya kompyuta
  function makeComputerMove() {
    if (!gameActive) {
      return;
    }

    // Pata seli zisizo na thamani
    const emptyCells = board.reduce((acc, cell, index) => {
      if (cell === '') {
        acc.push(index);
      }
      return acc;
    }, []);

    // Chagua seli tupu kwa kubahatisha
    const randomIndex = Math.floor(Math.random() * emptyCells.length);
    const computerMove = emptyCells[randomIndex];

    // Sasisha ubao na angalia mshindi
    board[computerMove] = 'O';
    updateBoard();
    const winner = checkWinner();

    // Onyesha mshindi au rudi kwa zamu ya mchezaji
    if (winner) {
      statusElement.textContent = `${winner} ameshinda!`;
      gameActive = false;
    } else if (board.every(cell => cell !== '')) {
      statusElement.textContent = 'Ni sare!';
      gameActive = false;
    } else {
      currentPlayer = 'X';
      statusElement.textContent = `Zamu yako`;
    }
  }

  // Sasisha uwakilishi wa ubao wa mchezo
  function updateBoard() {
    board.forEach((value, index) => {
      const cell = boardElement.children[index];
      cell.textContent = value;
    });
  }

  // Angalia mshindi
  function checkWinner() {
    const winPatterns = [
      [0, 1, 2], [3, 4, 5], [6, 7, 8], // Safu
      [0, 3, 6], [1, 4, 7], [2, 5, 8], // Staha
      [0, 4, 8], [2, 4, 6]             // Duara
    ];

    for (const pattern of winPatterns) {
      const [a, b, c] = pattern;
      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
        highlightWinnerCells(pattern);
        return board[a];
      }
    }

    return null;
  }

  // Weka rangi ya kiini cha mshindi
  function highlightWinnerCells(cells) {
    for (const index of cells) {
      const cell = boardElement.children[index];
      cell.style.backgroundColor = '#8eff8e'; // Rangi ya kijani mwanga
    }
  }
</script>

</body>
</html>