مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه بازی

دانلود پروژه بازی "Kill The Ghost" با استفاده از HTML، CSS و JavaScript

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد


 در اینجا یک پروژه ساده برای ایجاد بازی "Kill The Ghost" با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، کاربر باید روی ارواحی که به صورت تصادفی در صفحه ظاهر می‌شوند، کلیک کند تا آن‌ها را از بین ببرد.
 
### 1. **HTML**
ابتدا کد HTML را ایجاد می‌کنیم که شامل یک بوم (canvas) برای نمایش ارواح و امتیاز بازی است.
 
```html
   
   
    بازی نابود کردن ارواح
   
   
       

بازی نابود کردن ارواح

       

امتیاز: 0

       
   
   
```
 
### 2. **CSS**
سپس از CSS برای زیبا کردن صفحه و تنظیم ظاهر بازی استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
    color: #fff;
}
 
.container {
    text-align: center;
}
 
canvas {
    background-color: #333;
    border: 2px solid #fff;
    cursor: crosshair;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. در این کد ارواح به‌طور تصادفی ظاهر می‌شوند و کاربر باید با کلیک روی آن‌ها امتیاز کسب کند.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
 
let score = 0;
let ghostX, ghostY;
const ghostSize = 50;
let gameInterval;
 
// تابع برای ایجاد موقعیت تصادفی برای روح
function spawnGhost() {
    ghostX = Math.random() * (canvas.width - ghostSize);
    ghostY = Math.random() * (canvas.height - ghostSize);
    drawGhost();
}
 
// رسم روح روی بوم
function drawGhost() {
    // پاک کردن بوم
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // رسم روح (به عنوان یک دایره ساده)
    ctx.beginPath();
    ctx.arc(ghostX + ghostSize / 2, ghostY + ghostSize / 2, ghostSize / 2, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; // رنگ سفید با کمی شفافیت
    ctx.fill();
    ctx.closePath();
}
 
// بررسی کلیک کاربر
canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;
 
    // بررسی اینکه آیا روی روح کلیک شده است یا نه
    if (mouseX >= ghostX && mouseX <= ghostX + ghostSize &&
        mouseY >= ghostY && mouseY <= ghostY + ghostSize) {
        score++;
        scoreDisplay.textContent = score;
        spawnGhost(); // ایجاد روح جدید پس از نابودی
    }
});
 
// تابع شروع بازی
function startGame() {
    score = 0;
    scoreDisplay.textContent = score;
    spawnGhost();
    if (gameInterval) {
        clearInterval(gameInterval);
    }
    gameInterval = setInterval(spawnGhost, 2000); // هر 2 ثانیه یک روح جدید ایجاد می‌شود
}
 
// شروع بازی
startGame();
```
 
### توضیحات کد:
1. **HTML**: صفحه شامل یک بوم برای نمایش بازی و یک بخش برای نمایش امتیاز است.
2. **CSS**: صفحه با پس‌زمینه تیره و رنگ‌های ساده طراحی شده است تا بازی در مرکز توجه باشد.
3. **JavaScript**:
   - **تابع `spawnGhost`**: یک موقعیت تصادفی برای روح ایجاد می‌کند و آن را روی بوم رسم می‌کند.
   - **تابع `drawGhost`**: برای رسم روح به‌عنوان یک دایره سفید روی بوم استفاده می‌شود.
   - **رویداد `click`**: وقتی کاربر روی بوم کلیک می‌کند، بررسی می‌شود که آیا کلیک در موقعیت روح بوده یا نه. اگر کاربر روی روح کلیک کند، امتیاز افزایش می‌یابد و روح جدیدی ایجاد می‌شود.
   - **تابع `startGame`**: بازی را آغاز کرده و هر 2 ثانیه یک روح جدید ظاهر می‌شود.
 
### نتیجه‌گیری
این بازی ساده می‌تواند برای تمرینات کدنویسی جاوا اسکریپت سرگرم‌کننده و آموزشی باشد. می‌توانید ویژگی‌های بیشتری مانند افزایش سرعت ظاهر شدن ارواح، اضافه کردن جلوه‌های صوتی یا حتی اضافه کردن سطوح سختی به بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی "Kill The Ghost" با استفاده از HTML، CSS و JavaScript می‌باشد