کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
ساخت بازی "گرفتن میوه‌ها" (Catch The Fruit Game) با استفاده از JavaScript یک پروژه سرگرم‌کننده است که به شما کمک می‌کند تا نحوه کار با انیمیشن‌ها و تعامل کاربر با صفحه را بهتر درک کنید. در این بازی، میوه‌ها از بالای صفحه سقوط می‌کنند و بازیکن باید با استفاده از یک سبد آن‌ها را بگیرد.
### مراحل پیاده‌سازی پروژه
#### ۱. ساختار پروژه
ابتدا یک پوشه جدید به نام `catch-the-fruit-game` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `styles.css` و `script.js` بسازید.
#### ۲. ایجاد فایل HTML
**index.html**:
```html
بازی گرفتن میوه‌ها
```
#### ۳. ایجاد فایل CSS
**styles.css**:
```css
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
.container {
position: relative;
}
#gameCanvas {
background-color: #87CEEB;
border: 2px solid #333;
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
font-weight: bold;
color: #333;
}
```
#### ۴. پیاده‌سازی منطق بازی در JavaScript
**script.js**:
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 600;
let basket = {
x: canvas.width / 2 - 40,
y: canvas.height - 40,
width: 80,
height: 20,
dx: 5
};
let fruits = [];
let score = 0;
// ایجاد میوه جدید
function createFruit() {
const x = Math.random() * (canvas.width - 30);
fruits.push({ x: x, y: 0, width: 30, height: 30, dy: 3 });
}
// رسم سبد
function drawBasket() {
ctx.fillStyle = '#8B4513';
ctx.fillRect(basket.x, basket.y, basket.width, basket.height);
}
// رسم میوه‌ها
function drawFruits() {
ctx.fillStyle = '#FF6347';
fruits.forEach(fruit => {
ctx.beginPath();
ctx.arc(fruit.x + fruit.width / 2, fruit.y + fruit.height / 2, fruit.width / 2, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
});
}
// به‌روزرسانی موقعیت میوه‌ها
function updateFruits() {
fruits.forEach(fruit => {
fruit.y += fruit.dy;
// بررسی برخورد با سبد
if (
fruit.y + fruit.height > basket.y &&
fruit.x > basket.x &&
fruit.x < basket.x + basket.width
) {
score++;
document.getElementById('score').textContent = `امتیاز: ${score}`;
fruits.splice(fruits.indexOf(fruit), 1);
}
// حذف میوه‌ای که از صفحه رد شده است
if (fruit.y > canvas.height) {
fruits.splice(fruits.indexOf(fruit), 1);
}
});
}
// حرکت سبد
function moveBasket() {
if (rightPressed && basket.x + basket.width < canvas.width) {
basket.x += basket.dx;
}
if (leftPressed && basket.x > 0) {
basket.x -= basket.dx;
}
}
// مدیریت کلیدهای حرکت
let rightPressed = false;
let leftPressed = false;
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
rightPressed = true;
} else if (e.key === 'ArrowLeft') {
leftPressed = true;
}
});
document.addEventListener('keyup', (e) => {
if (e.key === 'ArrowRight') {
rightPressed = false;
} else if (e.key === 'ArrowLeft') {
leftPressed = false;
}
});
// به‌روزرسانی بازی
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBasket();
drawFruits();
updateFruits();
moveBasket();
requestAnimationFrame(update);
}
// ایجاد میوه‌ها به صورت متوالی
setInterval(createFruit, 1000);
// شروع بازی
update();
```
### توضیحات کد
1. **HTML**:
- شامل یک عنصر `
2. **CSS**:
- طراحی ساده برای نمایش بوم بازی و تنظیمات صفحه نمایش.
3. **JavaScript**:
- **سبد**: سبد بازیکن در پایین صفحه قرار دارد و با کلیدهای چپ و راست حرکت می‌کند.
- **میوه‌ها**: میوه‌ها به صورت تصادفی در عرض صفحه ایجاد می‌شوند و به سمت پایین حرکت می‌کنند.
- **برخورد**: اگر یک میوه به سبد برخورد کند، امتیاز بازیکن افزایش می‌یابد.
- **به‌روزرسانی موقعیت‌ها**: در هر فریم موقعیت سبد و میوه‌ها به‌روزرسانی می‌شود تا بازی به صورت روان پیش برود.
### نحوه اجرای پروژه
1. فایل‌ها را ذخیره کرده و سپس فایل `index.html` را در مرورگر خود باز کنید.
2. سبد را با کلیدهای جهتی چپ و راست کنترل کنید و سعی کنید تا جایی که ممکن است میوه‌های بیشتری را بگیرید.
### نتیجه‌گیری
این پروژه به شما کمک می‌کند تا با استفاده از JavaScript و عنصر `
| صفحه قابل مشاهده:
دانلود پروژه بازی "گرفتن میوه‌ها" (Catch The Fruit Game) با استفاده از JavaScript می‌باشد
