### پروژه: بازی پینگ پنگ در JavaScript با کد منبع
**بازی پینگ پنگ** یک پروژه سرگرم‌کننده است که با استفاده از **JavaScript**، **HTML** و **CSS** ساخته شده است. این بازی از بازی پینگ پنگ کلاسیک الهام گرفته شده است که شامل دو پدال و یک توپ می‌باشد. هدف بازی این است که بازیکن توپ را کنترل کرده و مانع از خروج آن از صفحه شود. این پروژه بسیار مناسب برای یادگیری مفاهیم پایه برنامه‌نویسی JavaScript، همچون حرکت اشیاء و برخورد آن‌ها، می‌باشد.
### ویژگی‌های بازی
1. **کنترل ساده**: بازیکن می‌تواند با استفاده از دکمه‌های جهت بالا و پایین، پدال را کنترل کند.
2. **هوش مصنوعی ساده**: یک پدال دیگر به صورت خودکار و توسط کد کنترل می‌شود که می‌تواند سطح رقابت بازی را افزایش دهد.
3. **گرافیک ساده و جذاب**: از HTML و CSS برای طراحی بازی استفاده شده که تجربه کاربری خوبی را ایجاد می‌کند.
4. **امتیازدهی زنده**: امتیازات در زمان واقعی به روزرسانی می‌شوند تا نشان دهند کدام بازیکن برنده است.
### نحوه اجرای پروژه
1. **دانلود پروژه**: ابتدا فایل‌های کد منبع را از لینک مورد نظر دانلود کنید.
2. **اجرای بازی**: فایل `index.html` را با استفاده از مرورگر باز کنید. توصیه می‌شود از مرورگرهای مدرن مانند Google Chrome یا Mozilla Firefox استفاده کنید.
### کد منبع
#### کد HTML (index.html)
```html
بازی پینگ پنگ
```
#### کد CSS (style.css)
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #333;
}
canvas {
border: 2px solid #fff;
background-color: #000;
}
```
#### کد JavaScript (script.js)
```javascript
const canvas = document.getElementById('pongCanvas');
const ctx = canvas.getContext('2d');
let player = {
x: 0,
y: canvas.height / 2 - 50,
width: 10,
height: 100,
color: 'white',
dy: 0
};
let computer = {
x: canvas.width - 10,
y: canvas.height / 2 - 50,
width: 10,
height: 100,
color: 'white',
dy: 2
};
let ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 10,
speed: 4,
dx: 4,
dy: 4,
color: 'red'
};
// رسم پدال‌ها و توپ
function drawRect(x, y, w, h, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
}
function drawCircle(x, y, radius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
// حرکت بازیکن
function movePlayer() {
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowUp') {
player.dy = -5;
} else if (event.key === 'ArrowDown') {
player.dy = 5;
}
});
document.addEventListener('keyup', () => {
player.dy = 0;
});
player.y += player.dy;
if (player.y < 0) player.y = 0;
if (player.y + player.height > canvas.height) player.y = canvas.height - player.height;
}
// حرکت کامپیوتر (پدال دوم)
function moveComputer() {
if (ball.y > computer.y + computer.height / 2) {
computer.y += computer.dy;
} else {
computer.y -= computer.dy;
}
}
// حرکت توپ
function moveBall() {
ball.x += ball.dx;
ball.y += ball.dy;
// برخورد با دیوار بالا و پایین
if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
ball.dy *= -1;
}
// برخورد با پدال بازیکن
if (ball.x - ball.radius < player.x + player.width && ball.y > player.y && ball.y < player.y + player.height) {
ball.dx *= -1;
}
// برخورد با پدال کامپیوتر
if (ball.x + ball.radius > computer.x && ball.y > computer.y && ball.y < computer.y + computer.height) {
ball.dx *= -1;
}
// برخورد با دیوار سمت چپ و راست (امتیاز)
if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
resetBall();
}
}
// تنظیم مجدد توپ
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx *= -1;
}
// رسم بازی
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRect(player.x, player.y, player.width, player.height, player.color);
drawRect(computer.x, computer.y, computer.width, computer.height, computer.color);
drawCircle(ball.x, ball.y, ball.radius, ball.color);
}
// به‌روزرسانی فریم بازی
function update() {
movePlayer();
moveComputer();
moveBall();
}
// حلقه اصلی بازی
function gameLoop() {
draw();
update();
requestAnimationFrame(gameLoop);
}
gameLoop();
```
### توضیحات اضافی
- **کنترل‌های بازی**: بازیکن می‌تواند با استفاده از دکمه‌های `ArrowUp` و `ArrowDown` (جهت بالا و پایین)، پدال خود را حرکت دهد.
- **هوش مصنوعی کامپیوتر**: پدال کامپیوتر به طور خودکار به سمت موقعیت توپ حرکت می‌کند.
- **تنظیم مجدد توپ**: در صورتی که توپ به سمت چپ یا راست صفحه برخورد کند، توپ به وسط صفحه باز می‌گردد و جهت حرکت آن تغییر می‌کند.
### جمع‌بندی
بازی **پینگ پنگ** با استفاده از **JavaScript**، **HTML** و **CSS** مثال خوبی برای یادگیری مفاهیم اولیه ساخت بازی‌های ساده وب است. می‌توانید این پروژه را برای یادگیری و بهبود مهارت‌های برنامه‌نویسی خود استفاده کنید و با افزودن ویژگی‌های جدید، آن را بهبود بخشید.
| صفحه قابل مشاهده:
دانلود پروژه بازی پینگ پنگ در JavaScript با کد منبع می‌باشد
