☰ Home Afya Dini ICT Burudani Jifunze Projects Maswali Updates Maktaba App About Contact Privacy Login Register

Home About Contact Privacy

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>

// 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 !== '')) {<">...

Kama unahitaji kuuliza maswali Bofya hapa

Je! umeipenda hii post?
Ndio Hapana Save post

Rajabu Tarehe 2024-05-10 14:53:23 Download PDF Share On Facebook or Whatsapp Imesomwa mara 451

Sponsored links
👉1 Kitabu cha Afya 👉2 Kitau cha Fiqh 👉3 kitabu cha Simulizi 👉4 Madrasa kiganjani

Post zifazofanana:-

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 13: Function zinazofanya kazi kwenye array.
Katika somo hili tutakwenda kujifunza kuhusu array pamoja na method zinazohusiana na array. Pia nitakujuza tena kuhusu array ni nini. Utajifunza pia jinsi ya kutengeneza array. 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 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 1: Kwa nini ni muhimu kujifunza javascript
Katika somo hili utajifunza kuhusu historia ya javacsript pamoja na kazi za javascript. Pia utayajuwa makampuni makubwa yanayotumia javascript. 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 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 6: Jinsi ya kufanya mahesabu kwenye javascript
Katika somo hili utajifunza kuhusu matendo ya hesabu ambayo ni kugawanya, kujumlisha, kuzidisha na kutoa 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 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...

JAVASCRIPT - somo la 4: Jinsi ya kuandika variable kwenye javascript
Katika somo hili utajifunza jinsi ya kuandika variable. Hapa utajifunza sheria zinazohusu variable katika javascript 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...