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

جزئیات محصول

دانلود پروژه

دانلود پروژه "بازی شلیک ایموجی" با استفاده از JavaScript

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

خرید فایل


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

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

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

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


 ### پروژه "بازی شلیک ایموجی" با استفاده از JavaScript
 
بازی شلیک ایموجی یک بازی ساده و سرگرم‌کننده است که در آن کاربر باید ایموجی‌ها را با استفاده از تیرک‌ها شلیک کند. این بازی با استفاده از HTML، CSS و JavaScript ساخته شده است و می‌تواند به راحتی در مرورگر اجرا شود.
 
#### ویژگی‌های پروژه:
- **گرافیک ساده:** طراحی ساده برای نمایش شخصیت و ایموجی‌ها.
- **کنترل آسان:** کاربر با استفاده از کلیدها می‌تواند تیرک‌ها را شلیک کند.
- **امتیازدهی:** کاربران می‌توانند امتیاز جمع‌آوری کنند.
- **جذاب و سرگرم‌کننده:** طراحی جذاب و کاربرپسند.
 
### راه‌اندازی پروژه
 
#### 1. ساختار فایل‌ها
 
ساختار پروژه به صورت زیر است:
 
```
emoji-shooter-game/
├── index.html
├── styles.css
└── game.js
```
 
#### 2. کد منبع
 
##### فایل `index.html`
 
این فایل رابط کاربری بازی را ایجاد می‌کند:
 
```html
   
   
    بازی شلیک ایموجی
   
   
       

بازی شلیک ایموجی

       
       
امتیاز: 0
   
   
```
 
##### فایل `styles.css`
 
برای زیباسازی رابط کاربری استفاده می‌شود:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #87CEEB; /* آبی آسمانی */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.game-container {
    position: relative;
    width: 400px;
    height: 600px;
    border: 2px solid #333;
    overflow: hidden;
    background-color: #f9f9f9;
}
 
h1 {
    text-align: center;
}
 
#shooter {
    position: absolute;
    bottom: 20px;
    left: 175px; /* مرکز بازی */
    width: 50px;
    height: 50px;
    background-color: #ffcc00; /* زرد */
}
 
.bullet {
    position: absolute;
    width: 5px;
    height: 20px;
    background-color: #ff5733; /* قرمز */
}
 
.emoji {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 40px; /* اندازه ایموجی */
    pointer-events: none; /* غیرفعال کردن تعامل */
}
```
 
##### فایل `game.js`
 
این فایل منطق بازی را پیاده‌سازی می‌کند:
 
```javascript
const shooter = document.getElementById('shooter');
const scoreElement = document.getElementById('score');
let score = 0;
let bullets = [];
 
// ایجاد ایموجی
function createEmoji() {
    const emoji = document.createElement('div');
    emoji.classList.add('emoji');
    emoji.innerText = '😊'; // ایموجی
    emoji.style.left = Math.random() * (400 - 40) + 'px'; // موقعیت تصادفی
    emoji.style.top = '0px'; // شروع از بالا
    document.body.appendChild(emoji);
    moveEmoji(emoji);
}
 
// حرکت ایموجی
function moveEmoji(emoji) {
    let position = 0;
    const interval = setInterval(() => {
        position += 2; // سرعت حرکت ایموجی
        emoji.style.top = position + 'px';
 
        // چک کردن برخورد با پایین صفحه
        if (position > 600) {
            clearInterval(interval);
            emoji.remove();
        }
    }, 20);
}
 
// شلیک گلوله
function shootBullet() {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet');
    bullet.style.left = shooter.offsetLeft + 22.5 + 'px'; // مرکز تیرک
    bullet.style.bottom = '70px'; // موقعیت اولیه گلوله
    document.body.appendChild(bullet);
    moveBullet(bullet);
}
 
// حرکت گلوله
function moveBullet(bullet) {
    let position = 70;
    const interval = setInterval(() => {
        position -= 5; // سرعت حرکت گلوله
        bullet.style.bottom = position + 'px';
 
        // چک کردن برخورد با ایموجی
        const emojis = document.querySelectorAll('.emoji');
        emojis.forEach(emoji => {
            const emojiRect = emoji.getBoundingClientRect();
            const bulletRect = bullet.getBoundingClientRect();
 
            // چک کردن برخورد
            if (
                bulletRect.x < emojiRect.x + emojiRect.width &&
                bulletRect.x + bulletRect.width > emojiRect.x &&
                bulletRect.y < emojiRect.y + emojiRect.height &&
                bulletRect.y + bulletRect.height > emojiRect.y
            ) {
                score++;
                scoreElement.innerText = 'امتیاز: ' + score;
                emoji.remove();
                bullet.remove();
                clearInterval(interval);
            }
        });
 
        // چک کردن برخورد با پایین صفحه
        if (position < 0) {
            clearInterval(interval);
            bullet.remove();
        }
    }, 20);
}
 
// کنترل تیرک با کیبورد
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
        shootBullet();
    }
});
 
// ایجاد ایموجی‌ها به صورت مداوم
setInterval(() => {
    createEmoji();
}, 2000); // هر 2 ثانیه یک ایموجی جدید
 
```
 
### 3. اجرای پروژه
 
برای اجرای پروژه، فقط کافی است فایل `index.html` را در مرورگر خود باز کنید. می‌توانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.
 
### نتیجه‌گیری
 
این پروژه "بازی شلیک ایموجی" به شما این امکان را می‌دهد که با اصول ساخت یک بازی ساده تحت وب با استفاده از HTML، CSS و JavaScript آشنا شوید. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزایش سرعت ایموجی‌ها، سطوح مختلف، یا صدای شلیک اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه بازی‌های تحت وب است.
| صفحه قابل مشاهده: دانلود پروژه "بازی شلیک ایموجی" با استفاده از JavaScript می‌باشد