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

جزئیات محصول

دانلود پروژه

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

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

خرید فایل


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

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

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

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


 ### پروژه "بازی ساده سوپرمن" با استفاده از JavaScript
 
بازی سوپرمن یک بازی ساده است که در آن کاربر کنترل شخصیت سوپرمن را بر عهده دارد و باید از موانع عبور کند. این بازی با استفاده از HTML، CSS و JavaScript ساخته شده است و می‌تواند به راحتی در مرورگر اجرا شود.
 
#### ویژگی‌های پروژه:
- **گرافیک ساده:** طراحی ساده برای نمایش شخصیت و موانع.
- **حرکت و پرش:** امکان حرکت و پرش شخصیت.
- **امتیازدهی:** کاربران می‌توانند امتیاز جمع‌آوری کنند.
- **ساده و سرگرم‌کننده:** طراحی جذاب و کاربرپسند.
 
### راه‌اندازی پروژه
 
#### 1. ساختار فایل‌ها
 
ساختار پروژه به صورت زیر است:
 
```
simple-superman-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;
}
 
.superman {
    position: absolute;
    bottom: 20px;
    left: 50px;
    width: 50px;
    height: 50px;
    background-image: url('https://upload.wikimedia.org/wikipedia/en/3/3f/Superman_logo.svg');
    background-size: cover;
}
 
.obstacle {
    position: absolute;
    bottom: 20px;
    right: -50px;
    width: 50px;
    height: 50px;
    background-color: #ff0000; /* قرمز */
    animation: move 2s linear infinite;
}
 
@keyframes move {
    0% { right: -50px; }
    100% { right: 400px; }
}
 
.score {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 20px;
}
```
 
##### فایل `game.js`
 
این فایل منطق بازی را پیاده‌سازی می‌کند:
 
```javascript
const superman = document.getElementById('superman');
const obstacle = document.getElementById('obstacle');
const scoreElement = document.getElementById('score');
let score = 0;
let isJumping = false;
 
// پرش سوپرمن
function jump() {
    if (isJumping) return;
    isJumping = true;
    let jumpHeight = 0;
 
    const jumpInterval = setInterval(() => {
        if (jumpHeight < 150) {
            jumpHeight += 5;
            superman.style.bottom = `${20 + jumpHeight}px`;
        } else {
            clearInterval(jumpInterval);
            const fallInterval = setInterval(() => {
                if (jumpHeight > 0) {
                    jumpHeight -= 5;
                    superman.style.bottom = `${20 + jumpHeight}px`;
                } else {
                    clearInterval(fallInterval);
                    isJumping = false;
                }
            }, 20);
        }
    }, 20);
}
 
// چک کردن برخورد سوپرمن با مانع
function checkCollision() {
    const supermanRect = superman.getBoundingClientRect();
    const obstacleRect = obstacle.getBoundingClientRect();
 
    if (
        supermanRect.x < obstacleRect.x + obstacleRect.width &&
        supermanRect.x + supermanRect.width > obstacleRect.x &&
        supermanRect.y < obstacleRect.y + obstacleRect.height &&
        supermanRect.y + supermanRect.height > obstacleRect.y
    ) {
        alert("شما باختید! امتیاز نهایی: " + score);
        clearInterval(obstacleMovement);
        resetGame();
    }
}
 
// تنظیمات بازی
function resetGame() {
    score = 0;
    scoreElement.innerText = score;
    obstacle.style.right = '-50px'; // موقعیت مانع را ریست کنید
    obstacle.style.animation = 'none'; // انیمیشن را متوقف کنید
    setTimeout(() => {
        obstacle.style.animation = '';
        startGame();
    }, 100); // برای ایجاد تاخیر قبل از شروع دوباره
}
 
// شروع بازی
function startGame() {
    scoreElement.innerText = score;
    obstacle.style.animation = 'move 2s linear infinite';
    setInterval(() => {
        score++;
        scoreElement.innerText = score;
        checkCollision();
    }, 100);
}
 
// شروع بازی با فشار دادن کلید Space
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
        jump();
    }
});
 
startGame();
```
 
### 3. اجرای پروژه
 
برای اجرای پروژه، فقط کافی است فایل `index.html` را در مرورگر خود باز کنید. می‌توانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.
 
### نتیجه‌گیری
 
این پروژه "بازی ساده سوپرمن" به شما این امکان را می‌دهد که با اصول ساخت یک بازی ساده تحت وب با استفاده از HTML، CSS و JavaScript آشنا شوید. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند سطوح مختلف، افزایش دشواری، یا شخصیت‌های دیگر اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه بازی‌های تحت وب است.
| صفحه قابل مشاهده: دانلود پروژه "بازی ساده سوپرمن" با استفاده از JavaScript می‌باشد