بازی بیلیارد با HTML: یک راهنمای جامع و کامل
در دنیای توسعه وب، ساختن بازی‌های تعاملی و جذاب، همواره یکی از چالش‌های هیجان‌انگیز برای برنامه‌نویسان و طراحان وب بوده است. یکی از این بازی‌ها، بیلیارد است که با توجه به قوانین ساده و گرافیک نسبتا کم‌نظیر، می‌تواند به عنوان یک پروژه آموزشی کامل و سرگرم‌کننده مورد استفاده قرار گیرد. در این مقاله، قصد داریم به صورت جامع و مفصل، فرآیند ساخت یک بازی بیلیارد با HTML، CSS و JavaScript را شرح دهیم، تا بتوانید از صفر تا صد، آن را توسعه دهید.
شناخت اجزای اصلی بازی بیلیارد
قبل از شروع کد نویسی، لازم است به درک دقیقی از اجزای بازی بیلیارد برسید. این اجزا شامل موارد زیر هستند:
- صفحه بازی: جایی که تمامی عناصر بازی قرار دارند.
- میدان بازی: سطح بازی، معمولاً به صورت یک مستطیل است.
- توپ‌ها: چند توپ در بازی، که هر کدام ویژگی‌های خاص خود را دارند.
- چوب بیلیارد (کیت): ابزاری که برای ضربه زدن به توپ‌ها استفاده می‌شود.
- قوانین بازی: نحوه حرکت توپ‌ها، برخوردها، امتیازدهی و پایان بازی.
برای ساخت این بازی، نیاز به درک عمیقی از HTML برای ساختار صفحه، CSS برای استایل‌دهی و JavaScript برای منطق بازی دارید.
ساختار اولیه صفحه با HTML
در ابتدا، باید ساختار پایه صفحه بازی را طراحی کنید. این کار را با تگ `<canvas>` انجام می‌دهیم، چرا که این عنصر برای ترسیم گرافیک‌های دو بعدی بسیار مناسب است.
html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>بازی بیلیارد با HTML</title>
<style>
body {
background-color: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
border: 2px solid #fff;
}
</style>
</head>
<body>
<canvas id="billiardTable" width="800" height="400"></canvas>
<script src="billiard.js"></script>
</body>
</html>
در این کد، یک عنصر `<canvas>` با ابعاد مشخص قرار داده‌ایم که فضای بازی را تشکیل می‌دهد. استایل‌های CSS، پس‌زمینه تیره و مرز سفید برای تمیز بودن صفحه هستند.
استایل دهی با CSS
در بخش CSS، تمرکز بر ایجاد یک محیط جذاب و قابل فهم است. پس‌زمینه تاریک، مرز مشخص، و قرارگیری در وسط صفحه، عناصر اصلی هستند. می‌توانید رنگ‌ها، فونت‌ها و اندازه‌ها را بسته به سلیقه و سبک خود تغییر دهید.
منطق بازی با JavaScript
این قسمت مهم‌ترین بخش است. در فایل `billiard.js`، باید تمامی منطق بازی را پیاده‌سازی کنید. در ادامه، به صورت مرحله‌به‌مرحله، قسمت‌های مختلف کد را شرح می‌دهیم.
تعریف توپ‌ها
در ابتدا، باید توپ‌ها را به صورت اشیاء تعریف کنید. هر توپ باید ویژگی‌هایی مانند موقعیت (x، y)، شعاع، رنگ، سرعت و جهت حرکت داشته باشد.
javascript
class Ball {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.vx = 0;
this.vy = 0;
}
draw(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
update() {
this.x += this.vx;
this.y += this.vy;
// کاهش سرعت برای شبیه‌سازی اصطکاک
this.vx *= 0.98;
this.vy *= 0.98;
}
}
در این کلاس، متد `draw()` توپ را رسم می‌کند و `update()` وضعیت حرکت را به‌روزرسانی می‌کند، همچنین اصطکاک را شبیه‌سازی می‌کند.
رسم توپ‌ها و میدان بازی
در حلقه اصلی بازی، باید تمامی توپ‌ها را رسم کنید و مکان آن‌ها را بروزرسانی نمایید.
javascript
const canvas = document.getElementById('billiardTable');
const ctx = canvas.getContext('2d');
const balls = [
new Ball(100, 200, 10, 'white'),
new Ball(200, 200, 10, 'red'),
// توپ‌های دیگر
];
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
balls.forEach(ball => {
ball.update();
ball.draw(ctx);
});
requestAnimationFrame(animate);
}
animate();
این حلقه، هر فریم را پاک می‌کند و سپس توپ‌ها را به‌صورت متوالی رسم می‌نماید، در نتیجه حرکت توپ‌ها به صورت روان قابل مشاهده است.
برخورد توپ‌ها و دیوارها
برای برخورد توپ‌ها به دیوارها و یکدیگر، باید کدهای تشخیص برخورد و واکنش مناسب را بنویسید.
javascript
function handleCollisions() {
balls.forEach((ball, index) => {
// برخورد با دیوارها
if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
ball.vx *= -1;
}
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.vy *= -1;
}
// برخورد با توپ‌های دیگر
for (let j = index + 1; j < balls.length; j++) {
const other = balls[j];
const dx = other.x - ball.x;
const dy = other.y - ball.y;
const distance = Math.hypot(dx, dy);
if (distance < ball.radius + other.radius) {
// واکنش برخورد
// حل برخورد به صورت ساده
ball.vx *= -1;
ball.vy *= -1;
other.vx *= -1;
other.vy *= -1;
}
}
});
}
این تابع، هر فریم بررسی می‌کند که توپ‌ها با دیوارها برخورد کنند و واکنش مناسب نشان دهند، همچنین برخورد توپ‌ها با یکدیگر را شناسایی و پاسخ می‌دهد.
کنترل کاربر و ضربه زدن
برای وارد کردن ضربه، باید مکان‌نمای ماوس یا لمس صفحه را مدیریت کنید. به عنوان نمونه، می‌توانید با کلیک کردن بر روی صفحه، توپ را ضربه بزنید.
javascript
canvas.addEventListener('mousedown', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
// پیدا کردن توپ نزدیک به نقطه کلیک
balls.forEach(ball => {
const dx = ball.x - mouseX;
const dy = ball.y - mouseY;
const distance = Math.hypot(dx, dy);
if (distance < ball.radius) {
// ضربه زدن به توپ
ball.vx = (mouseX - ball.x) * 0.2;
ball.vy = (mouseY - ball.y) * 0.2;
}
});
});
این کد، هنگام کلیک بر روی توپ، سرعت توپ را بر اساس فاصله از مکان کلیک تنظیم می‌کند، که در نتیجه، توپ شروع به حرکت می‌کند.
افزودن جزئیات و بهبودها
برای ساخت یک بازی بیلیارد کامل، باید امکانات بیشتری اضافه کنید:
- امتیازدهی و قوانین بازی: تعیین امتیاز بر اساس توپ‌های وارد شده در حفره‌ها.
- ایجاد حفره‌ها: طراحی بخش‌هایی از میز که توپ می‌تواند داخل آن بیفتد.
- انیمیشن طبیعی‌تر و اصطکاک: تنظیم مقادیر سرعت و کاهش آن‌ها برای حرکت طبیعی‌تر.
- مدیریت خطاها و تنظیمات: امکان تنظیم سختی، تعداد توپ‌ها و سایر گزینه‌ها.
- اضافه کردن صدا: برای برخوردها و ضربه‌ها، صداهای مناسب اضافه کنید.
نتیجه‌گیری
در نهایت، ساخت بازی بیلیارد با HTML، CSS و JavaScript، یک پروژه جذاب و آموزنده است که نه تنها مهارت‌های برنامه‌نویسی شما را تقویت می‌کند، بلکه درک عمیقی از مفاهیم گرافیک، فیزیک و تعامل کاربر را به شما می‌آموزد. با تمرین و توسعه بیشتر، می‌توانید این پروژه را به سطح حرفه‌ای‌تری برسانید، ویژگی‌های پیشرفته‌تری اضافه کنید و بازی‌های تعاملی فوق‌العاده‌ای بسازید.
در این مسیر، مهم‌ترین نکته، خلاقیت و صبر است. پس شروع کنید، آزمایش کنید و هر چه بیشتر کد بنویسید. آینده در انتظار شما است!