کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
بازی "گنج" (Treasure Game) در JavaScript یک پروژه سرگرم‌کننده و جالب است که می‌تواند مفاهیم پایه‌ای برنامه‌نویسی مانند ایجاد رویدادهای کاربر، کار با عناصر DOM، و استفاده از ریاضیات برای بازی‌سازی را به شما آموزش دهد. این بازی شامل تلاش برای یافتن گنج مخفی در یک صفحه است که به صورت تصادفی قرار گرفته است.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `treasure-game` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
بازی گنج
بازی یافتن گنج 🏴☠️
روی نقشه کلیک کنید تا گنج را پیدا کنید!
```
#### ۳. ایجاد فایل CSS
**styles.css**:
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
text-align: center;
}
.container {
max-width: 600px;
margin: auto;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
#map {
width: 500px;
height: 500px;
background-image: url('https://example.com/treasure-map.jpg');
background-size: cover;
margin: 20px auto;
position: relative;
cursor: crosshair;
border: 2px solid #ccc;
}
#message {
font-size: 20px;
margin-top: 10px;
font-weight: bold;
}
```
#### ۴. پیاده‌سازی منطق بازی در JavaScript
**script.js**:
```javascript
// تعریف متغیرها
const map = document.getElementById('map');
const message = document.getElementById('message');
let clickCount = 0;
// تعیین محل تصادفی گنج
const treasure = {
x: Math.floor(Math.random() * map.offsetWidth),
y: Math.floor(Math.random() * map.offsetHeight)
};
// محاسبه فاصله بین کلیک و گنج
function getDistance(event, target) {
const diffX = event.offsetX - target.x;
const diffY = event.offsetY - target.y;
return Math.sqrt(diffX * diffX + diffY * diffY);
}
// دادن راهنمایی بر اساس فاصله
function getHint(distance) {
if (distance < 20) return "شما روی گنج هستید!";
if (distance < 50) return "خیلی نزدیک!";
if (distance < 100) return "نزدیک می‌شوید...";
if (distance < 200) return "گرم‌تر می‌شوید...";
if (distance < 300) return "هنوز دورید...";
return "خیلی دور هستید...";
}
// مدیریت کلیک روی نقشه
map.addEventListener('click', (event) => {
clickCount++;
const distance = getDistance(event, treasure);
const hint = getHint(distance);
message.textContent = `کلیک‌ها: ${clickCount} - ${hint}`;
// بررسی یافتن گنج
if (distance < 20) {
alert(`تبریک! شما گنج را پس از ${clickCount} کلیک پیدا کردید!`);
location.reload(); // بازی را ریست می‌کند.
}
});
```
### توضیحات کد
1. **HTML**:
- شامل یک عنصر `
` به نام **`#map`** که نقشه بازی است. بازیکن باید روی آن کلیک کند تا گنج مخفی را پیدا کند.
- پیام‌های راهنما و تعداد کلیک‌ها در **`#message`** نمایش داده می‌شوند.
2. **CSS**:
- طراحی ساده برای نقشه و افزودن استایل‌هایی که حس بازی مانند نقشه گنج را تداعی می‌کند.
- نقشه با استفاده از یک تصویر نمایشی که از طریق **`background-image`** اعمال می‌شود.
3. **JavaScript**:
- **تعریف گنج تصادفی**: مختصات گنج به صورت تصادفی بر اساس اندازه نقشه تعیین می‌شود.
- **محاسبه فاصله**: تابع **`getDistance`** برای محاسبه فاصله بین نقطه‌ای که بازیکن کلیک کرده و مختصات گنج.
- **راهنمایی‌ها**: تابع **`getHint`** راهنمایی‌هایی بر اساس فاصله محاسبه‌شده ارائه می‌دهد، تا بازیکن به گنج نزدیک‌تر شود.
- **مدیریت کلیک روی نقشه**: رویداد کلیک روی نقشه به تعداد کلیک‌ها اضافه کرده و راهنمایی‌های مناسب را نمایش می‌دهد و در صورت نزدیک بودن بیش از حد به گنج، پیام پیروزی نمایش داده می‌شود.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. روی نقشه کلیک کنید و با توجه به راهنمایی‌ها گنج را پیدا کنید. هر بار که کلیک می‌کنید، تعداد کلیک‌ها و راهنمایی جدیدی در مورد فاصله تا گنج نشان داده می‌شود.
3. وقتی گنج را پیدا کردید، بازی پیامی نشان می‌دهد و سپس صفحه را برای شروع دوباره بازی ریست می‌کند.
### نتیجه‌گیری
این بازی ساده به شما کمک می‌کند تا مفاهیم کار با DOM، رویدادهای کاربر، و استفاده از ریاضیات برای محاسبه فاصله‌ها را درک کنید. همچنین این بازی قابلیت توسعه دارد و میتوانید قابلیت‌های جدیدی مانند تایمر یا سطوح مختلف بازی اضافه کنید تا چالش و هیجان آن بیشتر شود.
| صفحه قابل مشاهده:
دانلود پروژه بازی "گنج" (Treasure Game) در JavaScript می‌باشد
