کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه بازی **Breakout** با استفاده از جاوا اسکریپت
این پروژه یک بازی کلاسیک **Breakout** است که با استفاده از HTML، CSS و JavaScript توسعه داده شده است. هدف بازی این است که با استفاده از توپ، بلوک‌ها را بشکنید و امتیاز جمع‌آوری کنید. این بازی یک مثال عالی برای تمرین مفاهیم برنامه‌نویسی بازی‌ها و دستکاری Canvas در جاوا اسکریپت است.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی Breakout ایجاد می‌کنیم.
```html
بازی Breakout
```
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
```css
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
canvas {
background-color: #fff;
border: 1px solid #000;
}
```
### 3. **JavaScript**
در این بخش منطق بازی را با جاوا اسکریپت پیاده‌سازی می‌کنیم.
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// تنظیم ابعاد بوم
canvas.width = 480;
canvas.height = 320;
// متغیرهای بازی
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;
const 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 };
}
}
// امتیاز
let score = 0;
// کنترل صفحه کلید
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
function keyDownHandler(e) {
if (e.key === 'Right' || e.key === 'ArrowRight') {
rightPressed = true;
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key === 'Right' || e.key === 'ArrowRight') {
rightPressed = false;
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
leftPressed = false;
}
}
// تابع برای رسم توپ
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();
}
}
}
}
// تابع برای رسم امتیاز
function drawScore() {
ctx.font = '16px Arial';
ctx.fillStyle = '#0095DD';
ctx.fillText('امتیاز: ' + score, 8, 20);
}
// تابع برای تابع اصلی بازی
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBricks();
drawBall();
drawPaddle();
drawScore();
// حرکت توپ
x += dx;
y += dy;
// برخورد با دیوارها
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(); // بازی دوباره راه‌اندازی می‌شود
}
}
// حرکت پدال
if (rightPressed && paddleX < canvas.width - paddleWidth) {
paddleX += 7;
} else if (leftPressed && paddleX > 0) {
paddleX -= 7;
}
// برخورد توپ با بلوک‌ها
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;
score++;
if (score === brickRowCount * brickColumnCount) {
alert('تبریک! شما بازی را تمام کردید!');
document.location.reload(); // بازی دوباره راه‌اندازی می‌شود
}
}
}
}
}
requestAnimationFrame(draw);
}
draw();
```
### توضیحات کد:
1. **HTML**:
- شامل یک بوم (Canvas) برای رسم بازی و بارگذاری اسکریپت جاوا اسکریپت است.
2. **CSS**:
- طراحی بوم بازی با حاشیه و پس‌زمینه سفید.
3. **JavaScript**:
- **تنظیمات اولیه**: شامل ابعاد بوم، متغیرهای توپ و پدال، و آرایه‌ای از بلوک‌ها.
- **حرکت توپ**: توپ درون بوم حرکت می‌کند و با دیوارها و بلوک‌ها برخورد می‌کند.
- **کنترل پدال**: پدال به چپ و راست حرکت می‌کند و بازیکن باید توپ را با آن بزند.
- **امتیاز**: امتیاز هر بار که توپ بلوکی را می‌شکند افزایش می‌یابد. وقتی تمام بلوک‌ها شکسته شوند، بازی به پایان می‌رسد و بازیکن تبریک گفته می‌شود.
### نتیجه‌گیری
این پروژه **بازی Breakout** یک مثال عالی برای یادگیری نحوه ساخت بازی‌ها با جاوا اسکریپت و Canvas است. شما میتوانید این پروژه را با اضافه کردن ویژگی‌های جدید، مانند سطوح مختلف، امتیازدهی بهتر و انیمیشن‌های بیشتر گسترش دهید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه بازی **Breakout** با استفاده از جاوا اسکریپت می‌باشد
