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

جزئیات محصول

دانلود پروژه بازی دونده بی‌پایان (Endless Runner) است که با استفاده از JavaScript، HTML و CSS

دانلود پروژه بازی دونده بی‌پایان (Endless Runner) است که با استفاده از JavaScript، HTML و CSS

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

خرید فایل


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

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

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

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

"Muffle Runner" یک بازی دونده بی‌پایان (Endless Runner) است که با استفاده از JavaScript، HTML و CSS ساخته می‌شود. این نوع بازی‌ها از بازی‌های کلاسیک مانند "Temple Run" و "Subway Surfers" الهام گرفته‌اند، که در آن بازیکن باید برای مدت نامحدودی حرکت کند، از موانع بگذرد و امتیاز جمع‌آوری کند. در این بازی، بازیکن کنترل یک شخصیت یا شیء را در دست دارد که به طور مداوم به جلو حرکت می‌کند، و باید با کلیک‌ها یا دکمه‌های کیبورد از موانع اجتناب کند.
 
### ویژگی‌های اصلی بازی "Muffle Runner"
1. **حرکت مداوم**: شخصیت یا شیء بازی به طور مداوم در صفحه حرکت می‌کند.
2. **اجتناب از موانع**: بازیکن باید از موانع بپرد یا تغییر مسیر دهد.
3. **ثبت امتیاز**: امتیاز بازیکن براساس مدت زمان بقا و تعداد موانع عبور شده افزایش می‌یابد.
4. **گرافیک ساده و جذاب**: با استفاده از CSS و تصاویر ساده، یک محیط بازی ایجاد شده است.
 
### ساختار فایل‌های پروژه
برای ساخت این بازی، سه فایل اصلی نیاز داریم:
1. `index.html` - برای نمایش ساختار صفحه.
2. `style.css` - برای استایل‌دهی صفحه.
3. `script.js` - برای منطق و تعاملات بازی با استفاده از JavaScript.
 
### ۱. فایل HTML (`index.html`)
ابتدا فایل `index.html` را ایجاد کنید تا ساختار صفحه بازی را تعریف کند:
 
```html
   
   
    بازی Muffle Runner
   
   
       
       
   
   

امتیاز: 0

   
   
```
 
### ۲. فایل CSS (`style.css`)
یک فایل CSS برای طراحی صفحه و اجزای مختلف بازی ایجاد کنید:
 
```css
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f0f0f0;
}
 
#gameContainer {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 20px auto;
    background-color: #87CEEB;
    overflow: hidden;
    border: 2px solid #000;
}
 
#runner {
    position: absolute;
    bottom: 0;
    left: 50px;
    width: 50px;
    height: 50px;
    background-color: red;
}
 
#obstacle {
    position: absolute;
    bottom: 0;
    right: -50px;
    width: 50px;
    height: 50px;
    background-color: green;
}
 
button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
 
#score {
    font-size: 20px;
    margin: 10px;
}
```
 
### ۳. فایل JavaScript (`script.js`)
در این فایل، منطق بازی را پیاده‌سازی می‌کنیم:
 
```javascript
let runner = document.getElementById("runner");
let obstacle = document.getElementById("obstacle");
let scoreElement = document.getElementById("score");
let gameContainer = document.getElementById("gameContainer");
 
let isJumping = false;
let score = 0;
let gameInterval;
 
function startGame() {
    score = 0;
    scoreElement.textContent = "امتیاز: " + score;
 
    obstacle.style.right = '-50px';
    obstacle.style.animation = 'none';
    requestAnimationFrame(() => {
        obstacle.style.animation = 'obstacleMove 2s linear infinite';
    });
 
    gameInterval = setInterval(() => {
        const runnerBottom = parseInt(window.getComputedStyle(runner).bottom);
        const obstacleRight = parseInt(window.getComputedStyle(obstacle).right);
        const obstacleWidth = parseInt(window.getComputedStyle(obstacle).width);
        const runnerWidth = parseInt(window.getComputedStyle(runner).width);
 
        if (
            obstacleRight > gameContainer.offsetWidth - runnerWidth - 50 &&
            obstacleRight < gameContainer.offsetWidth &&
            runnerBottom <= 50
        ) {
            alert("بازی تمام شد! امتیاز شما: " + score);
            clearInterval(gameInterval);
            obstacle.style.animation = 'none';
        } else if (obstacleRight === 0) {
            score++;
            scoreElement.textContent = "امتیاز: " + score;
        }
    }, 20);
}
 
document.addEventListener('keydown', (event) => {
    if (event.code === 'Space' && !isJumping) {
        jump();
    }
});
 
function jump() {
    if (isJumping) return;
    isJumping = true;
    let upInterval = setInterval(() => {
        let runnerBottom = parseInt(window.getComputedStyle(runner).bottom);
        if (runnerBottom >= 150) {
            clearInterval(upInterval);
            let downInterval = setInterval(() => {
                runnerBottom = parseInt(window.getComputedStyle(runner).bottom);
                if (runnerBottom <= 0) {
                    clearInterval(downInterval);
                    isJumping = false;
                }
                runner.style.bottom = (runnerBottom - 5) + "px";
            }, 20);
        } else {
            runner.style.bottom = (runnerBottom + 5) + "px";
        }
    }, 20);
}
 
@keyframes obstacleMove {
    0% {
        right: -50px;
    }
    100% {
        right: 650px;
    }
}
```
 
### نحوه اجرای پروژه
1. سه فایل `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
3. دکمه "شروع بازی" را کلیک کنید و با استفاده از کلید Space بازیکن را از موانع عبور دهید.
 
### نتیجه‌گیری

 

این پروژه یک نمونه ساده از بازی "Muffle Runner" است که به شما کمک می‌کند تا با مفاهیم مهم JavaScript، از جمله انیمیشن‌ها، رویدادهای کاربری، و کنترل جریان برنامه آشنا شوید. همچنین می‌توانید این پروژه را گسترش دهید و ویژگی‌های جدیدی مانند موانع بیشتر، افزایش سرعت بازی یا گرافیک جذاب‌تر به آن اضافه کنید. این تمرین به بهبود مهارت‌های برنامه‌نویسی و آشنایی با طراحی بازی کمک می‌کند.
| صفحه قابل مشاهده: دانلود پروژه بازی دونده بی‌پایان (Endless Runner) است که با استفاده از JavaScript، HTML و CSS می‌باشد