کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
بازی **Stick Hero** یک بازی ساده و جذاب است که میتوانید آن را با استفاده از JavaScript و HTML5 Canvas بسازید. هدف این بازی این است که شخصیت چوبی (Stick Hero) به طور صحیح بر روی سکویی قرار گیرد که با طول متغیر از آن طرف به طرف دیگر می‌رسد. بازیکن باید طول چوب را به درستی تنظیم کند تا شخصیت بتواند به سکوی بعدی بپرد.
### ویژگی‌های اصلی پروژه
1. **گرافیک ساده**: استفاده از HTML5 Canvas برای رسم شخصیت و سکوی بازی.
2. **کنترل آسان**: با استفاده از یک کلیک، طول چوب تنظیم می‌شود.
3. **امتیازدهی**: جمع‌آوری امتیاز با موفقیت در پرش.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
یک پوشه جدید به نام `stick-hero` ایجاد کرده و داخل آن دو فایل به نام‌های `index.html` و `game.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
بازی Stick Hero
```
این کد HTML شامل یک بوم (canvas) برای رسم بازی و یک لینک به فایل JavaScript (`game.js`) است.
#### ۳. پیاده‌سازی منطق بازی در JavaScript
**game.js**:
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let stickLength = 0;
let stickGrowing = false;
let platforms = [];
let score = 0;
let gameOver = false;
// ایجاد سکوی اولیه
function createPlatform() {
const platform = {
x: canvas.width,
y: canvas.height - 50,
width: Math.random() * 300 + 100, // عرض سکوی تصادفی
height: 10
};
platforms.push(platform);
}
// رسم سکوی بازی
function drawPlatforms() {
ctx.fillStyle = 'black';
platforms.forEach(platform => {
ctx.fillRect(platform.x, platform.y, platform.width, platform.height);
});
}
// رسم چوب
function drawStick() {
ctx.fillStyle = 'red';
ctx.fillRect(100, canvas.height - 50, stickLength, 10);
}
// بازنشانی بازی
function resetGame() {
stickLength = 0;
stickGrowing = false;
platforms = [];
score = 0;
gameOver = false;
createPlatform();
}
// تابع بازی
function gameLoop() {
if (gameOver) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlatforms();
drawStick();
if (stickGrowing) {
stickLength += 5;
}
// چک کردن برخورد
platforms.forEach(platform => {
if (platform.x < 100 + stickLength && platform.x + platform.width > 100 && !gameOver) {
if (platform.y >= canvas.height - 60) {
score++;
stickGrowing = false;
createPlatform();
}
} else if (platform.x < 100 + stickLength && platform.x + platform.width > 100) {
gameOver = true;
alert('بازی تمام شد! امتیاز شما: ' + score);
resetGame();
}
});
// حرکت سکوی بازی به سمت چپ
platforms.forEach(platform => {
platform.x -= 5; // سرعت حرکت سکوی بازی
});
// حذف سکوی خارج از بوم
if (platforms.length > 0 && platforms[0].x < -platforms[0].width) {
platforms.shift();
}
requestAnimationFrame(gameLoop);
}
// شروع افزایش طول چوب
window.addEventListener('mousedown', () => {
stickGrowing = true;
});
// توقف افزایش طول چوب
window.addEventListener('mouseup', () => {
stickGrowing = false;
});
// ایجاد سکوی اولیه و شروع بازی
resetGame();
createPlatform();
gameLoop();
```
### توضیحات کد
1. **تنظیم بوم**: بوم بازی با ابعاد مشخص ایجاد شده و زمینه آن تنظیم می‌شود.
2. **تعریف متغیرها**: شامل طول چوب، سکوی بازی، امتیاز و وضعیت بازی.
3. **ایجاد سکوی اولیه**: با استفاده از تابع `createPlatform`، سکوی جدید با عرض تصادفی ایجاد می‌شود.
4. **رسم سکوی بازی و چوب**: با استفاده از توابع `drawPlatforms` و `drawStick`، سکوی بازی و چوب رسم می‌شوند.
5. **مدیریت برخورد**: با بررسی موقعیت چوب و سکوی بازی، تشخیص می‌دهیم که آیا بازیکن موفق به پرش شده یا نه. در صورت موفقیت، امتیاز افزایش می‌یابد و سکوی جدید ایجاد می‌شود.
6. **کنترل بازی**: با استفاده از رویدادهای ماوس (`mousedown` و `mouseup`)، طول چوب را تنظیم می‌کنیم.
7. **حلقه بازی**: با استفاده از `requestAnimationFrame`، تابع `gameLoop` به‌طور مداوم اجرا می‌شود و وضعیت بازی را به‌روزرسانی می‌کند.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. با کلیک و نگه‌داشتن ماوس، طول چوب را افزایش دهید و با رها کردن آن، چوب را در سکوی بعدی قرار دهید.
### نتیجه‌گیری
این پروژه یک بازی ساده و سرگرم‌کننده به نام **Stick Hero** را با استفاده از JavaScript و HTML5 Canvas ایجاد می‌کند. شما میتوانید این پروژه را با افزودن ویژگی‌های بیشتر مانند سطوح مختلف، تم‌های مختلف، یا گرافیک زیباتر گسترش دهید. این پروژه به شما در یادگیری مفاهیم اولیه توسعه بازی‌های وب کمک خواهد کرد و به شما امکان می‌دهد تا خلاقیت خود را در طراحی بازی به کار ببرید.
| صفحه قابل مشاهده:
دانلود پروژه بازی **Stick Hero** می‌باشد
