کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ایجاد یک بازی پازل (Puzzle Game) در JavaScript پروژه‌ای سرگرم‌کننده و آموزشی است که میتوانید با استفاده از آن مهارت‌های برنامه‌نویسی خود را تقویت کنید. در این پروژه، هدف بازی این است که قطعات یک تصویر را در مکان‌های صحیح خود قرار دهید تا تصویر کامل شود.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `puzzle-game` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
بازی پازل
بازی پازل
```
#### ۳. ایجاد فایل CSS
**styles.css**:
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
max-width: 400px;
margin: auto;
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin: 20px 0;
}
.piece {
width: 100%;
height: 100px;
background-color: #007BFF;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
transition: transform 0.2s;
}
.piece:hover {
transform: scale(1.05);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
```
#### ۴. پیاده‌سازی منطق بازی در JavaScript
**script.js**:
```javascript
const gameBoard = document.getElementById('game-board');
const shuffleBtn = document.getElementById('shuffle-btn');
const restartBtn = document.getElementById('restart-btn');
const SIZE = 3; // اندازه پازل
let pieces = [];
// ایجاد پازل
function createPuzzle() {
pieces = [];
for (let i = 0; i < SIZE * SIZE; i++) {
pieces.push(i);
}
renderPuzzle();
}
// رسم پازل
function renderPuzzle() {
gameBoard.innerHTML = '';
pieces.forEach((piece, index) => {
const pieceDiv = document.createElement('div');
pieceDiv.className = 'piece';
pieceDiv.textContent = piece !== 0 ? piece : ''; // 0 به عنوان بلوک خالی
pieceDiv.setAttribute('data-index', index);
pieceDiv.addEventListener('click', () => movePiece(index));
gameBoard.appendChild(pieceDiv);
});
}
// حرکت قطعه
function movePiece(index) {
const emptyIndex = pieces.indexOf(0); // پیدا کردن بلوک خالی
const isAdjacent =
index === emptyIndex - 1 || index === emptyIndex + 1 ||
index === emptyIndex - SIZE || index === emptyIndex + SIZE;
if (isAdjacent) {
[pieces[index], pieces[emptyIndex]] = [pieces[emptyIndex], pieces[index]]; // تعویض قطعات
renderPuzzle();
checkWin();
}
}
// هم زدن پازل
function shufflePuzzle() {
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]];
}
renderPuzzle();
}
// بررسی برنده شدن
function checkWin() {
if (pieces.join('') === [...Array(SIZE * SIZE).keys()].join('')) {
setTimeout(() => alert('تبریک! شما برنده شدید!'), 100);
}
}
// راه‌اندازی مجدد بازی
restartBtn.addEventListener('click', createPuzzle);
shuffleBtn.addEventListener('click', shufflePuzzle);
// شروع بازی اولیه
createPuzzle();
```
### توضیحات کد
1. **HTML**:
- شامل عنوان، زمین بازی و دکمه‌هایی برای هم زدن و شروع دوباره است.
2. **CSS**:
- طراحی زیبا و سازماندهی زمین بازی و قطعات پازل.
3. **JavaScript**:
- **ایجاد پازل**: تابع `createPuzzle` برای ایجاد و نمایش قطعات پازل استفاده می‌شود.
- **حرکت قطعه**: با کلیک بر روی هر قطعه، بررسی می‌شود که آیا قطعه انتخاب شده در نزدیکی قطعه خالی است یا خیر. اگر چنین باشد، قطعه‌ها جابه‌جا می‌شوند.
- **هم زدن پازل**: تابع `shufflePuzzle` برای هم زدن قطعات پازل استفاده می‌شود.
- **بررسی برنده شدن**: تابع `checkWin` وضعیت برنده شدن را بررسی می‌کند.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. با کلیک بر روی قطعات، پازل را کامل کنید و از بازی لذت ببرید!
### نتیجه‌گیری
با این پروژه، شما یک بازی پازل ساده را با استفاده از JavaScript پیاده‌سازی کرده‌اید. میتوانید این بازی را با افزودن ویژگی‌های بیشتر، مانند انتخاب تصویر پس‌زمینه، زمان‌بندی، یا سطوح سختی گسترش دهید. این پروژه به شما در یادگیری مفاهیم اولیه توسعه وب و مدیریت رویدادها در JavaScript کمک خواهد کرد.
| صفحه قابل مشاهده:
دانلود پروژه بازی پازل (Puzzle Game) در JavaScript می‌باشد
