کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **بازی حباب‌شکن** با استفاده از HTML، 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: #e0f7fa;
}
canvas {
border: 2px solid #333;
background-color: #ffffff;
}
button {
margin-top: 20px;
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;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. این کد شامل مدیریت حباب‌ها، شلیک حباب و بررسی برخوردها است.
```javascript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
let bubbles = [];
let shooterBubble;
let gameInterval;
// ایجاد حباب‌های اولیه
function createInitialBubbles() {
for (let row = 0; row < 6; row++) {
bubbles[row] = [];
for (let col = 0; col < 10; col++) {
const color = colors[Math.floor(Math.random() * colors.length)];
bubbles[row][col] = { color: color, status: true };
}
}
}
// حباب شلیک شده
function createShooterBubble() {
const randomColor = colors[Math.floor(Math.random() * colors.length)];
shooterBubble = { x: canvas.width / 2, y: canvas.height - 30, color: randomColor, radius: 15 };
}
// رسم حباب‌ها
function drawBubbles() {
for (let row = 0; row < bubbles.length; row++) {
for (let col = 0; col < bubbles[row].length; col++) {
if (bubbles[row][col].status) {
ctx.beginPath();
ctx.arc(col * 70 + 35, row * 50 + 50, 20, 0, Math.PI * 2);
ctx.fillStyle = bubbles[row][col].color;
ctx.fill();
ctx.closePath();
}
}
}
}
// رسم حباب شلیک شده
function drawShooterBubble() {
ctx.beginPath();
ctx.arc(shooterBubble.x, shooterBubble.y, shooterBubble.radius, 0, Math.PI * 2);
ctx.fillStyle = shooterBubble.color;
ctx.fill();
ctx.closePath();
}
// شلیک حباب
function shootBubble() {
shooterBubble.y -= 5;
// بررسی برخورد با حباب‌ها
for (let row = 0; row < bubbles.length; row++) {
for (let col = 0; col < bubbles[row].length; col++) {
const bubble = bubbles[row][col];
if (bubble.status) {
const distance = Math.sqrt((shooterBubble.x - (col * 70 + 35)) ** 2 + (shooterBubble.y - (row * 50 + 50)) ** 2);
if (distance < shooterBubble.radius + 20) {
bubble.color = shooterBubble.color;
shooterBubble.y = canvas.height - 30; // بازنشانی حباب شلیک شده
return;
}
}
}
}
// بازنشانی حباب اگر به پایین برسد
if (shooterBubble.y < 0) {
shooterBubble.y = canvas.height - 30;
}
}
// حذف حباب‌های هم‌رنگ
function removeBubbles() {
// منطق حذف حباب‌های هم‌رنگ
for (let row = 0; row < bubbles.length; row++) {
for (let col = 0; col < bubbles[row].length; col++) {
if (bubbles[row][col].status) {
const currentColor = bubbles[row][col].color;
let connected = [];
function searchConnected(r, c) {
if (r < 0 || r >= bubbles.length || c < 0 || c >= bubbles[r].length) return;
if (!bubbles[r][c].status || bubbles[r][c].color !== currentColor) return;
connected.push({ row: r, col: c });
bubbles[r][c].status = false; // علامت زدن به عنوان حذف شده
searchConnected(r - 1, c); // بالا
searchConnected(r + 1, c); // پایین
searchConnected(r, c - 1); // چپ
searchConnected(r, c + 1); // راست
}
searchConnected(row, col);
if (connected.length >= 3) {
connected.forEach(b => {
bubbles[b.row][b.col].status = false; // حذف حباب‌ها
});
} else {
connected.forEach(b => {
bubbles[b.row][b.col].status = true; // بازگردانی حباب‌ها
});
}
}
}
}
}
// تابع اصلی بازی
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBubbles();
drawShooterBubble();
shootBubble();
removeBubbles();
}
// شروع بازی
function startGame() {
createInitialBubbles();
createShooterBubble();
gameInterval = setInterval(gameLoop, 100);
}
// شروع بازی با کلیک روی دکمه
document.getElementById('startBtn').addEventListener('click', startGame);
```
### توضیحات کد:
1. **HTML**: شامل یک `canvas` برای رسم بازی و یک دکمه برای شروع بازی است.
2. **CSS**: طراحی ساده برای صفحه بازی و دکمه.
3. **JavaScript**:
- **تابع `createInitialBubbles`**: حباب‌های اولیه را تولید می‌کند.
- **تابع `createShooterBubble`**: حباب شلیک شده را تولید می‌کند.
- **تابع `drawBubbles`**: حباب‌ها را روی صفحه رسم می‌کند.
- **تابع `drawShooterBubble`**: حباب شلیک شده را رسم می‌کند.
- **تابع `shootBubble`**: منطق شلیک حباب و بررسی برخورد با حباب‌ها.
- **تابع `removeBubbles`**: منطق حذف حباب‌های هم‌رنگ را پیاده‌سازی می‌کند.
- **تابع `gameLoop`**: حلقه اصلی بازی که به طور مداوم صفحه را به روز می‌کند.
- **تابع `startGame`**: بازی را آغاز می‌کند و حلقه بازی را شروع می‌کند.
### نتیجه‌گیری
این پروژه ساده یک بازی حباب‌شکن است که می‌تواند به عنوان یک ابزار سرگرم‌کننده و همچنین تمرینی برای یادگیری JavaScript و کار با canvas HTML استفاده شود. شما میتوانید ویژگی‌های بیشتری مانند امتیازدهی، سطح دشواری و طراحی‌های بهتر را به این بازی اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه *بازی حباب‌شکن** با استفاده از HTML، CSS و JavaScript می‌باشد
