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!';
...
Umeionaje Makala hii.. ?
Tarehe: 2024-05-10 14:53:23
Topic: JavaScript
Main: Project
File: Download PDF
Views 1227
Share On:
👉1 Simulizi za Hadithi Audio 👉2 Sira ya Mtume Muhammad (s.a.w) 👉3 Kitabu cha Afya 👉4 Dua za Mitume na Manabii 👉5 kitabu cha Simulizi 👉6 Kitau cha Fiqh
Post zinazofanana:
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
Katika somo hili utakwenda kujifunza jinsi ya kutumia logical operator kwenye javascript. Katika somo hili tutakwenda kutumia mahesabu.
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 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...Offline data handle kwa kutumia javascript
Katika somo hili tutaenda kujifunza namna ya kuhifadhi taarifa za mtumiaji endapo mtandao utakuwa haupo ()
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...