اسکریپت بازی BREAKER با JAVASCRIPT
بازی Breaker یکی از بازی‌های مشهور و جذاب است که به‌خصوص در دنیای وب و موبایل بسیار محبوب شده است. این بازی شامل تخریب بلوک‌ها با استفاده از یک توپ است. در ادامه به بررسی اجزای اصلی اسکریپت این بازی و نحوه عملکرد آن می‌پردازیم.
ساختار اصلی بازی
در ابتدا، برای ایجاد بازی Breaker نیاز به یک صفحه HTML ساده داریم که شامل یک بوم (canvas) برای نمایش بازی است. با استفاده از JavaScript، می‌توانیم این بوم را تنظیم کرده و عناصر مختلف بازی را در آن رسم کنیم.
```html
<!DOCTYPE html>
<html>
<head>
<title>بازی Breaker</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script src="breaker.js"></script>
</body>
</html>
```
تعریف متغیرها و تنظیمات اولیه
در فایل JavaScript (breaker.js)، باید متغیرهای اصلی را تعریف کنیم. این متغیرها شامل توپ، پد، بلوک‌ها و وضعیت بازی هستند.
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2; // حرکت عمودی
let dy = -2; // حرکت افقی
const paddleHeight = 10;
const paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;
let rightPressed = false;
let leftPressed = false;
const brickRowCount = 5;
const brickColumnCount = 3;
const brickWidth = 75;
const brickHeight = 20;
const brickPadding = 10;
const brickOffsetTop = 30;
const brickOffsetLeft = 30;
let bricks = [];
for (let c = 0; c < brickColumnCount; c++) {
bricks[c] = [];
for (let r = 0; r < brickRowCount; r++) {
bricks[c][r] = { x: 0, y: 0, status: 1 };
}
}
```
رسم عناصر بازی
در ادامه، باید یک تابع برای رسم توپ، پد و بلوک‌ها ایجاد کنیم. این تابع با نام `draw` شناخته می‌شود.
```javascript
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
if (bricks[c][r].status === 1) {
const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
```
مدیریت حرکت و برخورد
با استفاده از توابعی برای مدیریت حرکت پد و برخورد توپ با بلوک‌ها، می‌توانیم بازی را جذاب‌تر کنیم.
```javascript
function collisionDetection() {
for (let c = 0; c < brickColumnCount; c++) {
for (let r = 0; r < brickRowCount; r++) {
const b = bricks[c][r];
if (b.status === 1) {
if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
dy = -dy;
b.status = 0;
}
}
}
}
}
```
به‌روزرسانی و اجرای بازی
در نهایت، باید یک تابع برای به‌روزرسانی وضعیت بازی و رسم دوباره عناصر در هر فریم ایجاد کنیم.
```javascript
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
collisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy < ballRadius) {
dy = -dy;
} else if (y + dy > canvas.height - ballRadius) {
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
} else {
document.location.reload(); // بازی دوباره شروع می‌شود
}
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
```
نتیجه‌گیری
بازی Breaker با استفاده از JavaScript و HTML5 Canvas به راحتی قابل پیاده‌سازی است. از رسم عناصر ساده تا مدیریت حرکت و برخورد، همه چیز با کمی خلاقیت و کدنویسی در دسترس است. این اسکریپت به شما اجازه می‌دهد تا یک بازی جذاب و سرگرم‌کننده بسازید و مهارت‌های برنامه‌نویسی خود را به چالش بکشید.
اسکریپت بازی BREAKER با استفاده از جاوا اسکریپت، یکی از نمونه‌های جذاب و ساده برای یادگیری برنامه‌نویسی بازی‌ها است. این بازی به نوعی شبیه به بازی‌های کلاسیک پین‌بال یا آتاری است، که بازیکن باید با استفاده از یک میله، توپ را به سمت بلوک‌ها پرتاب کند و آن‌ها را بشکند.
اجزای اصلی بازی
۱. محیط بازی
محیط بازی شامل یک صفحه‌نمایش است که در آن بلوک‌ها، توپ و میله قرار دارند. می‌توانید با استفاده از CSS، استایل‌ها و طراحی محیط را بهبود دهید.
۲. بلوک‌ها
بلوک‌ها معمولاً در ردیف‌ها و ستون‌ها چیده می‌شوند. هر بلوک دارای ویژگی‌هایی مثل رنگ، اندازه و وضعیت (شکسته یا سالم) است. می‌توانید با افزودن ویژگی‌های مختلف، بازی را جذاب‌تر کنید.
۳. توپ
توپ به سمت بلوک‌ها پرتاب می‌شود و با برخورد به آن‌ها، بلوک‌ها شکسته می‌شوند. توپ می‌تواند با استفاده از فیزیک ساده حرکت کند و به بلوک‌ها برخورد کند.
۴. میله
میله به بازیکن این امکان را می‌دهد که توپ را به سمت بلوک‌ها پرتاب کند. با حرکت ماوس یا کلیدهای صفحه‌کلید، می‌توانید میله را جابجا کنید.
نحوه کارکرد اسکریپت
۱. بارگذاری بازی
با بارگذاری صفحه، می‌توانید عناصر بازی را ایجاد کرده و به آن‌ها ویژگی‌ها بدهید. این شامل ایجاد بلوک‌ها و توپ و میله است.
۲. کنترل توپ
برای کنترل توپ، از تابعی استفاده می‌شود که موقعیت توپ را به‌روزرسانی می‌کند. هر بار که توپ به بلوکی برخورد کند، تابعی برای شکستن بلوک صدا زده می‌شود.
۳. پایان بازی
زمانی که تمام بلوک‌ها شکسته شدند، بازی به پایان می‌رسد. می‌توانید به بازیکن پیام پیروزی نشان دهید یا امتیاز وی را ثبت کنید.
نتیجه‌گیری
بازی BREAKER یک پروژه عالی برای یادگیری مفاهیم بنیادی برنامه‌نویسی بازی است. با افزودن ویژگی‌های جدید، مانند سطوح مختلف یا امتیازدهی، می‌توانید بازی خود را بهبود دهید. این بازی به شما کمک می‌کند تا با مفاهیم جاوا اسکریپت و طراحی بازی به‌خوبی آشنا شوید.
