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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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


 در اینجا یک پروژه ساده برای ایجاد بازی Paddle (پدالی) با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، کاربر با استفاده از یک پدال (پدال چپ یا راست) باید توپ را به سمت حریف بفرستد و از سقوط آن جلوگیری کند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی و بوم (canvas) ایجاد می‌کنیم.
 
```html
   
   
    بازی پدالی
   
   
       

بازی پدالی

       
       

امتیاز: 0

   
   
```
 
### 2. **CSS**
سپس از CSS برای زیبا کردن صفحه و تنظیم ظاهر بازی استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
    color: #fff;
}
 
.container {
    text-align: center;
}
 
canvas {
    background-color: #333;
    border: 2px solid #fff;
    cursor: paddle;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. در این کد، پدال‌ها و توپ حرکت می‌کنند و کاربر باید توپ را با پدال ضربه بزند.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
 
let score = 0;
 
// اندازه و موقعیت پدال‌ها و توپ
const paddleWidth = 10;
const paddleHeight = 100;
let playerY = canvas.height / 2 - paddleHeight / 2;
let opponentY = canvas.height / 2 - paddleHeight / 2;
const paddleSpeed = 30;
 
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5;
let ballSpeedY = 5;
const ballRadius = 10;
 
// رسم اجزای بازی
function draw() {
    // پاک کردن بوم
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // رسم پدال بازیکن
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, playerY, paddleWidth, paddleHeight);
 
    // رسم پدال حریف
    ctx.fillRect(canvas.width - paddleWidth, opponentY, paddleWidth, paddleHeight);
 
    // رسم توپ
    ctx.beginPath();
    ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 0, 0, 1)';
    ctx.fill();
    ctx.closePath();
 
    // نمایش امتیاز
    ctx.fillStyle = '#fff';
    ctx.font = '20px Arial';
    ctx.fillText(`امتیاز: ${score}`, 10, 20);
}
 
// به روز رسانی موقعیت توپ و پدال‌ها
function update() {
    ballX += ballSpeedX;
    ballY += ballSpeedY;
 
    // برخورد توپ با دیوارهای بالا و پایین
    if (ballY <= 0 || ballY >= canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
 
    // برخورد توپ با پدال بازیکن
    if (ballX <= paddleWidth && ballY > playerY && ballY < playerY + paddleHeight) {
        ballSpeedX = -ballSpeedX;
        score++;
    }
 
    // برخورد توپ با پدال حریف
    if (ballX >= canvas.width - paddleWidth && ballY > opponentY && ballY < opponentY + paddleHeight) {
        ballSpeedX = -ballSpeedX;
    }
 
    // بررسی سقوط توپ
    if (ballX <= 0) {
        alert('بازی را باختید! امتیاز شما: ' + score);
        resetGame();
    }
 
    if (ballX >= canvas.width) {
        alert('شما برنده شدید! امتیاز شما: ' + score);
        resetGame();
    }
}
 
// بازنشانی بازی
function resetGame() {
    score = 0;
    scoreDisplay.textContent = score;
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
    ballSpeedX = 5;
    ballSpeedY = 5;
    playerY = canvas.height / 2 - paddleHeight / 2;
    opponentY = canvas.height / 2 - paddleHeight / 2;
}
 
// کنترل حرکت بازیکن
window.addEventListener('keydown', (event) => {
    const key = event.key;
 
    if (key === 'ArrowUp') {
        playerY = Math.max(playerY - paddleSpeed, 0);
    } else if (key === 'ArrowDown') {
        playerY = Math.min(playerY + paddleSpeed, canvas.height - paddleHeight);
    }
});
 
// حرکت حریف به سمت توپ
function moveOpponent() {
    if (opponentY + paddleHeight / 2 < ballY) {
        opponentY += paddleSpeed / 1.5; // حرکت به سمت پایین
    } else {
        opponentY -= paddleSpeed / 1.5; // حرکت به سمت بالا
    }
}
 
// حلقه اصلی بازی
function gameLoop() {
    update();
    moveOpponent();
    draw();
    requestAnimationFrame(gameLoop);
}
 
// شروع بازی
gameLoop();
```
 
### توضیحات کد:
1. **HTML**: شامل یک بوم برای نمایش بازی و یک بخش برای نمایش امتیاز است.
2. **CSS**: با استفاده از پس‌زمینه تیره و رنگ‌های ساده طراحی شده است.
3. **JavaScript**:
   - **تابع `draw`**: برای رسم پدال‌ها و توپ استفاده می‌شود.
   - **تابع `update`**: موقعیت توپ و برخورد آن با پدال‌ها و دیوارها را بررسی می‌کند.
   - **تابع `resetGame`**: بازی را بازنشانی می‌کند و امتیاز را به صفر می‌رساند.
   - **رویداد `keydown`**: کنترل حرکت پدال بازیکن با کلیدهای بالا و پایین را مدیریت می‌کند.
   - **تابع `moveOpponent`**: حرکت حریف را به سمت توپ تنظیم می‌کند.
   - **حلقه `gameLoop`**: به‌صورت مداوم بازی را به‌روزرسانی و رسم می‌کند.
 
### نتیجه‌گیری
این بازی پدالی می‌تواند به عنوان یک پروژه جالب برای یادگیری JavaScript و مدیریت تعاملات کاربر با صفحه وب باشد. شما می‌توانید ویژگی‌هایی مانند افزایش سرعت توپ، تنظیم زمان بازی یا حتی ایجاد سطوح سختی مختلف را به آن اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی Paddle (پدالی) با استفاده از HTML، CSS و JavaScript می‌باشد