کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه "بازی پونگ" با استفاده از JavaScript
بازی پونگ یک بازی دو بعدی کلاسیک است که به دو بازیکن این امکان را می‌دهد که با استفاده از پدهای خود، توپ را به سمت حریف ضربه بزنند. این پروژه با استفاده از HTML، CSS و JavaScript ساخته شده و می‌تواند به راحتی در مرورگر اجرا شود.
#### ویژگی‌های پروژه:
- **بازی دو نفره:** دو بازیکن می‌توانند با یکدیگر بازی کنند.
- **کنترل ساده:** کنترل آسان با استفاده از کلیدهای صفحه کلید.
- **نقطه‌گذاری:** نشان دادن امتیازها برای هر بازیکن.
### راه‌اندازی پروژه
#### 1. ساختار فایل‌ها
ساختار پروژه به صورت زیر است:
```
pong-game/
├── index.html
├── styles.css
└── script.js
```
#### 2. کد منبع
##### فایل `index.html`
این فایل رابط کاربری بازی پونگ را ایجاد می‌کند:
```html
بازی پونگ
```
##### فایل `styles.css`
برای تنظیمات ظاهری بازی استفاده می‌شود:
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
margin: 0;
}
canvas {
border: 2px solid #fff;
}
```
##### فایل `script.js`
این فایل منطق بازی پونگ را پیاده‌سازی می‌کند:
```javascript
const canvas = document.getElementById('pong');
const context = canvas.getContext('2d');
// ایجاد پد بازیکن
const player = {
x: 0,
y: canvas.height / 2 - 50,
width: 10,
height: 100,
color: '#fff',
score: 0
};
// ایجاد پد حریف
const computer = {
x: canvas.width - 10,
y: canvas.height / 2 - 50,
width: 10,
height: 100,
color: '#fff',
score: 0
};
// ایجاد توپ
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 10,
speed: 5,
velocityX: 5,
velocityY: 5,
color: '#fff'
};
// کنترل پد بازیکن
canvas.addEventListener('mousemove', movePaddle);
function movePaddle(event) {
const rect = canvas.getBoundingClientRect();
player.y = event.clientY - rect.top - player.height / 2;
}
// بازی
function game() {
update();
render();
}
// بروزرسانی وضعیت بازی
function update() {
// بروزرسانی موقعیت توپ
ball.x += ball.velocityX;
ball.y += ball.velocityY;
// برخورد توپ با دیواره‌ها
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.velocityY = -ball.velocityY;
}
// برخورد توپ با پد بازیکن
if (ball.x - ball.radius < player.x + player.width &&
ball.y > player.y &&
ball.y < player.y + player.height) {
ball.velocityX = -ball.velocityX;
}
// برخورد توپ با پد حریف
if (ball.x + ball.radius > computer.x &&
ball.y > computer.y &&
ball.y < computer.y + computer.height) {
ball.velocityX = -ball.velocityX;
}
// امتیازدهی
if (ball.x - ball.radius < 0) {
computer.score++;
resetBall();
} else if (ball.x + ball.radius > canvas.width) {
player.score++;
resetBall();
}
// حرکت پد حریف
computer.y += ((ball.y - (computer.y + computer.height / 2)) * 0.1);
}
// ریست کردن توپ
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.velocityX = -ball.velocityX;
}
// رسم بازی
function render() {
// زمینه
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
// رسم پد بازیکن
context.fillStyle = player.color;
context.fillRect(player.x, player.y, player.width, player.height);
// رسم پد حریف
context.fillStyle = computer.color;
context.fillRect(computer.x, computer.y, computer.width, computer.height);
// رسم توپ
context.fillStyle = ball.color;
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
context.closePath();
context.fill();
// نمایش امتیاز
context.fillStyle = '#fff';
context.font = '30px Arial';
context.fillText(player.score, canvas.width / 4, canvas.height / 5);
context.fillText(computer.score, 3 * canvas.width / 4, canvas.height / 5);
}
// شروع بازی
setInterval(game, 1000 / 60);
```
### 3. اجرای پروژه
برای اجرای پروژه، کافی است فایل `index.html` را در مرورگر خود باز کنید. میتوانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.
### نتیجه‌گیری
این پروژه "بازی پونگ" به شما این امکان را می‌دهد که با اصول ساخت یک بازی دو بعدی با استفاده از HTML، CSS و JavaScript آشنا شوید. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اضافه کردن صدای بازی، طراحی بهتر برای رابط کاربری، یا قابلیت تنظیم سرعت بازی اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه بازی‌های وب است.
| صفحه قابل مشاهده:
دانلود پروژه "بازی پونگ" با استفاده از JavaScript می‌باشد
