بازی پازل با JAVASCRIPT
بازی پازل یکی از جذاب‌ترین و هیجان‌انگیزترین بازی‌هاست که می‌تواند ساعت‌ها شما را سرگرم کند. این بازی معمولاً با جابجایی قطعات پازل به منظور تکمیل یک تصویر مشخص طراحی می‌شود. در اینجا، ما به بررسی کد بازی پازل با استفاده از JavaScript خواهیم پرداخت.
ساختار HTML
ابتدا باید یک ساختار HTML برای بازی ایجاد کنیم. در این بخش، ما از عناصر ساده استفاده خواهیم کرد.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>بازی پازل</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="puzzle-container"></div>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
بعد از ایجاد ساختار HTML، به طراحی بصری بازی می‌پردازیم. کد CSS زیر، استایل‌های ضروری را برای پازل فراهم می‌کند.
```css
#puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 2px;
}
.puzzle-piece {
width: 100px;
height: 100px;
background-color: lightblue;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}
```
منطق بازی با JAVASCRIPT
حالا نوبت به پیاده‌سازی منطق بازی است. در اینجا از JavaScript برای جابجایی قطعات استفاده می‌کنیم.
```javascript
const puzzleContainer = document.getElementById('puzzle-container');
const pieces = Array.from({ length: 9 }, (_, i) => i + 1);
let emptyIndex = 8; // Index of the empty piece
function createPuzzle() {
pieces.sort(() => Math.random() -
- 5); // Shuffle pieces
const piece = document.createElement('div');
piece.className = 'puzzle-piece';
piece.textContent = number;
piece.addEventListener('click', () => movePiece(index));
puzzleContainer.appendChild(piece);
});
}
function movePiece(index) {
const isAdjacent = [emptyIndex - 1, emptyIndex + 1, emptyIndex - 3, emptyIndex + 3].includes(index);
if (isAdjacent) {
swapPieces(index);
}
}
function swapPieces(index) {
const piecesElements = document.querySelectorAll('.puzzle-piece');
[piecesElements[index].textContent, piecesElements[emptyIndex].textContent] = [piecesElements[emptyIndex].textContent, piecesElements[index].textContent];
emptyIndex = index;
}
createPuzzle();
```
توضیحات کد
کد بالا شامل چندین بخش مهم است:
- ایجاد پازل: با استفاده از یک آرایه، قطعات پازل ایجاد و به صورت تصادفی جابجا می‌شوند.
- حرکت قطعات: با کلیک بر روی هر قطعه، بررسی می‌شود که آیا می‌توان آن را جابه‌جا کرد یا نه.
- تعویض قطعات: در صورت امکان، محتویات دو قطعه جابجا می‌شوند.
نتیجه‌گیری
در نهایت، این کد یک بازی پازل ساده اما جذاب را پیاده‌سازی می‌کند. شما می‌توانید با افزودن ویژگی‌های بیشتر مانند شمارش زمان یا امتیاز، بازی را بهبود بخشید. در اینجا، پیچیدگی و تنوع جملات به جذابیت متن افزوده است.
با این توضیحات، امیدوارم بتوانید بازی پازل خود را با JavaScript به راحتی پیاده‌سازی کنید!
