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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



 در اینجا یک پروژه ساده برای ایجاد یک بازی تنیس روی میز (Table Tennis) با استفاده از HTML، CSS، و JavaScript ارائه شده است. این بازی به صورت دو بعدی طراحی شده و با استفاده از کنترل‌های صفحه‌کلید می‌توانید توپ را به سمت بالا و پایین حرکت دهید.
 
### 1. **HTML**
ابتدا کد HTML را برای ایجاد صفحه بازی و بوم (canvas) که در آن بازی نمایش داده می‌شود، ایجاد می‌کنیم.
 
```html
   
   
    بازی تنیس روی میز
   
   
   
```
 
### 2. **CSS**
سپس برای زیباسازی صفحه، از کد CSS زیر استفاده می‌کنیم.
 
```css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
}
 
canvas {
    background-color: #fff;
    border: 3px solid #000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
```
 
### 3. **JavaScript**
اکنون کد JavaScript را برای پیاده‌سازی منطق بازی، کنترل توپ و بازیکنان پیاده‌سازی می‌کنیم.
 
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
 
// اندازه و مکان اولیه بازیکنان و توپ
const paddleWidth = 10, paddleHeight = 100;
let player1Y = canvas.height / 2 - paddleHeight / 2;
let player2Y = canvas.height / 2 - paddleHeight / 2;
let player1Score = 0, player2Score = 0;
 
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 5, ballSpeedY = 5;
 
// رسم اجزای بازی
function draw() {
    // پاک کردن صفحه
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // رسم مستطیل بازی (زمین)
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
 
    // رسم بازیکن 1 (پدال چپ)
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, player1Y, paddleWidth, paddleHeight);
 
    // رسم بازیکن 2 (پدال راست)
    ctx.fillStyle = '#fff';
    ctx.fillRect(canvas.width - paddleWidth, player2Y, paddleWidth, paddleHeight);
 
    // رسم توپ
    ctx.beginPath();
    ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
    ctx.fillStyle = '#ff0000';
    ctx.fill();
    ctx.closePath();
 
    // نمایش امتیازها
    ctx.fillStyle = '#fff';
    ctx.font = '20px Arial';
    ctx.fillText(`بازیکن 1: ${player1Score}`, 50, 20);
    ctx.fillText(`بازیکن 2: ${player2Score}`, canvas.width - 150, 20);
}
 
// به روز رسانی موقعیت توپ
function update() {
    ballX += ballSpeedX;
    ballY += ballSpeedY;
 
    // برخورد توپ با دیوارهای بالا و پایین
    if (ballY <= 0 || ballY >= canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
 
    // برخورد توپ با پدال چپ (بازیکن 1)
    if (ballX <= paddleWidth && ballY > player1Y && ballY < player1Y + paddleHeight) {
        ballSpeedX = -ballSpeedX;
    }
 
    // برخورد توپ با پدال راست (بازیکن 2)
    if (ballX >= canvas.width - paddleWidth && ballY > player2Y && ballY < player2Y + paddleHeight) {
        ballSpeedX = -ballSpeedX;
    }
 
    // بررسی برخورد با دیواره چپ (امتیاز بازیکن 2)
    if (ballX <= 0) {
        player2Score++;
        resetBall();
    }
 
    // بررسی برخورد با دیواره راست (امتیاز بازیکن 1)
    if (ballX >= canvas.width) {
        player1Score++;
        resetBall();
    }
}
 
// تنظیم مجدد توپ به موقعیت مرکزی
function resetBall() {
    ballX = canvas.width / 2;
    ballY = canvas.height / 2;
    ballSpeedX = -ballSpeedX;
}
 
// کنترل حرکت بازیکنان
window.addEventListener('keydown', (event) => {
    const key = event.key;
    const paddleSpeed = 20;
 
    if (key === 'ArrowUp') {
        player2Y = Math.max(player2Y - paddleSpeed, 0);
    } else if (key === 'ArrowDown') {
        player2Y = Math.min(player2Y + paddleSpeed, canvas.height - paddleHeight);
    } else if (key === 'w') {
        player1Y = Math.max(player1Y - paddleSpeed, 0);
    } else if (key === 's') {
        player1Y = Math.min(player1Y + paddleSpeed, canvas.height - paddleHeight);
    }
});
 
// حلقه اصلی بازی
function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}
 
gameLoop();
```
 
### توضیح
1. **HTML**: یک بوم (canvas) برای نمایش بازی استفاده می‌شود که با استفاده از JavaScript محتوا در آن رسم می‌شود.
2. **CSS**: برای زیباسازی صفحه، پس‌زمینه سیاه و مرز سفید برای بوم استفاده شده است.
3. **JavaScript**: شامل تمام منطق بازی است:
   - توپ حرکت می‌کند و به دیواره‌ها و بازیکنان برخورد می‌کند.
   - با استفاده از کلیدهای جهت‌دار (`ArrowUp` و `ArrowDown`) برای بازیکن 2 و کلیدهای `w` و `s` برای بازیکن 1 می‌توانید پدال‌ها را حرکت دهید.
   - امتیازدهی برای زمانی که توپ از دیواره عبور کند محاسبه می‌شود.
 
این پروژه را می‌توانید با اضافه کردن قابلیت‌هایی مانند افزایش سرعت توپ، تنظیم تعداد امتیازهای مورد نیاز برای برد، یا حتی افزودن صداهای برخورد بهبود دهید. از بازی کردن و کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی تنیس روی میز (Table Tennis) با استفاده از HTML، CSS، و JavaScript می‌باشد