مقدمه‌ای بر بازی Reversi
بازی Reversi که به نام Othello نیز شناخته می‌شود، یک بازی استراتژیک دو نفره است که بر روی یک تخته مربعی ۸x۸ انجام می‌شود. هدف اصلی بازی، به دست آوردن بیشترین تعداد مهره‌های خود در پایان بازی است. با استفاده از HTML و CSS، می‌توانیم یک نسخه ساده از این بازی را ایجاد کنیم.
ساختار HTML
برای شروع، ابتدا باید ساختار HTML را طراحی کنیم. تخته بازی، شامل ۶۴ مربع است که درون یک عنصر div قرار می‌گیرد.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<title>بازی Reversi</title>
</head>
<body>
<div class="game-container">
<div class="board">
<!-- 64 مربع تخته بازی -->
<div class="cell"></div>
<!-- ادامه برای ۶۳ مربع دیگر -->
</div>
<button class="reset">تنظیم مجدد</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
طراحی CSS
حالا نوبت به طراحی CSS می‌رسد. با استفاده از CSS، می‌توانیم ظاهر تخته و مهره‌ها را زیبا کنیم.
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.game-container {
text-align: center;
}
.board {
display: grid;
grid-template-columns: repeat(8, 1fr);
width: 400px;
height: 400px;
}
.cell {
border: 1px solid #000;
width: 50px;
height: 50px;
background-color: green;
}
.cell.black {
background-color: black;
}
.cell.white {
background-color: white;
}
```
برنامه‌نویسی بازی با JavaScript
در نهایت، برای اینکه بازی کار کند، نیاز به JavaScript داریم. با این کد، می‌توانیم مکانیزم بازی را پیاده‌سازی کنیم.
```javascript
const cells = document.querySelectorAll('.cell');
let currentPlayer = 'black';
cells.forEach(cell => {
cell.addEventListener('click', () => {
if (!cell.classList.contains('black') && !cell.classList.contains('white')) {
cell.classList.add(currentPlayer);
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
}
});
});
document.querySelector('.reset').addEventListener('click', () => {
cells.forEach(cell => {
cell.classList.remove('black', 'white');
});
currentPlayer = 'black';
});
```
نتیجه‌گیری
با این کدها، یک بازی ساده Reversi با استفاده از HTML، CSS و JavaScript ایجاد کردیم.
بازی به سادگی قابل گسترش است. می‌توانید به آن ویژگی‌های بیشتری اضافه کنید، مانند شمارش امتیازات، نمایش نوبت بازیکن و الگوریتم‌های جالب. فقط کافی است خلاق باشید و از کدهای نوشته‌شده به عنوان نقطه شروع استفاده کنید.
