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

جزئیات محصول

دانلود پروژه **بازی توپ گرانشی** (Gravity Ball Game) با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی توپ گرانشی** (Gravity Ball Game) با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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



 در اینجا یک پروژه ساده برای ایجاد یک **بازی توپ گرانشی** (Gravity Ball Game) با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، کاربر کنترل توپ را بر عهده دارد و باید از موانع بگذرد و امتیاز کسب کند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
 
```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: #f0f0f0;
}
 
.game-container {
    position: relative;
}
 
canvas {
    background-color: #ffffff;
    border: 1px solid #000;
}
 
.score {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    color: #333;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. در این کد، توپ سقوط می‌کند و کاربر با فشار دادن کلیدها می‌تواند آن را به سمت چپ و راست حرکت دهد.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
 
canvas.width = 400;
canvas.height = 600;
 
let ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - ballRadius;
let dx = 2; // حرکت افقی توپ
let dy = -2; // حرکت عمودی توپ
let score = 0;
let gravity = 0.2; // نیروی گرانش
let isGameOver = false;
 
const obstacles = [];
 
function createObstacle() {
    const width = Math.random() * (canvas.width / 2) + 20; // عرض مانع
    const height = 10; // ارتفاع مانع
    const x = Math.random() * (canvas.width - width); // موقعیت افقی مانع
    const y = Math.random() * (canvas.height / 2); // موقعیت عمودی مانع
    obstacles.push({ x, y, width, height });
}
 
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.closePath();
}
 
function drawObstacles() {
    ctx.fillStyle = 'red';
    obstacles.forEach(obstacle => {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    });
}
 
function detectCollision() {
    for (let i = 0; i < obstacles.length; i++) {
        const obs = obstacles[i];
        if (x + ballRadius > obs.x && x - ballRadius < obs.x + obs.width && y + ballRadius > obs.y && y - ballRadius < obs.y + obs.height) {
            isGameOver = true;
            alert('بازی تمام شد! امتیاز شما: ' + score);
            document.location.reload();
        }
    }
}
 
function update() {
    if (isGameOver) return;
 
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawObstacles();
    
    // به روز رسانی موقعیت توپ
    y += dy;
    dy += gravity; // اضافه کردن نیروی گرانش
 
    // افزودن مانع جدید
    if (Math.random() < 0.02) {
        createObstacle();
    }
 
    detectCollision();
 
    // به روز رسانی امتیاز
    score++;
    scoreElement.textContent = score;
    
    requestAnimationFrame(update);
}
 
document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft') {
        x -= 15; // حرکت به چپ
    } else if (event.key === 'ArrowRight') {
        x += 15; // حرکت به راست
    }
});
 
update();
```
 
### توضیحات کد:
1. **HTML**: شامل یک `` برای رسم بازی و یک عنصر برای نمایش امتیاز است.
2. **CSS**: طراحی ساده برای ایجاد ظاهری کاربرپسند.
3. **JavaScript**:
   - **توپ**: توپ با موقعیت (x، y) و شعاع مشخص تعریف شده است.
   - **نیروی گرانش**: نیروی گرانش به توپ اضافه می‌شود تا به سمت پایین بیفتد.
   - **موانع**: موانع تصادفی در بازی ایجاد می‌شوند و اگر توپ به یکی از آنها برخورد کند، بازی به پایان می‌رسد.
   - **حرکت توپ**: با فشار دادن کلیدهای چپ و راست، توپ به سمت چپ و راست حرکت می‌کند.
   - **به‌روزرسانی**: تابع `update` به‌طور مداوم صدا زده می‌شود تا موقعیت توپ، موانع و امتیاز را به‌روزرسانی کند.
 
### نتیجه‌گیری
این بازی توپ گرانشی می‌تواند به عنوان یک پروژه سرگرم‌کننده و آموزنده برای یادگیری HTML، CSS و JavaScript مورد استفاده قرار گیرد. شما می‌توانید ویژگی‌های بیشتری مانند سطوح مختلف، زمان محدود، و قدرت‌های ویژه را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی توپ گرانشی** (Gravity Ball Game) با استفاده از HTML، CSS و JavaScript می‌باشد