کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **بازی حباب‌زن** (Bubble Shooter) با استفاده از HTML5، CSS و JavaScript ارائه می‌شود. این بازی شامل حباب‌هایی است که بازیکن می‌تواند با تیرک‌هایی که شلیک می‌کند، حباب‌ها را هدف قرار دهد و از بین ببرد.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
```html
بازی حباب‌زن
بازی حباب‌زن
```
### 2. **CSS**
سپس از CSS برای طراحی صفحه بازی استفاده می‌کنیم.
```css
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
#gameCanvas {
border: 2px solid #333;
background-color: #fff;
}
.controls {
margin-top: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#score {
margin-top: 10px;
font-size: 18px;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. این کد شامل مدیریت حباب‌ها و تیرها، و همچنین بررسی برخوردها و امتیازدهی است.
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const startButton = document.getElementById('startBtn');
const scoreElement = document.getElementById('score');
canvas.width = 480;
canvas.height = 640;
let score = 0;
let bubbles = [];
let shooterAngle = Math.PI / 2; // زاویه شلیک
// تعریف کلاس حباب
class Bubble {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.radius = 20;
this.color = color;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
}
// ایجاد حباب‌های اولیه
function createBubbles() {
const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple'];
for (let y = 0; y < 6; y++) {
for (let x = 0; x < 8; x++) {
const bubbleX = x * 60 + 30; // فاصله حباب‌ها
const bubbleY = y * 40 + 30;
const color = colors[Math.floor(Math.random() * colors.length)];
bubbles.push(new Bubble(bubbleX, bubbleY, color));
}
}
}
// ترسیم حباب‌ها
function drawBubbles() {
for (const bubble of bubbles) {
bubble.draw();
}
}
// شلیک حباب
function shootBubble() {
const bubble = new Bubble(canvas.width / 2, canvas.height - 30, 'red');
const shootInterval = setInterval(() => {
bubble.y -= 5; // حرکت حباب به سمت بالا
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBubbles();
bubble.draw();
// بررسی برخورد با حباب‌ها
for (let i = bubbles.length - 1; i >= 0; i--) {
const b = bubbles[i];
if (Math.hypot(bubble.x - b.x, bubble.y - b.y) < bubble.radius + b.radius) {
bubbles.splice(i, 1); // حذف حباب برخورد کرده
score += 10; // افزایش امتیاز
scoreElement.innerText = `امتیاز: ${score}`;
clearInterval(shootInterval);
return;
}
}
// بررسی برخورد با دیوار
if (bubble.y < 0) {
clearInterval(shootInterval);
}
}, 1000 / 60); // 60 فریم در ثانیه
}
// شروع بازی
function startGame() {
score = 0;
scoreElement.innerText = `امتیاز: ${score}`;
bubbles = [];
createBubbles();
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBubbles();
shootBubble();
}
// ثبت رویداد کلیک
startButton.addEventListener('click', startGame);
```
### توضیحات کد:
1. **HTML**: شامل عنوان، بوم بازی، دکمه برای شروع بازی و نمایش امتیاز است.
2. **CSS**: طراحی ساده برای صفحه بازی و دکمه‌ها.
3. **JavaScript**:
- **متغیرها**: شامل بوم، ctx برای ترسیم، دکمه شروع، و امتیاز.
- **کلاس `Bubble`**: برای تعریف حباب‌ها و ترسیم آن‌ها.
- **تابع `createBubbles`**: حباب‌های اولیه را ایجاد می‌کند.
- **تابع `drawBubbles`**: حباب‌ها را ترسیم می‌کند.
- **تابع `shootBubble`**: شلیک حباب و بررسی برخورد با حباب‌های دیگر.
- **تابع `startGame`**: بازی را راه‌اندازی می‌کند و حباب‌های جدید را ایجاد می‌کند.
- **رویداد کلیک**: برای شروع بازی.
### نتیجه‌گیری
این پروژه یک بازی حباب‌زن ساده است که می‌تواند به عنوان ابزاری سرگرم‌کننده و همچنین تمرینی برای یادگیری JavaScript و کار با HTML5 Canvas استفاده شود. شما میتوانید ویژگی‌های بیشتری مانند سطوح مختلف، انواع مختلف حباب‌ها و غیره را به این بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی حباب‌زن** (Bubble Shooter) با استفاده از HTML5، CSS و JavaScript می‌باشد
