کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی پازل ساده با استفاده از ReactJS یک پروژه سرگرم‌کننده و آموزشی است که می‌تواند به شما در درک بهتر مفاهیم React و مدیریت وضعیت کمک کند. در این پروژه، کاربر باید تکه‌های پازل را به مکان‌های صحیح خود جابجا کند. در ادامه، نحوه ساخت این بازی و کد منبع آن ارائه شده است.
### توضیحات پروژه:
بازی پازل شامل یک تصویر تقسیم شده به تکه‌های کوچکتر است. کاربر با کلیک روی تکه‌های مجاور به تکه خالی، می‌تواند آنها را جابجا کند. هدف بازی این است که تصویر اصلی به درستی بازسازی شود.
### ویژگی‌های اصلی پروژه:
1. **تصویر قابل تقسیم**: تصویر به تکه‌های کوچک تقسیم می‌شود.
2. **حرکت تکه‌ها**: کاربر می‌تواند تکه‌ها را جابجا کند.
3. **بررسی وضعیت پایان**: بررسی اینکه آیا تصویر به درستی بازسازی شده است یا خیر.
4. **ریست بازی**: امکان شروع دوباره بازی.
### کد منبع نمونه:
#### ۱. ایجاد پروژه React
ابتدا یک پروژه جدید React با استفاده از Create React App بسازید:
```bash
npx create-react-app simple-puzzle-game
cd simple-puzzle-game
```
#### ۲. کد `App.js`
فایل `App.js` را با کد زیر جایگزین کنید:
```javascript
import React, { useState } from 'react';
import './App.css';
// تصویر پازل (تصویر مورد نظر را در اینجا قرار دهید)
const imageUrl = 'https://via.placeholder.com/400'; // میتوانید آدرس تصویر دلخواه را جایگزین کنید
const rows = 4;
const cols = 4;
const App = () => {
const [tiles, setTiles] = useState(createTiles());
const [emptyTileIndex, setEmptyTileIndex] = useState(tiles.length - 1);
function createTiles() {
const tiles = Array.from({ length: rows * cols }, (_, index) => {
return index < rows * cols - 1 ? index + 1 : null; // آخرین تکه خالی
});
return shuffle(tiles);
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function handleTileClick(index) {
const isAdjacent =
index === emptyTileIndex - 1 || // چپ
index === emptyTileIndex + 1 || // راست
index === emptyTileIndex - cols || // بالا
index === emptyTileIndex + cols; // پایین
if (isAdjacent) {
const newTiles = [...tiles];
[newTiles[index], newTiles[emptyTileIndex]] = [newTiles[emptyTileIndex], newTiles[index]];
setTiles(newTiles);
setEmptyTileIndex(index);
}
if (isSolved(newTiles)) {
setTimeout(() => alert('تبریک! پازل حل شد!'), 100);
}
}
function isSolved(tiles) {
for (let i = 0; i < tiles.length - 1; i++) {
if (tiles[i] !== i + 1) return false;
}
return true;
}
function resetGame() {
const newTiles = createTiles();
setTiles(newTiles);
setEmptyTileIndex(newTiles.length - 1);
}
return (
بازی پازل ساده
{tiles.map((tile, index) => (
key={index}
className={`tile ${tile === null ? 'empty' : ''}`}
onClick={() => tile !== null && handleTileClick(index)}
style={{
backgroundImage: tile !== null ? `url(${imageUrl})` : 'none',
backgroundPosition: tile !== null ? `-${(tile % cols) * 100}px -${Math.floor(tile / cols) * 100}px` : 'none',
}}
>
{tile}
))}
);
};
export default App;
```
#### ۳. کد `App.css`
فایل `App.css` را برای استایل بازی به صورت زیر تنظیم کنید:
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.puzzle-game {
text-align: center;
}
.board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 5px;
margin: 20px auto;
}
.tile {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
border: 2px solid #999;
background-color: #3498db;
background-size: 400px 400px; /* سایز تصویر پازل */
cursor: pointer;
}
.empty {
background-color: transparent;
cursor: default;
}
button {
padding: 10px 20px;
font-size: 1rem;
margin-bottom: 20px;
}
```
### نحوه اجرای پروژه:
1. به دایرکتوری پروژه بروید:
```bash
cd simple-puzzle-game
```
2. برنامه را با دستور زیر اجرا کنید:
```bash
npm start
```
### نتیجه‌گیری:
این پروژه یک بازی پازل ساده است که به شما کمک می‌کند تا با مفاهیم پایه‌ای React، مدیریت وضعیت و روش‌های برنامه‌نویسی بازی آشنا شوید. شما میتوانید با اضافه کردن ویژگی‌های جدید مانند زمان‌سنج یا امتیازدهی، این بازی را گسترش دهید. همچنین میتوانید تصویر پازل را با تصویر دلخواه خود تغییر دهید تا تجربه بازی متفاوت‌تری داشته باشید.
| صفحه قابل مشاهده:
دانلود پروژه بازی پازل ساده با استفاده از ReactJS می‌باشد
