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 1320
Share On:
👉1 Tafasiri ya Riyadh Swalihina 👉2 Kitau cha Fiqh 👉3 Madrasa kiganjani 👉4 kitabu cha Simulizi 👉5 Dua za Mitume na Manabii 👉6 web hosting
Post zinazofanana:
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 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...Game 1: Jinsi ya kutengeneza game ya tic toc ya wachezaji wawili kwa kutumia html, css na javascript
Katika post hii utakwenda kujifundisha jinsi ya kutengeneza game ya tic toc ya wachezaji wawii kwa utumia html, css na javascript
Soma Zaidi...JAVASCRIPT - somo la 8: Aina za data zinazotumika kwenye javascript
Katika somo hili utakwenda kujifunza kuhusu aina za data ambazo hutumika kwenye javascript
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 21: Jinsi ya kutumia while loop na do while loop
Katika somo hili tutakwenda kujifunza khusu while loop na do while loop.
Soma Zaidi...