ایجاد بازی REVERSI با استفاده از HTML و CSS
ایجاد یک بازی Reversi می‌تواند تجربه جذابی باشد. این بازی به دو بازیکن امکان می‌دهد تا با قرار دادن مهره‌ها بر روی تخته، مهره‌های حریف را به رنگ خود تبدیل کنند. در ادامه، مراحل طراحی و پیاده‌سازی این بازی را بررسی خواهیم کرد.
۱. ساختار HTML
ابتدا، یک فایل HTML بسازید. ساختار پایه به شکل زیر خواهد بود:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>بازی Reversi</h1>
<div class="board"></div>
<button id="restart">شروع دوباره</button>
</div>
<script src="script.js"></script>
</body>
</html>
```
در اینجا، ما یک عنوان، تخته بازی و یک دکمه برای شروع دوباره داریم.
۲. استایل CSS
حالا، نوبت به طراحی ظاهری بازی است. فایل CSS به شکل زیر خواهد بود:
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
.board {
display: grid;
grid-template-columns: repeat(8, 50px);
grid-template-rows: repeat(8, 50px);
gap: 2px;
margin: 20px auto;
}
.cell {
width: 50px;
height: 50px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cell.black {
background-color: black;
}
.cell.white {
background-color: white;
}
```
در اینجا، تخته بازی به صورت یک شبکه ۸x۸ ایجاد شده است. هر خانه در تخته با کلاس‌های `cell`، `black` و `white` مشخص می‌شود.
۳. منطق بازی با JavaScript
حالا باید منطق بازی را با استفاده از JavaScript پیاده‌سازی کنیم. به فایل `script.js` کد زیر را اضافه کنید:
```javascript
const board = document.querySelector('.board');
let turn = 'black';
function createBoard() {
for (let i = 0; i < 64; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.addEventListener('click', () => placePiece(cell));
board.appendChild(cell);
}
placeInitialPieces();
}
function placeInitialPieces() {
const cells = document.querySelectorAll('.cell');
cells[27].classList.add('white');
cells[28].classList.add('black');
cells[35].classList.add('black');
cells[36].classList.add('white');
}
function placePiece(cell) {
if (!cell.classList.contains('black') && !cell.classList.contains('white')) {
cell.classList.add(turn);
turn = turn === 'black' ? 'white' : 'black';
}
}
document.getElementById('restart').addEventListener('click', () => {
board.innerHTML = '';
turn = 'black';
createBoard();
});
createBoard();
```
در اینجا، ما تخته را ایجاد می‌کنیم و مهره‌ها را در مکان‌های اولیه قرار می‌دهیم. همچنین با کلیک بر روی خانه‌ها، مهره‌ها را قرار می‌دهیم و نوبت بازیکنان را تغییر می‌دهیم.
نتیجه‌گیری
با استفاده از HTML، CSS و JavaScript، می‌توانیم یک بازی ساده Reversi ایجاد کنیم. این بازی به راحتی قابل گسترش و بهبود است. می‌توانید ویژگی‌های بیشتری مانند شمارش امتیازها، تعیین برنده و یا افزودن ویژگی‌های گرافیکی جذاب‌تر اضافه کنید.
امیدوارم این توضیحات به شما کمک کند تا پروژه‌تان را با موفقیت اجرا کنید!
