مقدمه
بازی تصویر پازل یکی از سرگرمی‌های کلاسیک و محبوب است. این بازی شامل تکه‌های تصویری است که باید به درستی در کنار هم قرار گیرند تا تصویر کامل شود. ایجاد این بازی با استفاده از 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، بازی تصویر پازل به سادگی قابل پیاده‌سازی است. این پروژه به شما کمک می‌کند تا مهارت‌های خود را در این زمینه تقویت کنید. با افزودن ویژگی‌های اضافی مانند زمان‌سنج یا امتیاز، می‌توانید بازی را جذاب‌تر کنید. از ایجاد و بازی کردن لذت ببرید!
بازی تصویر پازل در HTML، JS و CSS
بازی تصویر پازل یکی از سرگرم‌کننده‌ترین بازی‌ها است که می‌تواند به راحتی با استفاده از 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">اختلال در تکه‌ها</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: 2px;
}
.puzzle-piece {
background-image: url('your-image.jpg');
background-size: 300px 300px; /* اندازه تصویر اصلی */
width: 100px;
height: 100px;
cursor: pointer;
}
```
منطق JavaScript
در نهایت، منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این شامل تقسیم تصویر، جابجایی تکه‌ها و بررسی برنده شدن است.
```javascript
const container = document.getElementById("puzzle-container");
const shuffleButton = document.getElementById("shuffle-button");
let pieces = [];
function createPuzzle() {
for (let i = 0; i < 9; i++) {
const piece = document.createElement("div");
piece.classList.add("puzzle-piece");
piece.style.backgroundPosition = `${-(i % 3) * 100}px ${-(Math.floor(i / 3) * 100)}px`;
piece.dataset.index = i;
piece.addEventListener("click", movePiece);
pieces.push(piece);
container.appendChild(piece);
}
}
function movePiece(event) {
const index = event.target.dataset.index;
// منطق جابجایی تکه‌ها
}
shuffleButton.addEventListener("click", () => {
// منطق اختلال در تکه‌ها
});
createPuzzle();
```
نتیجه‌گیری
بازی تصویر پازل یک پروژه جالب و آموزشی برای یادگیری HTML، CSS و JavaScript است. با دنبال کردن مراحل بالا، می‌توانید یک بازی پازل تعاملی بسازید که هم سرگرم‌کننده و هم چالش‌برانگیز است. همچنین می‌توانید با اضافه کردن ویژگی‌های بیشتر، مانند زمان‌بندی یا امتیازدهی، بازی را جذاب‌تر کنید.
