picha

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

Katika post hii utakwenda kujifunza kutengeneza game ya tic toc ya mchezaji mmoja na kompyuta yaani single player

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!';
     ...

Ingia sasa ili uweze kusoma makala hii yote.

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

       
Author: Rajabu image Tarehe: 2024-05-10 14:53:23 Topic: JavaScript Main: Project File: Download PDF Views 1353

Share On:

Share follows: 0 | Unique share links followed: 0
Sponsored links
👉1 Simulizi za Hadithi Audio     👉2 kitabu cha Simulizi     👉3 ai web app     👉4 web hosting     👉5 Dua za Mitume na Manabii     👉6 Madrasa kiganjani    

Post zinazofanana:

JAVASCRIPT - somo la 2: Jisi ya ku print output ya code za javascript.

Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza ku display matokeo ya code za javascript.

Soma Zaidi...
JAVASCRIPT - somo la 5: Jinsi ya kupangilia maandishi wakati wa ku output kwenye javascript

Katika somo hili utajifunza jinsi ya kupangilia muonekano wa maandishi (text) wakati wa ku out put matokeo ya code

Soma Zaidi...
JAVASCRIPT - somo la 22: Jinsi ya ku set time na tarehe

Katika somo hili tutakwenda kujifunza kuhusu ku set time. Yaani tutaweka muda ambao code zinatakiwa ndio zilete matokeo.

Soma Zaidi...
JAVASCRIPT - somo la 14: Jifunze kuhusu event kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu javascript events. Event ni neno la Kiingereza lenye maana tukio wingi wake events kumaanisha matukio. Natumia ni kila ambacho kinatokea kwenye javascript.

Soma Zaidi...
JAVASCRIPT - somo la 16: Jinsi ya kutumia html form kwenye javascript

Katika somo hili utakwenda kujifunza jinsi ya ku dili na html form kwenye javascript. Javascript inaweza kufanya mengi kwenye html form.

Soma Zaidi...
Game 3: Mchezo wa kufikiria namba kwa kutumia javascript

Hii ni game ambayo utafikiria namba, ambayo inatakiwa iwe sawa na namba ambayo game imeiweka.

Soma Zaidi...