کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت یک بازی نبرد گل (Goal Battle) با استفاده از JavaScript یک پروژه سرگرم‌کننده و جذاب است که در آن دو بازیکن یا دو تیم سعی می‌کنند تا توپ را به دروازه رقیب وارد کنند. این پروژه از HTML5 Canvas برای ایجاد گرافیک‌های بازی استفاده می‌کند و می‌تواند به صورت دو نفره بر روی یک سیستم اجرا شود. ایده این بازی از فوتبال الهام گرفته شده است و برای تمرین برنامه‌نویسی و پیاده‌سازی تعاملات در بازی عالی است.
### ویژگی‌های اصلی پروژه
1. **بازی دو نفره**: دو بازیکن می‌توانند به‌صورت همزمان بازی کنند.
2. **کنترل حرکت بازیکنان**: هر بازیکن می‌تواند شخصیت خود را به اطراف حرکت داده و توپ را کنترل کند.
3. **توپ و دروازه‌ها**: بازیکنان باید توپ را به سمت دروازه رقیب هدایت کنند تا امتیاز بگیرند.
4. **طراحی ساده**: از اشکال ساده و تصاویر ابتدایی برای گرافیک بازی استفاده می‌شود.
### کد منبع نمونه
#### ۱. ایجاد فایل HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:
```html
بازی نبرد گل با جاوااسکریپت
بازی نبرد گل (Goal Battle)
```
#### ۲. ایجاد فایل 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: #4caf50;
color: white;
}
canvas {
border: 2px solid #000;
background-color: #2e7d32; /* زمین بازی */
}
```
#### ۳. ایجاد فایل JavaScript
یک فایل JavaScript به نام `script.js` ایجاد کنید و کد زیر را در آن قرار دهید:
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// مشخصات بازیکن‌ها
const player1 = { x: 100, y: canvas.height / 2, width: 20, height: 20, color: 'red', dx: 0, dy: 0, speed: 4 };
const player2 = { x: 700, y: canvas.height / 2, width: 20, height: 20, color: 'blue', dx: 0, dy: 0, speed: 4 };
// مشخصات توپ
const ball = { x: canvas.width / 2, y: canvas.height / 2, radius: 10, dx: 3, dy: 3, color: 'white' };
// رسم بازیکن‌ها
function drawPlayer(player) {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
// رسم توپ
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
}
// به‌روزرسانی وضعیت بازیکن‌ها
function updatePlayers() {
player1.x += player1.dx;
player1.y += player1.dy;
player2.x += player2.dx;
player2.y += player2.dy;
// جلوگیری از خارج شدن بازیکن‌ها از محدوده صفحه
[player1, player2].forEach(player => {
if (player.x < 0) player.x = 0;
if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
if (player.y < 0) player.y = 0;
if (player.y + player.height > canvas.height) player.y = canvas.height - player.height;
});
}
// به‌روزرسانی وضعیت توپ
function updateBall() {
ball.x += ball.dx;
ball.y += ball.dy;
// برخورد با دیواره‌ها
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.dy = -ball.dy;
}
// برخورد با بازیکن‌ها
[player1, player2].forEach(player => {
if (
ball.x < player.x + player.width &&
ball.x + ball.radius > player.x &&
ball.y < player.y + player.height &&
ball.y + ball.radius > player.y
) {
ball.dx = -ball.dx;
}
});
// بررسی گل شدن توپ
if (ball.x - ball.radius < 0) {
alert('بازیکن 2 گل زد!');
resetGame();
} else if (ball.x + ball.radius > canvas.width) {
alert('بازیکن 1 گل زد!');
resetGame();
}
}
// بازنشانی بازی پس از گل شدن
function resetGame() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = 3 * (Math.random() > 0.5 ? 1 : -1);
ball.dy = 3 * (Math.random() > 0.5 ? 1 : -1);
player1.x = 100;
player1.y = canvas.height / 2;
player2.x = 700;
player2.y = canvas.height / 2;
}
// حلقه اصلی بازی
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer(player1);
drawPlayer(player2);
drawBall();
updatePlayers();
updateBall();
requestAnimationFrame(gameLoop);
}
// کنترل‌های صفحه‌کلید
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
player2.dy = -player2.speed;
break;
case 'ArrowDown':
player2.dy = player2.speed;
break;
case 'ArrowLeft':
player2.dx = -player2.speed;
break;
case 'ArrowRight':
player2.dx = player2.speed;
break;
case 'w':
player1.dy = -player1.speed;
break;
case 's':
player1.dy = player1.speed;
break;
case 'a':
player1.dx = -player1.speed;
break;
case 'd':
player1.dx = player1.speed;
break;
}
});
document.addEventListener('keyup', (e) => {
switch (e.key) {
case 'ArrowUp':
case 'ArrowDown':
player2.dy = 0;
break;
case 'ArrowLeft':
case 'ArrowRight':
player2.dx = 0;
break;
case 'w':
case 's':
player1.dy = 0;
break;
case 'a':
case 'd':
player1.dx = 0;
break;
}
});
// شروع بازی
gameLoop();
```
### نحوه اجرای پروژه:
1. فایل‌های `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
### نتیجه‌گیری
این پروژه یک بازی ساده نبرد گل دو نفره است که شامل حرکت بازیکنان، کنترل توپ و گل‌زنی می‌باشد. شما میتوانید با اضافه کردن ویژگی‌های جدید مانند اضافه کردن موانع، بهبود گرافیک، یا اضافه کردن سطوح مختلف، بازی را گسترش دهید. همچنین میتوانید قوانین بیشتری مانند زمان‌بندی یا امتیازگذاری را برای بازی اضافه کنید تا تجربه بازی جذاب‌تر شود.
| صفحه قابل مشاهده:
دانلود پروژه بازی نبرد گل (Goal Battle) با استفاده از JavaScript می‌باشد
