کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد بازی **تیک تاک تو (Tic Tac Toe)** با استفاده از 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;
}
.game-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
margin: 20px 0;
}
.cell {
width: 100px;
height: 100px;
background-color: #007bff;
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
color: white;
cursor: pointer;
border-radius: 5px;
}
#restartBtn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
#message {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
document.addEventListener('DOMContentLoaded', () => {
const cells = document.querySelectorAll('.cell');
const restartBtn = document.getElementById('restartBtn');
const message = document.getElementById('message');
let currentPlayer = 'X';
let gameBoard = ['', '', '', '', '', '', '', '', ''];
// الگوهای برنده شدن
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
// مدیریت کلیک روی هر خانه
cells.forEach((cell, index) => {
cell.addEventListener('click', () => {
if (gameBoard[index] === '' && !checkWinner()) {
gameBoard[index] = currentPlayer;
cell.textContent = currentPlayer;
if (checkWinner()) {
message.textContent = `بازیکن ${currentPlayer} برنده شد!`;
} else if (gameBoard.every(cell => cell !== '')) {
message.textContent = 'بازی مساوی شد!';
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
}
});
});
// تابع برای بررسی برنده شدن
function checkWinner() {
return winningCombinations.some(combination => {
return combination.every(index => {
return gameBoard[index] === currentPlayer;
});
});
}
// شروع دوباره بازی
restartBtn.addEventListener('click', () => {
gameBoard = ['', '', '', '', '', '', '', '', ''];
cells.forEach(cell => {
cell.textContent = '';
});
currentPlayer = 'X';
message.textContent = '';
});
});
```
### توضیحات کد:
1. **HTML**: شامل یک شبکه 3x3 برای نمایش خانه‌های بازی و دکمه‌ای برای شروع دوباره بازی است.
2. **CSS**: طراحی ساده برای نمایش خانه‌ها و ایجاد رابط کاربری جذاب.
3. **JavaScript**:
- **مدیریت وضعیت بازی**: بازی تیک تاک تو با استفاده از آرایه `gameBoard` مدیریت می‌شود که هر خانه از شبکه را نشان می‌دهد.
- **مدیریت کلیک روی هر خانه**: هنگامی که یک بازیکن روی یک خانه کلیک می‌کند، آن خانه با علامت بازیکن (`X` یا `O`) پر می‌شود.
- **تابع بررسی برنده شدن**: بعد از هر حرکت، بررسی می‌شود که آیا بازیکنی برنده شده است یا خیر.
- **شروع دوباره بازی**: با کلیک بر روی دکمه "شروع دوباره"، وضعیت بازی به حالت اولیه بازمی‌گردد.
### نتیجه‌گیری
این پروژه **بازی تیک تاک تو** یک مثال عالی برای استفاده از مفاهیم پایه‌ای JavaScript مانند مدیریت رویدادها، به‌روزرسانی DOM و مدیریت وضعیت بازی است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند امتیازدهی یا بازی با هوش مصنوعی به آن اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **تیک تاک تو (Tic Tac Toe)** با استفاده از HTML، CSS و JavaScript می‌باشد
