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

جزئیات محصول

دانلود پروژه **Speed Rocket Game** با استفاده از HTML، CSS، و JavaScript

دانلود پروژه **Speed Rocket Game** با استفاده از HTML، CSS، و JavaScript

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

خرید فایل


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

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

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

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



در اینجا پروژه‌ای ساده به نام **Speed Rocket Game** با استفاده از HTML، CSS، و JavaScript ارائه شده است. این بازی شبیه به بازی‌های کلاسیک است که در آن باید یک راکت را کنترل کنید و از موانع دوری کنید تا امتیاز کسب کنید. این پروژه برای مبتدیانی که به دنبال یادگیری JavaScript و ایجاد بازی‌های کوچک هستند، بسیار مناسب است.
 
### 1. **HTML**
ساختار HTML برای بازی Speed Rocket شامل بوم (canvas) برای ترسیم بازی و عناصر لازم برای نمایش امتیاز و وضعیت بازی است.
 
```html
   
   
    بازی راکت سرعت
   
   
       
       

امتیاز: 0

   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم تا همه‌چیز زیبا و مرتب به‌نظر برسد.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
}
 
.game-container {
    text-align: center;
}
 
canvas {
    border: 2px solid #fff;
    background-color: #111;
}
 
h2 {
    color: #fff;
}
```
 
### 3. **JavaScript**
در ادامه، منطق بازی را با استفاده از JavaScript پیاده‌سازی می‌کنیم که شامل کنترل حرکت راکت و ایجاد موانع است.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
 
let rocket = {
    x: canvas.width / 2 - 15,
    y: canvas.height - 60,
    width: 30,
    height: 60,
    speed: 5,
    movingLeft: false,
    movingRight: false
};
 
let obstacles = [];
let score = 0;
let gameOver = false;
 
// ایجاد موانع
function createObstacle() {
    const width = Math.random() * (canvas.width - 100) + 50;
    const x = Math.random() * (canvas.width - width);
    obstacles.push({
        x: x,
        y: -20,
        width: width,
        height: 20,
        speed: 3
    });
}
 
// حرکت راکت
function moveRocket() {
    if (rocket.movingLeft && rocket.x > 0) {
        rocket.x -= rocket.speed;
    }
    if (rocket.movingRight && rocket.x + rocket.width < canvas.width) {
        rocket.x += rocket.speed;
    }
}
 
// رسم راکت
function drawRocket() {
    ctx.fillStyle = 'red';
    ctx.fillRect(rocket.x, rocket.y, rocket.width, rocket.height);
}
 
// رسم موانع
function drawObstacles() {
    ctx.fillStyle = 'yellow';
    obstacles.forEach(obstacle => {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        obstacle.y += obstacle.speed;
    });
}
 
// برخورد
function checkCollision() {
    obstacles.forEach(obstacle => {
        if (
            rocket.x < obstacle.x + obstacle.width &&
            rocket.x + rocket.width > obstacle.x &&
            rocket.y < obstacle.y + obstacle.height &&
            rocket.y + rocket.height > obstacle.y
        ) {
            gameOver = true;
        }
    });
}
 
// به‌روزرسانی امتیاز
function updateScore() {
    score++;
    document.getElementById('score').textContent = score;
}
 
// حلقه بازی
function gameLoop() {
    if (gameOver) {
        alert('بازی تمام شد! امتیاز شما: ' + score);
        document.location.reload();
        return;
    }
 
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    moveRocket();
    drawRocket();
 
    drawObstacles();
    checkCollision();
 
    if (Math.random() < 0.02) {
        createObstacle();
    }
 
    updateScore();
 
    requestAnimationFrame(gameLoop);
}
 
// کنترل‌های صفحه‌کلید
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') {
        rocket.movingLeft = true;
    } else if (e.key === 'ArrowRight') {
        rocket.movingRight = true;
    }
});
 
document.addEventListener('keyup', (e) => {
    if (e.key === 'ArrowLeft') {
        rocket.movingLeft = false;
    } else if (e.key === 'ArrowRight') {
        rocket.movingRight = false;
    }
});
 
// شروع بازی
gameLoop();
```
 
### توضیحات کد:
1. **HTML**: 
   - `canvas` برای رسم بازی استفاده می‌شود.
   - امتیاز بازی در `

` نمایش داده می‌شود.

 
2. **CSS**: 
   - `canvas` با مرز سفید و پس‌زمینه‌ای تیره برای تمرکز بیشتر بر روی بازی طراحی شده است.
 
3. **JavaScript**:
   - **راکت**: راکت قرمز در پایین بوم رسم می‌شود و بازیکن می‌تواند آن را با کلیدهای چپ و راست حرکت دهد.
   - **موانع**: موانع زرد به صورت تصادفی ایجاد می‌شوند و به سمت پایین حرکت می‌کنند. بازیکن باید از آن‌ها دوری کند.
   - **برخورد**: در صورت برخورد راکت با موانع، بازی به پایان می‌رسد.
   - **حلقه بازی**: بازی به صورت پیوسته اجرا می‌شود تا زمانی که بازیکن برخورد کند.
   - **کنترل‌ها**: کلیدهای چپ و راست برای حرکت راکت استفاده می‌شوند.
 
### نتیجه‌گیری
بازی **Speed Rocket** یک پروژه ساده و سرگرم‌کننده است که برای مبتدیان مناسب است تا با مفاهیم اولیه بازی‌سازی با JavaScript آشنا شوند. می‌توانید این پروژه را با افزودن ویژگی‌هایی مانند سطوح مختلف، سرعت بیشتر، یا جایزه‌های ویژه جذاب‌تر کنید. از بازی کردن و یادگیری لذت ببرید!c
| صفحه قابل مشاهده: دانلود پروژه **Speed Rocket Game** با استفاده از HTML، CSS، و JavaScript می‌باشد