مقدمه
بازی تصویر پازل یکی از سرگرمی‌های کلاسیک و محبوب است. این بازی شامل تکه‌های تصویری است که باید به درستی در کنار هم قرار گیرند تا تصویر کامل شود. ایجاد این بازی با استفاده از HTML، CSS و JavaScript نه تنها سرگرم‌کننده است، بلکه فرصتی عالی برای یادگیری این تکنولوژی‌ها فراهم می‌کند.
ساختار HTML
ابتدا باید ساختار HTML را ایجاد کنیم. یک بخش برای نمایش تصویر و تکه‌های آن و یک قسمت برای شناسایی تکه‌ها ضروری است.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="puzzle-container"></div>
<button id="shuffle">اختلال</button>
<script src="script.js"></script>
</body>
</html>
```
استایل CSS
اکنون نوبت به طراحی ظاهری بازی می‌رسد. می‌توانیم از CSS برای طراحی زیبا و جذاب استفاده کنیم.
```css
#puzzle-container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.puzzle-piece {
width: 100px;
height: 100px;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
}
```
کد JavaScript
حالا وقت آن است که منطق بازی را با JavaScript پیاده‌سازی کنیم. این بخش شامل ایجاد تکه‌ها، اختلال و قابلیت جابه‌جایی است.
```javascript
const puzzleContainer = document.getElementById('puzzle-container');
const shuffleButton = document.getElementById('shuffle');
const pieces = [];
function createPuzzle() {
for (let i = 0; i < 9; i++) {
const piece = document.createElement('div');
piece.classList.add('puzzle-piece');
piece.textContent = i + 1;
piece.style.order = i; // تنظیم ترتیب اولیه
pieces.push(piece);
puzzleContainer.appendChild(piece);
}
}
function shufflePuzzle() {
pieces.sort(() => Math.random() -
- 5);
pieces.forEach(piece => {
puzzleContainer.appendChild(piece); // افزودن دوباره تکه‌ها
});
}
shuffleButton.addEventListener('click', shufflePuzzle);
createPuzzle();
```
نتیجه‌گیری
با ترکیب HTML، CSS و JavaScript، بازی تصویر پازل به سادگی قابل پیاده‌سازی است. این پروژه به شما کمک می‌کند تا مهارت‌های خود را در این زمینه تقویت کنید. با افزودن ویژگی‌های اضافی مانند زمان‌سنج یا امتیاز، می‌توانید بازی را جذاب‌تر کنید. از ایجاد و بازی کردن لذت ببرید!
