کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی تیک‌تک‌تو (TicTacToe)** با استفاده از JavaScript
این پروژه یک بازی تیک‌تک‌تو ساده است که به کاربران اجازه می‌دهد با یکدیگر بازی کنند. ما از HTML، CSS و JavaScript برای پیاده‌سازی این پروژه استفاده خواهیم کرد.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی تیک‌تک‌تو ایجاد می‌کنیم.
```html
بازی تیک‌تک‌تو
بازی تیک‌تک‌تو
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
margin-bottom: 20px;
}
.cell {
width: 100px;
height: 100px;
background-color: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
cursor: pointer;
}
.cell:hover {
background-color: #d1d1d1;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
.message {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const cells = document.querySelectorAll('.cell');
const resetBtn = document.getElementById('resetBtn');
const messageDiv = document.getElementById('message');
let currentPlayer = 'X';
let board = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;
// بردهای ممکن
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
// تابع انتخاب سلول
function handleCellClick(event) {
const clickedCell = event.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
if (board[clickedCellIndex] !== '' || !gameActive) {
return;
}
board[clickedCellIndex] = currentPlayer;
clickedCell.textContent = currentPlayer;
checkResult();
}
// تابع بررسی نتیجه
function checkResult() {
let roundWon = false;
for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (board[a] === '' || board[b] === '' || board[c] === '') {
continue;
}
if (board[a] === board[b] && board[a] === board[c]) {
roundWon = true;
break;
}
}
if (roundWon) {
messageDiv.textContent = `بازیکن ${currentPlayer} برنده شد!`;
gameActive = false;
return;
}
if (!board.includes('')) {
messageDiv.textContent = 'بازی مساوی شد!';
gameActive = false;
return;
}
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
// تابع تنظیم مجدد بازی
function resetGame() {
board = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
currentPlayer = 'X';
messageDiv.textContent = '';
cells.forEach(cell => {
cell.textContent = '';
});
}
// افزودن رویدادها
cells.forEach(cell => {
cell.addEventListener('click', handleCellClick);
});
resetBtn.addEventListener('click', resetGame);
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان بازی، یک شبکه برای بازی تیک‌تک‌تو، یک دکمه برای تنظیم مجدد بازی و یک بخش برای نمایش پیام برنده است.
2. **CSS**:
- طراحی ساده برای ایجاد یک رابط کاربری جذاب و کاربرپسند.
3. **JavaScript**:
- **متغیرها**: متغیرهای مختلفی برای پیگیری بازیکن فعلی، وضعیت بازی و بردها تعریف شده است.
- **تابع `handleCellClick`**: این تابع هنگام کلیک بر روی یک سلول اجرا می‌شود و بازیکن فعلی را در آن سلول قرار می‌دهد.
- **تابع `checkResult`**: بررسی می‌کند که آیا یک بازیکن برنده شده است یا بازی مساوی شده است.
- **تابع `resetGame`**: برای تنظیم مجدد بازی و شروع دوباره.
- **رویدادها**: برای هر سلول و دکمه تنظیم مجدد رویدادهای کلیک اضافه شده است.
### نتیجه‌گیری
این پروژه **بازی تیک‌تک‌تو** یک مثال عالی از استفاده از JavaScript برای ایجاد بازی‌های ساده و مدیریت وضعیت بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ذخیره‌سازی امتیازها، تغییر طراحی یا حتی افزودن قابلیت بازی با کامپیوتر را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی تیک‌تک‌تو (TicTacToe)** با استفاده از JavaScript می‌باشد
