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

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 2023-11-10 Topic: JavaScript Main: ICT File: Download PDF Views 1095

Share On:

Facebook WhatsApp
Sponsored links
👉1 Tafasiri ya Riyadh Swalihina    👉2 web hosting    👉3 Kitau cha Fiqh    👉4 Bongolite - Game zone - Play free game    👉5 Kitabu cha Afya    👉6 Madrasa kiganjani   

Post zinazofanana:

JAVASCRIPT - somo la 10: Jinsi ya kuandika object na matumizi yake kwenye javascript

Ksomo hili litakwenda kukufundisha kuhusu object kwenye javascript, kazi zake na sheria zake katika kuiandika.

Soma Zaidi...
JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba

Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba

Soma Zaidi...
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

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

Soma Zaidi...
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 19: Jinsi ya kutumia loop kwenye javascript

Katika somo hilibtutakwenda kujifunza kuhusu loop. Katika programming tunaposema loop tunamaanisha ile hali ya program ku excute code zaidi na zaidi. Tofauti na kurudia rudia kuandika statement moja kwa ajili ya kupata matokeoa hayohayo basi unapotumia lo

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 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 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 17: condition statement za if else, else if kwenye javascript

Katika somo hili tutakwenda kujifunza kuhusu condition statemant. Darasa hili ni moja katika madarasa muhimu programming. Katika somo hili tutajifunza kwa vitendo zaidi. Tutatumia mifano ya somo lililo tangulia.

Soma Zaidi...