کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **پازل تصویر در JavaScript**
این پروژه یک پازل تصویر ساده است که کاربران می‌توانند قطعات آن را جابجا کنند تا تصویر اصلی را کامل کنند. در این برنامه، تصویر به بخش‌های کوچکتر تقسیم می‌شود و کاربر باید آن‌ها را به درستی در مکان‌های خود قرار دهد.
### 1. **HTML**
ابتدا ساختار HTML را برای پازل تصویر ایجاد می‌کنیم.
```html
پازل تصویر
```
### 2. **CSS**
برای طراحی ظاهری پازل از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
#puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 1px;
margin-bottom: 20px;
}
.puzzle-piece {
width: 100px;
height: 100px;
cursor: pointer;
background-color: #fff;
border: 1px solid #ccc;
background-size: 300px 300px; /* اندازه تصویر اصلی */
transition: background-color 0.3s;
}
.puzzle-piece:hover {
background-color: #e9ecef;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const puzzleContainer = document.getElementById('puzzle-container');
const shuffleBtn = document.getElementById('shuffleBtn');
const imageUrl = 'your-image-url.jpg'; // URL تصویر مورد نظر
let pieces = [];
let emptyIndex = 8; // نمایانگر جای خالی
// تابع برای ایجاد پازل
function createPuzzle() {
pieces = [];
for (let i = 0; i < 9; i++) {
if (i < 8) {
pieces.push(i);
} else {
pieces.push(null); // جای خالی
}
}
renderPuzzle();
}
// تابع برای رندر کردن پازل
function renderPuzzle() {
puzzleContainer.innerHTML = '';
pieces.forEach((piece, index) => {
const pieceElement = document.createElement('div');
pieceElement.classList.add('puzzle-piece');
if (piece !== null) {
pieceElement.style.backgroundImage = `url(${imageUrl})`;
pieceElement.style.backgroundPosition = `-${(piece % 3) * 100}px -${Math.floor(piece / 3) * 100}px`;
pieceElement.textContent = piece + 1; // نمایش شماره
pieceElement.onclick = () => movePiece(index);
} else {
pieceElement.style.backgroundColor = '#f4f4f4'; // رنگ پس‌زمینه جای خالی
}
puzzleContainer.appendChild(pieceElement);
});
}
// تابع برای جابجا کردن قطعات
function movePiece(index) {
if (isAdjacent(index, emptyIndex)) {
pieces[emptyIndex] = pieces[index];
pieces[index] = null;
emptyIndex = index;
renderPuzzle();
}
}
// تابع برای بررسی همسایگی
function isAdjacent(index1, index2) {
const row1 = Math.floor(index1 / 3);
const col1 = index1 % 3;
const row2 = Math.floor(index2 / 3);
const col2 = index2 % 3;
return (Math.abs(row1 - row2) + Math.abs(col1 - col2) === 1);
}
// تابع برای جابه‌جا کردن تصادفی قطعات
shuffleBtn.onclick = () => {
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();
};
// راه‌اندازی پازل در بارگذاری صفحه
createPuzzle();
```
### توضیحات کد:
1. **HTML**:
- شامل یک عنوان، یک container برای پازل و یک دکمه برای جابه‌جا کردن قطعات است.
2. **CSS**:
- طراحی برای پازل و قطعات آن، شامل ویژگی‌های چیدمان و استایل‌های ظاهری.
3. **JavaScript**:
- **تابع `createPuzzle`**: برای ایجاد و تنظیم پازل.
- **تابع `renderPuzzle`**: برای نمایش قطعات پازل در صفحه.
- **تابع `movePiece`**: برای جابجایی قطعات.
- **تابع `isAdjacent`**: برای بررسی همسایگی قطعات.
- **دکمه `shuffleBtn`**: برای جابه‌جا کردن تصادفی قطعات.
### نتیجه‌گیری
این پروژه **پازل تصویر** یک راه سرگرم‌کننده برای یادگیری مفاهیم JavaScript مانند کار با DOM و تعاملات کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تایمر، شمارش معکوس، یا تنظیمات مختلف برای اندازه پازل اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **پازل تصویر در JavaScript** می‌باشد
