بازی پازل با 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 به راحتی پیاده‌سازی کنید!
کد بازی پازل با جاوااسکریپت: راهنمای جامع و کامل
در این مقاله، قصد داریم به صورت کامل و جامع درباره ساختن یک بازی پازل با استفاده از جاوااسکریپت صحبت کنیم. بازی‌های پازل یکی از محبوب‌ترین نوع بازی‌ها هستند که نیازمند تمرکز و تفکر است، و ساختن آنها با کد جاوااسکریپت، هم یک چالش جالب است و هم یک فرصت عالی برای یادگیری مفاهیم برنامه‌نویسی و طراحی وب.
اولین قدم در توسعه بازی پازل، طراحی ساختار کلی است. معمولا، بازی‌های پازل شامل یک صفحه با چندین قطعه است که باید به درستی کنار هم قرار بگیرند تا تصویر یا الگوی مورد نظر کامل شود. در اینجا، ما یک نمونه پایه را مورد بررسی قرار می‌دهیم که بتوانید با آن شروع کنید و آن را توسعه دهید.
ساختار HTML
در ابتدا، باید صفحه HTML برای نمایش قطعات و کنترل بازی ایجاد کنید. به عنوان مثال:
```html
<div id="puzzle-container"></div>
<button id="shuffle-btn">شکل‌دهی مجدد</button>
```
در این قسمت، یک بخش برای قرار دادن قطعات پازل و یک دکمه برای شفل کردن یا مخلوط کردن قطعات قرار دادیم.
استایل CSS
برای جذاب‌تر کردن بازی، کمی استایل به آن می‌دهیم:
```css
#puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
margin: 20px auto;
width: fit-content;
}
.puzzle-piece {
width: 100px;
height: 100px;
background-color: #4CAF50;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: 2px solid #333;
user-select: none;
}
```
این استایل، یک شبکه ۳ در ۳ برای قطعات ایجاد می‌کند و ظاهر خوبی به قطعات می‌دهد.
کد جاوااسکریپت
حالا وارد بخش اصلی می‌شویم. در این قسمت، باید قطعات پازل ساخته، مخلوط و کنترل شوند.
```javascript
const container = document.getElementById('puzzle-container');
const shuffleBtn = document.getElementById('shuffle-btn');
let pieces = [];
const size = 3; // 3x3 پازل
// ساختن قطعات
for (let i = 1; i <= size * size; i++) {
const piece = document.createElement('div');
piece.className = 'puzzle-piece';
piece.textContent = i;
piece.setAttribute('data-index', i - 1);
pieces.push(piece);
}
// قرار دادن قطعات در صفحه
function renderPieces(array) {
container.innerHTML = '';
array.forEach(piece => {
container.appendChild(piece);
});
}
// مخلوط کردن قطعات
function shufflePieces() {
for (let i = pieces.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[pieces[i], pieces[j]] = [pieces[j], pieces[i]];
}
renderPieces(pieces);
}
// چک کردن جای صحیح
function isSolved() {
for (let i = 0; i < pieces.length; i++) {
if (parseInt(pieces[i].getAttribute('data-index')) !== i) {
return false;
}
}
return true;
}
// تعویض قطعات
let selectedPiece = null;
container.addEventListener('click', (e) => {
if (e.target.className === 'puzzle-piece') {
if (!selectedPiece) {
selectedPiece = e.target;
selectedPiece.style.borderColor = 'red';
} else {
// تبادل جای دو قطعه
const temp = selectedPiece.textContent;
selectedPiece.textContent = e.target.textContent;
e.target.textContent = temp;
selectedPiece.style.borderColor = '#333';
selectedPiece = null;
if (isSolved()) {
alert('تبریک! پازل کامل شد.');
}
}
}
});
shuffleBtn.addEventListener('click', () => {
shufflePieces();
});
// اجرای اولیه
renderPieces(pieces);
```
در این کد، چند نکته مهم رعایت شده است:
- ساختن قطعات و قرار دادن آنها در صفحه.
- مخلوط کردن تصادفی قطعات.
- امکان تعویض قطعات با کلیک روی آنها.
- چک کردن حل شدن پازل.
توسعه‌های پیشرفته‌تر
البته، این نمونه بسیار ساده است و می‌توانید با افزودن موارد زیر، آن را بهبود بخشید:
- افزودن تصویر پس‌زمینه یا الگو برای قطعات.
- محدود کردن حرکت قطعات به جای تعویض تصادفی.
- افزودن تایمر برای رقابت زمانی.
- ذخیره‌سازی وضعیت بازی در Local Storage.
در کل، ساختن بازی پازل با جاوااسکریپت، مهارت‌های پایه‌ای برنامه‌نویسی و طراحی را تقویت می‌کند و به شما امکان می‌دهد پروژه‌های جذاب و تعاملی بسازید.
اگر سوالی دارید یا نیاز به توضیحات بیشتر در مورد بخش خاصی دارید، در خدمتتان هستم!
