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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



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

بازی Squareshooter

       
           
           
       
       
امتیاز: 0
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی Squareshooter از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
#gameArea {
    position: relative;
    width: 400px;
    height: 400px;
    border: 2px solid #333;
    overflow: hidden;
    margin: 0 auto;
}
 
#player {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #007bff;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
 
#target {
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: red;
}
 
#score {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل کنترل حرکت بازیکن، شلیک و بررسی برخورد است.
 
```javascript
const player = document.getElementById('player');
const target = document.getElementById('target');
const scoreDiv = document.getElementById('score');
const gameArea = document.getElementById('gameArea');
 
let score = 0;
let targetX, targetY;
 
// تابع برای قرار دادن هدف در مکان تصادفی
function placeTarget() {
    targetX = Math.floor(Math.random() * (gameArea.clientWidth - 30));
    targetY = Math.floor(Math.random() * (gameArea.clientHeight - 30));
    target.style.left = targetX + 'px';
    target.style.top = targetY + 'px';
}
 
// تابع برای حرکت بازیکن
function movePlayer(event) {
    const key = event.key;
    const playerRect = player.getBoundingClientRect();
 
    if (key === 'ArrowLeft' && playerRect.left > gameArea.getBoundingClientRect().left) {
        player.style.left = player.offsetLeft - 10 + 'px';
    } else if (key === 'ArrowRight' && playerRect.right < gameArea.getBoundingClientRect().right) {
        player.style.left = player.offsetLeft + 10 + 'px';
    } else if (key === ' ') { // شلیک
        shoot();
    }
}
 
// تابع برای شلیک و بررسی برخورد
function shoot() {
    const bullet = document.createElement('div');
    bullet.classList.add('bullet');
    bullet.style.position = 'absolute';
    bullet.style.width = '5px';
    bullet.style.height = '10px';
    bullet.style.backgroundColor = 'black';
    bullet.style.left = player.offsetLeft + 12.5 + 'px'; // وسط بازیکن
    bullet.style.bottom = '40px'; // بالای بازیکن
    gameArea.appendChild(bullet);
 
    const shootInterval = setInterval(() => {
        const bulletY = bullet.offsetTop;
        if (bulletY <= 0) {
            clearInterval(shootInterval);
            bullet.remove();
        } else {
            bullet.style.top = bulletY - 5 + 'px';
        }
 
        // بررسی برخورد
        if (bullet.getBoundingClientRect().intersects(target.getBoundingClientRect())) {
            clearInterval(shootInterval);
            bullet.remove();
            score++;
            scoreDiv.textContent = `امتیاز: ${score}`;
            placeTarget(); // هدف جدید
        }
    }, 20);
}
 
// افزودن رویدادهای کلید
window.addEventListener('keydown', movePlayer);
placeTarget(); // قرار دادن هدف اولیه
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، منطقه بازی و نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری جذاب و کاربرپسند.
3. **JavaScript**:
   - **قرار دادن هدف**: تابع `placeTarget` هدف را در یک مکان تصادفی در ناحیه بازی قرار می‌دهد.
   - **حرکت بازیکن**: تابع `movePlayer` به بازیکن اجازه می‌دهد با استفاده از کلیدهای چپ و راست حرکت کند و با کلید Space شلیک کند.
   - **شلیک و بررسی برخورد**: تابع `shoot` یک گلوله ایجاد می‌کند و آن را به سمت بالا شلیک می‌کند. اگر گلوله با هدف برخورد کند، امتیاز بازیکن افزایش می‌یابد و هدف جدیدی قرار می‌گیرد.
 
### نتیجه‌گیری
این پروژه **بازی Squareshooter** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM، مدیریت رویدادها و انیمیشن‌ها است. شما می‌توانید این بازی را گسترش دهید و ویژگی‌های بیشتری مانند افزودن سطح‌ها، زمان محدود برای شلیک یا نقاط منفی برای برخورد به هدف‌های اشتباه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه ساده برای ایجاد یک بازی **Squareshooter** با استفاده از HTML، CSS و JavaScript می‌باشد