جزئیات محصول

دانلود پروژه بازی پینگ پنگ در JavaScript با کد منبع

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

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

### پروژه: بازی پینگ پنگ در 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 با کد منبع می‌باشد شما در حال مشاهده محصول "دانلود پروژه بازی پینگ پنگ در JavaScript با کد منبع" با شناسه 28502 هستید که تاکنون 37 بار مشاهده شده و در تاریخ Sep 30 2024 9:17PM طراحی و تولید شده است. این محصول با دقت و خلاقیت توسط تیم حرفه‌ای پرپروژه آماده شده است. قیمت این محصول 80000 تومان می‌باشد و در دسته‌بندی با شناسه 5501 قرار دارد.