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

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

Jiunge nasi WhatsApp
Upate Update zetu

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.eve">...

Download Post hii hapa

Download App Yetu

Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua.

Download Now Bongoclass Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:44 Topic: JavaScript Main: ICT File: Download PDF Views 659

Share On:

Facebook WhatsApp
Sponsored links
👉1 Madrasa kiganjani    👉2 Simulizi za Hadithi Audio    👉3 Kitabu cha Afya    👉4 Bongolite - Game zone - Play free game    👉5 Sira ya Mtume Muhammad (s.a.w)    👉6 Kitau cha Fiqh   

Post zinazofanana:

JAVASCRIPT - somo la 20 Jinsi ya kutumia foOfloop kwenye javascript
JAVASCRIPT - somo la 20 Jinsi ya kutumia foOfloop kwenye javascript

Katika somo hili utajifunza jinsi ya kutumia forOfLoop. Hii ni aina ya loop ambayo yenyewe inahusisha item zote kwenye array.

Soma Zaidi...
JAVASCRIPT - somo la 15: Jinsi ya kukusanya user input
JAVASCRIPT - somo la 15: Jinsi ya kukusanya user input

Katika somo hili tutakwenda kujifunza kuhusu user input. Somo hili litaangalia html form na attribute zake na jinsi zinavyohusiana na user input. Mwisho wa somo hili utaweza kutengeneza simple Calculator kwa kutumia javascript.

Soma Zaidi...
JAVASCRIPT - somo la 18: Jinsi ya kutumia switch case kwenye javascript
JAVASCRIPT - somo la 18: Jinsi ya kutumia switch case kwenye javascript

Kwa kutumia mfano huu na iliyotangulia unaweza kuweka masharti kadiri uwezavyo. Tukutane somo linalofuata tutajifunza kuhusu switch statement.

Soma Zaidi...
JAVASCRIPT - somo la 7: Jinsi ya kutumia logical operator kwenye javascript
JAVASCRIPT - somo la 7: Jinsi ya kutumia logical operator kwenye javascript

Katika somo hili utakwenda kujifunza jinsi ya kutumia logical operator kwenye javascript. Katika somo hili tutakwenda kutumia mahesabu.

Soma Zaidi...
JAVASCRIPT - somo la 21: Jinsi ya kutumia while loop na do while loop
JAVASCRIPT - somo la 21: Jinsi ya kutumia while loop na do while loop

Katika somo hili tutakwenda kujifunza khusu while loop na do while loop.

Soma Zaidi...
JAVASCRIPT - somo la 23: Jinsi ya kutengeneza calculator yaani kikokotoo cha hesabu kwa kutumia javascript
JAVASCRIPT - somo la 23: Jinsi ya kutengeneza calculator yaani kikokotoo cha hesabu kwa kutumia javascript

Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza kutumia javascript kutengeneza kikokotoo cha hesabu yaani calculator

Soma Zaidi...
JAVASCRIPT - somo la 24: Jinsi ya kutengeneza online keyboard
JAVASCRIPT - somo la 24: Jinsi ya kutengeneza online keyboard

Katika project hii utakwenda kufunza jinsi utakavyoweza kutengeneza keyboard ya online kwa kutumia javascript

Soma Zaidi...
JAVASCRIPT - somo la 3: sheria za uandishi wa code za javascript yaani syntax za javascript
JAVASCRIPT - somo la 3: sheria za uandishi wa code za javascript yaani syntax za javascript

Katika somo hili utakwenda kujifunza sheria ama syntax za kuandika javascript. Hii itakuwezesha kuelwa zaidi code za javascript.

Soma Zaidi...
JAVASCRIPT - somo la 11: function maalumu zinazotumika kwenye string yaani string method
JAVASCRIPT - somo la 11: function maalumu zinazotumika kwenye string yaani string method

Katika somo hili utakwenda kujifunza baadhi ya function maaumu zinazotumika kwenye string yaani string method.

Soma Zaidi...
JAVASCRIPT - somo la 2: Jisi ya ku print output ya code za javascript.
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...