کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **پازل اسلایدی** (Sliding Puzzle) با استفاده از HTML، CSS و 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 {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 5px;
margin: 20px auto;
}
.tile {
background-color: #28a745;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
cursor: pointer;
}
.tile.empty {
background-color: transparent;
border: 2px dashed #ccc;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const puzzle = document.getElementById('puzzle');
const shuffleBtn = document.getElementById('shuffleBtn');
const size = 4; // اندازه پازل 4x4
let tiles = [];
// تابع برای ایجاد کاشی‌ها
function createTiles() {
for (let i = 0; i < size * size; i++) {
const tile = document.createElement('div');
tile.classList.add('tile');
tile.textContent = i === size * size - 1 ? '' : i + 1; // کاشی آخر خالی است
tile.dataset.index = i;
tile.addEventListener('click', () => moveTile(i));
tiles.push(tile);
puzzle.appendChild(tile);
}
}
// تابع برای حرکت کاشی
function moveTile(index) {
const emptyIndex = tiles.findIndex(tile => tile.textContent === '');
const isAdjacent = checkAdjacent(index, emptyIndex);
if (isAdjacent) {
// جابجایی کاشی
[tiles[index].textContent, tiles[emptyIndex].textContent] = [tiles[emptyIndex].textContent, tiles[index].textContent];
renderTiles();
}
}
// تابع برای بررسی همسایگی
function checkAdjacent(index1, index2) {
const row1 = Math.floor(index1 / size);
const col1 = index1 % size;
const row2 = Math.floor(index2 / size);
const col2 = index2 % size;
return (Math.abs(row1 - row2) + Math.abs(col1 - col2) === 1);
}
// تابع برای نمایش کاشی‌ها
function renderTiles() {
tiles.forEach(tile => {
puzzle.appendChild(tile);
});
}
// تابع برای مخلوط کردن کاشی‌ها
function shuffleTiles() {
for (let i = tiles.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[tiles[i].textContent, tiles[j].textContent] = [tiles[j].textContent, tiles[i].textContent];
}
renderTiles();
}
// ایجاد کاشی‌ها و افزودن رویداد مخلوط کردن
createTiles();
shuffleBtn.addEventListener('click', () => {
shuffleTiles();
renderTiles();
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، ناحیه برای نمایش کاشی‌ها و دکمه‌ای برای مخلوط کردن کاشی‌ها است.
2. **CSS**: طراحی زیبا و کاربرپسند برای پازل.
3. **JavaScript**:
- **ایجاد کاشی‌ها**: تابعی برای ایجاد و نمایش کاشی‌ها در پازل.
- **حرکت کاشی**: وقتی کاربر روی کاشی کلیک می‌کند، چک می‌شود که آیا کاشی در کنار کاشی خالی قرار دارد یا خیر و در صورت درست بودن، کاشی جابجا می‌شود.
- **مخلوط کردن کاشی‌ها**: با فشردن دکمه، کاشی‌ها مخلوط می‌شوند.
### نتیجه‌گیری
این پروژه **پازل اسلایدی** یک مثال عالی برای یادگیری نحوه کار با JavaScript، DOM و رویدادها است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند شمارش معکوس، تایمر یا حتی امکان تنظیم اندازه پازل اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **پازل اسلایدی** (Sliding Puzzle) با استفاده از HTML، CSS و JavaScript می‌باشد
