کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
بازی **Jumping Dead** یک بازی جذاب و سرگرم‌کننده است که میتوانید آن را با استفاده از JavaScript و HTML5 Canvas ایجاد کنید. در این بازی، بازیکن کنترل یک شخصیت را بر عهده دارد که باید از موانع پرش کند و امتیاز کسب کند. هدف این بازی نجات شخصیت در برابر موانع و کسب امتیاز بیشتر است.
### ویژگی‌های اصلی پروژه
1. **گرافیک ساده**: استفاده از HTML5 Canvas برای رسم شخصیت و موانع.
2. **کنترل آسان**: با استفاده از کلید Spacebar میتوانید پرش کنید.
3. **امتیازدهی**: کسب امتیاز با عبور از موانع.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
یک پوشه جدید به نام `jumping-dead` ایجاد کرده و در آن دو فایل به نام‌های `index.html` و `game.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
بازی Jumping Dead
```
این کد HTML شامل یک بوم (canvas) برای رسم بازی و یک لینک به فایل JavaScript (`game.js`) است.
#### ۳. پیاده‌سازی منطق بازی در JavaScript
**game.js**:
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const character = {
x: 50,
y: 300,
width: 30,
height: 30,
dy: 0,
gravity: 0.5,
jumpPower: -10,
jumping: false
};
const obstacles = [];
let score = 0;
let gameOver = false;
// ایجاد موانع جدید
function createObstacle() {
const obstacle = {
x: canvas.width,
y: 350,
width: 20 + Math.random() * 30,
height: 30
};
obstacles.push(obstacle);
}
// رسم شخصیت
function drawCharacter() {
ctx.fillStyle = 'green';
ctx.fillRect(character.x, character.y, character.width, character.height);
}
// رسم موانع
function drawObstacles() {
ctx.fillStyle = 'red';
obstacles.forEach(obstacle => {
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
// مدیریت پرش
function jump() {
if (!character.jumping) {
character.dy = character.jumpPower;
character.jumping = true;
}
}
// حلقه بازی
function gameLoop() {
if (gameOver) {
ctx.fillStyle = 'black';
ctx.fillText('بازی تمام شد! امتیاز شما: ' + score, canvas.width / 2 - 100, canvas.height / 2);
return;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCharacter();
drawObstacles();
// گرانش
character.dy += character.gravity;
character.y += character.dy;
// جلوگیری از سقوط شخصیت به زیر زمین
if (character.y + character.height > canvas.height) {
character.y = canvas.height - character.height;
character.jumping = false;
character.dy = 0;
}
// ایجاد موانع با فواصل مشخص
if (Math.random() < 0.02) {
createObstacle();
}
// حرکت موانع
obstacles.forEach((obstacle, index) => {
obstacle.x -= 5; // سرعت حرکت موانع
// بررسی برخورد با شخصیت
if (
character.x < obstacle.x + obstacle.width &&
character.x + character.width > obstacle.x &&
character.y < obstacle.y + obstacle.height &&
character.y + character.height > obstacle.y
) {
gameOver = true; // اگر برخورد کرد، بازی تمام می‌شود
}
// افزایش امتیاز
if (obstacle.x + obstacle.width < 0) {
score++;
obstacles.splice(index, 1); // حذف مانع
}
});
requestAnimationFrame(gameLoop);
}
// کنترل پرش با کلید Space
window.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
jump();
}
});
// شروع بازی
gameLoop();
```
### توضیحات کد
1. **تنظیم بوم**: بوم بازی با ابعاد مشخص ایجاد شده و زمینه آن تنظیم می‌شود.
2. **تعریف شخصیت و موانع**: شامل موقعیت، ابعاد و ویژگی‌های شخصیت و موانع.
3. **ایجاد موانع جدید**: با استفاده از تابع `createObstacle`، موانع جدید ایجاد می‌شود.
4. **رسم شخصیت و موانع**: با استفاده از توابع `drawCharacter` و `drawObstacles`، شخصیت و موانع رسم می‌شوند.
5. **مدیریت پرش**: با استفاده از تابع `jump`، شخصیت به بالا پرش می‌کند.
6. **حلقه بازی**: با استفاده از `requestAnimationFrame`، تابع `gameLoop` به‌طور مداوم اجرا می‌شود و وضعیت بازی را به‌روزرسانی می‌کند.
7. **کنترل بازی**: با استفاده از رویداد `keydown`، بازیکن می‌تواند با فشار دادن کلید Space شخصیت را به بالا پرش دهد.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. با فشار دادن کلید Space، شخصیت را پرش دهید و از موانع عبور کنید.
### نتیجه‌گیری
این پروژه یک بازی ساده و سرگرم‌کننده به نام **Jumping Dead** را با استفاده از JavaScript و HTML5 Canvas ایجاد می‌کند. شما میتوانید این پروژه را با افزودن ویژگی‌های بیشتر مانند سطوح مختلف، تم‌های مختلف، یا گرافیک زیباتر گسترش دهید. این پروژه به شما در یادگیری مفاهیم اولیه توسعه بازی‌های وب کمک خواهد کرد و به شما امکان می‌دهد تا خلاقیت خود را در طراحی بازی به کار ببرید.
| صفحه قابل مشاهده:
دانلود پروژه بازی **Jumping Dead* می‌باشد
