اسکریپت بازی 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 به راحتی قابل پیاده‌سازی است. از رسم عناصر ساده تا مدیریت حرکت و برخورد، همه چیز با کمی خلاقیت و کدنویسی در دسترس است. این اسکریپت به شما اجازه می‌دهد تا یک بازی جذاب و سرگرم‌کننده بسازید و مهارت‌های برنامه‌نویسی خود را به چالش بکشید.
