کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی بیلیارد کلاسیک با استفاده از JavaScript یک پروژه چالش‌برانگیز و جذاب است که به شما کمک می‌کند تا با مفاهیم برنامه‌نویسی گرافیکی، فیزیک حرکت، و مدیریت برخورد‌ها در بازی آشنا شوید. در این پروژه، کاربران می‌توانند با استفاده از موس یا صفحه کلید، توپ بیلیارد را به سمت سایر توپ‌ها هدایت کنند و از قوانین فیزیکی مانند سرعت و شتاب استفاده کنند.
### ویژگی‌های اصلی پروژه
1. **صفحه بازی بیلیارد**: تخته و توپ‌ها به شکلی شبیه‌سازی شده‌اند.
2. **توپ قابل کنترل**: بازیکن می‌تواند توپ سفید را با انتخاب جهت و قدرت حرکت دهد.
3. **مدیریت برخورد توپ‌ها**: برخورد بین توپ‌ها به صورت فیزیکی محاسبه می‌شود.
4. **استفاده از قوانین فیزیک**: حرکت توپ‌ها از قوانین فیزیکی مانند سرعت، شتاب و اصطکاک پیروی می‌کند.
### کد منبع نمونه
#### ۱. ایجاد فایل HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:
```html
بازی بیلیارد کلاسیک
بازی بیلیارد کلاسیک
```
#### ۲. ایجاد فایل CSS
یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
```css
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #2e7d32;
}
canvas {
border: 5px solid #000;
background-color: #00796b;
}
```
#### ۳. ایجاد فایل JavaScript
یک فایل JavaScript به نام `script.js` ایجاد کنید و کد زیر را در آن قرار دهید:
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const balls = [];
const ballRadius = 10;
const friction = 0.98;
// ایجاد توپ‌های بازی
function createBalls() {
for (let i = 0; i < 5; i++) {
balls.push({
x: 150 + i * 40,
y: 200,
dx: Math.random() * 4 - 2,
dy: Math.random() * 4 - 2,
color: getRandomColor(),
});
}
// توپ سفید
balls.push({
x: 400,
y: 200,
dx: 0,
dy: 0,
color: 'white',
});
}
// تولید رنگ تصادفی
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// رسم توپ‌ها
function drawBalls() {
balls.forEach(ball => {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
});
}
// به‌روزرسانی وضعیت توپ‌ها
function updateBalls() {
balls.forEach(ball => {
ball.x += ball.dx;
ball.y += ball.dy;
// اعمال اصطکاک
ball.dx *= friction;
ball.dy *= friction;
// برخورد با دیواره‌ها
if (ball.x + ballRadius > canvas.width || ball.x - ballRadius < 0) {
ball.dx = -ball.dx;
}
if (ball.y + ballRadius > canvas.height || ball.y - ballRadius < 0) {
ball.dy = -ball.dy;
}
// بررسی برخورد بین توپ‌ها
balls.forEach(otherBall => {
if (ball !== otherBall && checkCollision(ball, otherBall)) {
resolveCollision(ball, otherBall);
}
});
});
}
// بررسی برخورد بین دو توپ
function checkCollision(ball1, ball2) {
const dx = ball1.x - ball2.x;
const dy = ball1.y - ball2.y;
const distance = Math.sqrt(dx * dx + dy * dy);
return distance < ballRadius * 2;
}
// مدیریت برخورد بین توپ‌ها
function resolveCollision(ball1, ball2) {
const dx = ball1.x - ball2.x;
const dy = ball1.y - ball2.y;
const distance = Math.sqrt(dx * dx + dy * dy);
// جلوگیری از همپوشانی
const overlap = ballRadius * 2 - distance;
const smallerMass = 1;
ball1.x += (overlap / 2) * (dx / distance);
ball1.y += (overlap / 2) * (dy / distance);
ball2.x -= (overlap / 2) * (dx / distance);
ball2.y -= (overlap / 2) * (dy / distance);
// تعویض سرعت‌ها
const v1 = { dx: ball1.dx, dy: ball1.dy };
const v2 = { dx: ball2.dx, dy: ball2.dy };
ball1.dx = v2.dx;
ball1.dy = v2.dy;
ball2.dx = v1.dx;
ball2.dy = v1.dy;
}
// کنترل ضربه توپ سفید با موس
canvas.addEventListener('mousedown', (event) => {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
const whiteBall = balls[balls.length - 1];
const dx = mouseX - whiteBall.x;
const dy = mouseY - whiteBall.y;
const distance = Math.sqrt(dx * dx + dy * dy);
whiteBall.dx = dx / distance * 10;
whiteBall.dy = dy / distance * 10;
});
// حلقه بازی
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBalls();
updateBalls();
requestAnimationFrame(gameLoop);
}
// شروع بازی
createBalls();
gameLoop();
```
### نحوه اجرای پروژه:
1. فایل‌های `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
### نتیجه‌گیری
این پروژه یک بازی بیلیارد کلاسیک ساده است که به شما کمک می‌کند تا با مفاهیم برنامه‌نویسی بازی، استفاده از canvas، مدیریت حرکت و برخورد‌های فیزیکی آشنا شوید. شما میتوانید با اضافه کردن ویژگی‌های جدید مانند تعداد بیشتری توپ، تعویض نوبت بین بازیکنان، یا قوانین بیلیارد، این بازی را گسترش دهید. همچنین میتوانید بهبودهای گرافیکی بیشتری به بازی اضافه کنید تا تجربه کاربری بهتری داشته باشد.
| صفحه قابل مشاهده:
دانلود پروژه بازی بیلیارد کلاسیک با استفاده از JavaScript می‌باشد
