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

جزئیات محصول

دانلود پروژه **بازی Space Invaders** با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی Space Invaders** با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



در اینجا یک پروژه ساده برای ایجاد یک **بازی Space Invaders** با استفاده از HTML، CSS و JavaScript ارائه شده است. این بازی به کاربران اجازه می‌دهد تا موجودات فضایی را با استفاده از یک سفینه فضایی تیراندازی کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی Space Invaders ایجاد می‌کنیم.
 
```html
   
   
    بازی Space Invaders
   
   
       

بازی Space Invaders

       
           
           
امتیاز: 0
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی Space Invaders از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    text-align: center;
}
 
#gameArea {
    position: relative;
    width: 600px;
    height: 400px;
    border: 2px solid #fff;
    overflow: hidden;
    background-color: #222;
}
 
#player {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background-color: #0f0;
}
 
.alien {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: red;
}
 
.bullet {
    position: absolute;
    width: 5px;
    height: 20px;
    background-color: yellow;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم.
 
```javascript
const player = document.getElementById('player');
const gameArea = document.getElementById('gameArea');
const scoreDisplay = document.getElementById('score');
let score = 0;
let bullets = [];
let aliens = [];
let gameInterval;
let alienInterval;
 
// تابع برای ایجاد موجودات فضایی
function createAliens() {
    for (let i = 0; i < 5; i++) {
        const alien = document.createElement('div');
        alien.classList.add('alien');
        alien.style.top = `${Math.random() * 100}px`;
        alien.style.left = `${Math.random() * 100}%`;
        gameArea.appendChild(alien);
        aliens.push(alien);
    }
}
 
// تابع برای تیراندازی
function shoot() {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet');
    bullet.style.left = `${player.offsetLeft + 17}px`; // وسط سفینه
    bullet.style.bottom = '50px';
    gameArea.appendChild(bullet);
    bullets.push(bullet);
}
 
// تابع برای به روز رسانی مکان گلوله
function updateBullets() {
    bullets.forEach((bullet, index) => {
        bullet.style.bottom = `${bullet.offsetTop + 5}px`;
        // حذف گلوله‌ها که از بالای صفحه خارج می‌شوند
        if (bullet.offsetTop > gameArea.offsetHeight) {
            bullet.remove();
            bullets.splice(index, 1);
        } else {
            // بررسی برخورد با موجودات فضایی
            aliens.forEach((alien, alienIndex) => {
                if (
                    bullet.offsetLeft < alien.offsetLeft + 40 &&
                    bullet.offsetLeft + 5 > alien.offsetLeft &&
                    bullet.offsetTop < alien.offsetTop + 40 &&
                    bullet.offsetTop + 20 > alien.offsetTop
                ) {
                    alien.remove();
                    bullet.remove();
                    bullets.splice(index, 1);
                    aliens.splice(alienIndex, 1);
                    score++;
                    scoreDisplay.textContent = `امتیاز: ${score}`;
                }
            });
        }
    });
}
 
// تابع برای حرکت بازیکن
function movePlayer(e) {
    const gameAreaRect = gameArea.getBoundingClientRect();
    if (e.key === 'ArrowLeft' && player.offsetLeft > 0) {
        player.style.left = `${player.offsetLeft - 15}px`;
    } else if (e.key === 'ArrowRight' && player.offsetLeft < gameAreaRect.width - 40) {
        player.style.left = `${player.offsetLeft + 15}px`;
    } else if (e.key === ' ') {
        shoot();
    }
}
 
// تابع برای شروع بازی
function startGame() {
    createAliens();
    alienInterval = setInterval(() => {
        createAliens();
    }, 2000);
    gameInterval = setInterval(() => {
        updateBullets();
    }, 100);
}
 
// رویدادهای کلید
document.addEventListener('keydown', movePlayer);
startGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، ناحیه بازی و نمایش امتیاز است.
2. **CSS**: طراحی برای ناحیه بازی، بازیکن (سفینه فضایی) و موجودات فضایی.
3. **JavaScript**:
   - **ایجاد موجودات فضایی**: تابعی برای تولید موجودات فضایی در مکان‌های تصادفی.
   - **تیراندازی**: تابعی برای ایجاد گلوله‌ها و بررسی برخورد آن‌ها با موجودات فضایی.
   - **حرکت بازیکن**: تابعی برای حرکت سفینه فضایی به چپ و راست و تیراندازی.
   - **شروع بازی**: تابعی برای شروع بازی و ایجاد موجودات فضایی به صورت مداوم.
 
### نتیجه‌گیری
این پروژه **بازی Space Invaders** یک مثال عالی برای یادگیری نحوه کار با JavaScript، DOM و رویدادها است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزایش سطح سختی، ذخیره بالاترین امتیاز یا اضافه کردن صدا به بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی Space Invaders** با استفاده از HTML، CSS و JavaScript می‌باشد