کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت بازی Contra با استفاده از JavaScript یک پروژه جالب و چالش‌برانگیز است که می‌تواند شما را با اصول برنامه‌نویسی بازی‌های اکشن، طراحی شخصیت، فیزیک حرکت، و برخورد با دشمنان آشنا کند. این نسخه ساده از بازی معروف Contra می‌تواند شامل حرکت شخصیت، تیراندازی، دشمنان و موانع باشد.
### توضیحات پروژه
در این بازی، کاربر نقش یک شخصیت جنگنده را برعهده دارد که باید از مسیر عبور کرده، به دشمنان شلیک کند و موانع را پشت سر بگذارد. طراحی بازی به‌صورت دوبعدی (2D) است و از HTML5 Canvas برای رسم عناصر بازی استفاده می‌شود.
### ویژگی‌های اصلی پروژه
1. **کنترل کاراکتر**: بازیکن می‌تواند شخصیت را به چپ و راست حرکت دهد، بپرد و شلیک کند.
2. **دشمنان و موانع**: دشمنانی وجود دارند که باید آن‌ها را از بین برد و از موانع عبور کرد.
3. **گرافیک ساده**: استفاده از اشکال ساده و تصاویر ابتدایی برای طراحی شخصیت، دشمنان و پس‌زمینه.
4. **بازی اکشن**: حرکات سریع و تیراندازی برای عبور از مراحل.
### کد منبع نمونه
#### ۱. ایجاد فایل HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:
```html
بازی Contra با جاوااسکریپت
بازی Contra ساده
```
#### ۲. ایجاد فایل 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: #2e2e2e;
color: white;
}
canvas {
border: 2px solid #000;
background-color: #87ceeb; /* آسمان */
}
```
#### ۳. ایجاد فایل JavaScript
یک فایل JavaScript به نام `script.js` ایجاد کنید و کد زیر را در آن قرار دهید:
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// تعریف شخصیت بازیکن
const player = {
x: 50,
y: canvas.height - 60,
width: 30,
height: 50,
speed: 5,
dx: 0,
dy: 0,
gravity: 1,
jumpPower: 15,
onGround: false,
};
// لیست گلوله‌ها
const bullets = [];
const bulletSpeed = 7;
// لیست دشمنان
const enemies = [
{ x: 400, y: canvas.height - 60, width: 30, height: 50, speed: 2 },
];
// رسم شخصیت بازیکن
function drawPlayer() {
ctx.fillStyle = 'red';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
// رسم دشمنان
function drawEnemies() {
enemies.forEach(enemy => {
ctx.fillStyle = 'green';
ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
});
}
// رسم گلوله‌ها
function drawBullets() {
ctx.fillStyle = 'yellow';
bullets.forEach(bullet => {
ctx.fillRect(bullet.x, bullet.y, 5, 5);
});
}
// به‌روزرسانی وضعیت بازیکن
function updatePlayer() {
player.x += player.dx;
// اعمال گرانش و به‌روزرسانی موقعیت عمودی بازیکن
if (!player.onGround) {
player.dy += player.gravity;
player.y += player.dy;
}
// برخورد با زمین
if (player.y + player.height >= canvas.height) {
player.y = canvas.height - player.height;
player.onGround = true;
player.dy = 0;
}
// جلوگیری از خارج شدن از صفحه
if (player.x < 0) {
player.x = 0;
} else if (player.x + player.width > canvas.width) {
player.x = canvas.width - player.width;
}
}
// به‌روزرسانی وضعیت گلوله‌ها
function updateBullets() {
bullets.forEach((bullet, index) => {
bullet.x += bulletSpeed;
// حذف گلوله اگر از صفحه خارج شد
if (bullet.x > canvas.width) {
bullets.splice(index, 1);
}
});
}
// به‌روزرسانی وضعیت دشمنان
function updateEnemies() {
enemies.forEach(enemy => {
enemy.x -= enemy.speed;
// برخورد با بازیکن
if (
player.x < enemy.x + enemy.width &&
player.x + player.width > enemy.x &&
player.y < enemy.y + enemy.height &&
player.y + player.height > enemy.y
) {
alert('شما باختید!');
document.location.reload();
}
});
}
// حلقه بازی
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
drawEnemies();
drawBullets();
updatePlayer();
updateBullets();
updateEnemies();
requestAnimationFrame(gameLoop);
}
// کنترل‌های صفحه‌کلید
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
player.dx = player.speed;
} else if (e.key === 'ArrowLeft') {
player.dx = -player.speed;
} else if (e.key === ' ') {
if (player.onGround) {
player.dy = -player.jumpPower;
player.onGround = false;
}
} else if (e.key === 'f' || e.key === 'F') {
// شلیک گلوله
bullets.push({ x: player.x + player.width, y: player.y + player.height / 2 });
}
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
player.dx = 0;
}
});
// شروع بازی
gameLoop();
```
### نحوه اجرای پروژه:
1. فایل‌های `index.html`، `style.css` و `script.js` را در یک پوشه قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
### نتیجه‌گیری
این پروژه نسخه ساده‌ای از بازی Contra است که شامل حرکت شخصیت، پرش، تیراندازی و مدیریت دشمنان می‌باشد. شما میتوانید با اضافه کردن ویژگی‌های جدید مانند سطوح مختلف، دشمنان بیشتر، و یا بهبود گرافیک بازی، آن را گسترش دهید. همچنین میتوانید به بازی قابلیت‌های بیشتری مانند جمع‌آوری امتیاز یا سلاح‌های پیشرفته اضافه کنید تا جذاب‌تر شود.
| صفحه قابل مشاهده:
دانلود پروژه بازی Contra با استفاده از JavaScript می‌باشد
