در اینجا یک پروژه ساده برای ایجاد بازی **Connect 4** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به دو بازیکن اجازه می‌دهد تا نوبتی در یک شبکه ۶ ردیفی و ۷ ستونی بازی کنند و هدف آن ایجاد یک ردیف از چهار مهره هم‌رنگ است.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی Connect 4 ایجاد می‌کنیم.
```html
بازی Connect 4
بازی Connect 4
```
### 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 {
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.game-board {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 20px;
}
.cell {
width: 60px;
height: 60px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.cell.red {
background-color: red;
}
.cell.yellow {
background-color: yellow;
}
.status {
margin-top: 20px;
font-size: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل ساختار بازی، نوبت بازیکنان و تشخیص برنده است.
```javascript
const columns = 7; // تعداد ستون‌ها
const rows = 6; // تعداد ردیف‌ها
let board = Array.from({ length: rows }, () => Array(columns).fill(null)); // ایجاد شبکه بازی
let currentPlayer = 'red'; // بازیکن فعلی
const gameBoard = document.getElementById('gameBoard');
const statusDisplay = document.getElementById('status');
const resetButton = document.getElementById('resetBtn');
// تابع برای ایجاد شبکه بازی
function createBoard() {
gameBoard.innerHTML = '';
for (let r = 0; r < rows; r++) {
for (let c = 0; c < columns; c++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.column = c; // ذخیره شماره ستون
cell.addEventListener('click', handleCellClick);
gameBoard.appendChild(cell);
}
}
}
// تابع برای مدیریت کلیک روی هر سلول
function handleCellClick(event) {
const column = event.target.dataset.column;
for (let r = rows - 1; r >= 0; r--) {
if (!board[r][column]) {
board[r][column] = currentPlayer; // ثبت حرکت
event.target.classList.add(currentPlayer); // تغییر رنگ سلول
if (checkWin(r, column)) {
statusDisplay.textContent = `بازیکن ${currentPlayer} برنده شد!`;
gameBoard.style.pointerEvents = 'none'; // غیرفعال کردن بازی
} else {
currentPlayer = currentPlayer === 'red' ? 'yellow' : 'red'; // تغییر نوبت
statusDisplay.textContent = `نوبت بازیکن ${currentPlayer}`;
}
return;
}
}
}
// تابع برای بررسی برنده
function checkWin(row, column) {
return (
checkDirection(row, column, 1, 0) || // افقی
checkDirection(row, column, 0, 1) || // عمودی
checkDirection(row, column, 1, 1) || // مورب از چپ به راست
checkDirection(row, column, 1, -1) // مورب از راست به چپ
);
}
// تابع برای بررسی برد در یک جهت خاص
function checkDirection(row, column, rowDir, colDir) {
let count = 1;
for (let i = 1; i < 4; i++) {
const r = row + i * rowDir;
const c = column + i * colDir;
if (r >= 0 && r < rows && c >= 0 && c < columns && board[r][c] === currentPlayer) {
count++;
} else {
break;
}
}
for (let i = 1; i < 4; i++) {
const r = row - i * rowDir;
const c = column - i * colDir;
if (r >= 0 && r < rows && c >= 0 && c < columns && board[r][c] === currentPlayer) {
count++;
} else {
break;
}
}
return count >= 4; // بررسی تعداد مهره‌های متصل
}
// تابع برای تنظیم مجدد بازی
resetButton.addEventListener('click', () => {
board = Array.from({ length: rows }, () => Array(columns).fill(null));
currentPlayer = 'red';
statusDisplay.textContent = `نوبت بازیکن ${currentPlayer}`;
createBoard();
gameBoard.style.pointerEvents = 'auto'; // فعال کردن بازی
});
// شروع بازی
createBoard();
statusDisplay.textContent = `نوبت بازیکن ${currentPlayer}`;
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، شبکه بازی و دکمه‌ای برای تنظیم مجدد بازی است.
2. **CSS**: طراحی ساده و کاربرپسند برای بازی Connect 4.
3. **JavaScript**:
- **ایجاد شبکه**: تابع `createBoard` برای ایجاد شبکه بازی.
- **مدیریت حرکات**: تابع `handleCellClick` برای ثبت حرکات بازیکنان و تغییر نوبت.
- **بررسی برنده**: تابع `checkWin` برای بررسی برنده در چهار جهت مختلف.
- **تنظیم مجدد بازی**: دکمه "تنظیم مجدد" برای بازنشانی بازی.
### نتیجه‌گیری
این پروژه **Connect 4** یک مثال عالی برای یادگیری نحوه کار با JavaScript و دستکاری DOM است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزودن امتیاز، زمان سنج یا حالت‌های مختلف بازی اضافه کنید. از کدنویسی لذت ببرید!
