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 1340
Share On:
👉1 kitabu cha Simulizi 👉2 Bongolite - Game zone - Play free game 👉3 ai web app 👉4 Simulizi za Hadithi Audio 👉5 web hosting 👉6 Madrasa kiganjani
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 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 9: Jinsi ya kuandika function kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya kuandika function kwenye javascript. Utajifunz apia namna ya kuitumia function hiyo
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 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 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...