بازی پازل در HTML، CSS و JavaScript
بازی پازل یکی از پروژه‌های جالب و آموزشی است که می‌تواند به یادگیری عمیق‌تر طراحی وب و برنامه‌نویسی کمک کند. در اینجا، به بررسی کامل این بازی خواهیم پرداخت.
ساختار 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="style.css">
</head>
<body>
<div class="container">
<div class="puzzle" id="puzzle"></div>
<button id="shuffle">جابه‌جا کردن</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;
}
.puzzle {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 5px;
}
.piece {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border: 2px solid #000;
cursor: pointer;
}
```
منطق بازی با JavaScript
حالا زمان آن است که منطق بازی را با JavaScript پیاده‌سازی کنیم. در اینجا باید توابعی برای جابه‌جایی قطعات و بررسی وضعیت بازی بسازیم.
```javascript
const puzzle = document.getElementById('puzzle');
const shuffleButton = document.getElementById('shuffle');
let pieces = [...Array(15).keys()].map(i => i + 1).concat(null); // 1-15 and empty
function createPuzzle() {
puzzle.innerHTML = '';
pieces.forEach(piece => {
const div = document.createElement('div');
div.className = 'piece';
div.textContent = piece;
div.onclick = () => movePiece(piece);
if (piece === null) {
div.style.visibility = 'hidden';
}
puzzle.appendChild(div);
});
}
function movePiece(piece) {
const emptyIndex = pieces.indexOf(null);
const pieceIndex = pieces.indexOf(piece);
const isAdjacent = [emptyIndex - 1, emptyIndex + 1, emptyIndex - 4, emptyIndex + 4].includes(pieceIndex);
if (isAdjacent) {
pieces[emptyIndex] = piece;
pieces[pieceIndex] = null;
createPuzzle();
}
}
shuffleButton.onclick = () => {
// Shuffle pieces logic here
createPuzzle();
};
createPuzzle();
```
نتیجه‌گیری
در این مقاله، به بررسی بازی پازل با استفاده از HTML، CSS و JavaScript پرداختیم. با ساختار ساده و منطق بازی، می‌توانید به راحتی این پروژه را توسعه داده و ویژگی‌های جدیدی به آن اضافه کنید. بازی پازل نه تنها سرگرم‌کننده است، بلکه ابزار خوبی برای یادگیری و تمرین مهارت‌های برنامه‌نویسی شما خواهد بود.
