کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه "بازی جنگ رنگ‌ها" با استفاده از JavaScript
بازی جنگ رنگ‌ها یک بازی سرگرم‌کننده است که در آن بازیکن باید رنگ‌ها را با استفاده از تیرک‌ها به سمت اهداف شلیک کند. این بازی با استفاده از HTML، CSS و JavaScript ساخته شده است و می‌تواند به راحتی در مرورگر اجرا شود.
#### ویژگی‌های پروژه:
- **گرافیک ساده:** طراحی ساده برای نمایش تیرک‌ها و اهداف.
- **کنترل آسان:** کاربر با استفاده از کلیدها می‌تواند تیرک‌ها را شلیک کند.
- **امتیازدهی:** کاربران می‌توانند امتیاز جمع‌آوری کنند.
- **جذاب و سرگرم‌کننده:** طراحی جذاب و کاربرپسند.
### راه‌اندازی پروژه
#### 1. ساختار فایل‌ها
ساختار پروژه به صورت زیر است:
```
paint-war-game/
├── index.html
├── styles.css
└── game.js
```
#### 2. کد منبع
##### فایل `index.html`
این فایل رابط کاربری بازی را ایجاد می‌کند:
```html
بازی جنگ رنگ‌ها
```
##### فایل `styles.css`
برای زیباسازی رابط کاربری استفاده می‌شود:
```css
body {
font-family: Arial, sans-serif;
background-color: #87CEEB; /* آبی آسمانی */
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.game-container {
position: relative;
width: 400px;
height: 600px;
border: 2px solid #333;
overflow: hidden;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
#shooter {
position: absolute;
bottom: 20px;
left: 175px; /* مرکز بازی */
width: 50px;
height: 50px;
background-color: #ffcc00; /* زرد */
}
.bullet {
position: absolute;
width: 5px;
height: 20px;
background-color: #ff5733; /* قرمز */
}
.target {
position: absolute;
width: 40px;
height: 40px;
font-size: 40px; /* اندازه هدف */
pointer-events: none; /* غیرفعال کردن تعامل */
}
```
##### فایل `game.js`
این فایل منطق بازی را پیاده‌سازی می‌کند:
```javascript
const shooter = document.getElementById('shooter');
const scoreElement = document.getElementById('score');
let score = 0;
// ایجاد هدف
function createTarget() {
const target = document.createElement('div');
target.classList.add('target');
target.innerText = '🎯'; // هدف
target.style.left = Math.random() * (400 - 40) + 'px'; // موقعیت تصادفی
target.style.top = '0px'; // شروع از بالا
document.body.appendChild(target);
moveTarget(target);
}
// حرکت هدف
function moveTarget(target) {
let position = 0;
const interval = setInterval(() => {
position += 2; // سرعت حرکت هدف
target.style.top = position + 'px';
// چک کردن برخورد با پایین صفحه
if (position > 600) {
clearInterval(interval);
target.remove();
}
}, 20);
}
// شلیک گلوله
function shootBullet() {
const bullet = document.createElement('div');
bullet.classList.add('bullet');
bullet.style.left = shooter.offsetLeft + 22.5 + 'px'; // مرکز تیرک
bullet.style.bottom = '70px'; // موقعیت اولیه گلوله
document.body.appendChild(bullet);
moveBullet(bullet);
}
// حرکت گلوله
function moveBullet(bullet) {
let position = 70;
const interval = setInterval(() => {
position += 5; // سرعت حرکت گلوله
bullet.style.bottom = position + 'px';
// چک کردن برخورد با هدف
const targets = document.querySelectorAll('.target');
targets.forEach(target => {
const targetRect = target.getBoundingClientRect();
const bulletRect = bullet.getBoundingClientRect();
// چک کردن برخورد
if (
bulletRect.x < targetRect.x + targetRect.width &&
bulletRect.x + bulletRect.width > targetRect.x &&
bulletRect.y < targetRect.y + targetRect.height &&
bulletRect.y + bulletRect.height > targetRect.y
) {
score++;
scoreElement.innerText = 'امتیاز: ' + score;
target.remove();
bullet.remove();
clearInterval(interval);
}
});
// چک کردن برخورد با پایین صفحه
if (position > 600) {
clearInterval(interval);
bullet.remove();
}
}, 20);
}
// کنترل تیرک با کیبورد
document.addEventListener('keydown', (event) => {
if (event.code === 'Space') {
shootBullet();
}
});
// ایجاد اهداف به صورت مداوم
setInterval(() => {
createTarget();
}, 2000); // هر 2 ثانیه یک هدف جدید
```
### 3. اجرای پروژه
برای اجرای پروژه، فقط کافی است فایل `index.html` را در مرورگر خود باز کنید. میتوانید به سادگی فایل را کشیده و در مرورگر رها کنید یا بر روی آن کلیک کنید.
### نتیجه‌گیری
این پروژه "بازی جنگ رنگ‌ها" به شما این امکان را می‌دهد که با اصول ساخت یک بازی ساده تحت وب با استفاده از HTML، CSS و JavaScript آشنا شوید. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند افزایش سرعت اهداف، سطوح مختلف، یا صدای شلیک اضافه کنید. این پروژه یک نقطه شروع عالی برای یادگیری توسعه بازی‌های تحت وب است.
| صفحه قابل مشاهده:
دانلود پروژه "بازی جنگ رنگ‌ها" با استفاده از JavaScript می‌باشد
