کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه: بازی رنگ‌آمیزی سیلاب (Flood Color) در JavaScript با کد منبع
**بازی Flood Color** یک پروژه ساده و جذاب است که با استفاده از **JavaScript**، **HTML** و **CSS** ساخته شده است. هدف از این بازی، پر کردن صفحه با یک رنگ واحد از طریق انتخاب رنگ‌های هم‌جوار است تا تمامی صفحه به یک رنگ تبدیل شود. این بازی مشابه بازی‌های کلاسیکی است که شما باید با کمترین تعداد حرکت، صفحه را یکپارچه رنگ‌آمیزی کنید.
### ویژگی‌های بازی:
1. **رابط کاربری ساده**: بازی دارای رابط کاربری مینیمالیستی و آسان برای درک است.
2. **چالش‌های متنوع**: بازیکن باید با انتخاب مناسب رنگ‌ها در کمترین تعداد حرکت، تمام صفحه را با یک رنگ پر کند.
3. **الگوریتم هوشمند**: از الگوریتمی استفاده می‌شود که به کاربران امکان می‌دهد به‌طور مؤثری منطقه‌ی انتخابی را با رنگ دلخواه خود گسترش دهند.
### نحوه اجرای پروژه:
1. **دانلود پروژه**: فایل‌های پروژه را از لینک موجود دانلود کنید.
2. **اجرای بازی**: فایل `index.html` را با مرورگر خود باز کنید. برای بهترین تجربه، از مرورگرهای مدرن مانند **Google Chrome** یا **Mozilla Firefox** استفاده کنید.
### کد منبع:
#### کد HTML (index.html)
```html
بازی رنگ‌آمیزی سیلاب
```
#### کد CSS (style.css)
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#game-container {
display: flex;
flex-direction: column;
align-items: center;
}
#color-palette {
margin-bottom: 10px;
}
button {
margin: 2px;
width: 40px;
height: 40px;
border: none;
cursor: pointer;
}
```
#### کد JavaScript (script.js)
```javascript
const canvas = document.getElementById('floodGame');
const ctx = canvas.getContext('2d');
const boxSize = 40; // اندازه هر مربع
const rows = 10;
const cols = 10;
let grid = [];
let currentColor = null;
// رنگ‌های مختلف
const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange'];
// ایجاد شبکه اولیه
function createGrid() {
for (let i = 0; i < rows; i++) {
grid[i] = [];
for (let j = 0; j < cols; j++) {
grid[i][j] = colors[Math.floor(Math.random() * colors.length)];
}
}
}
// رسم شبکه
function drawGrid() {
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
ctx.fillStyle = grid[i][j];
ctx.fillRect(j * boxSize, i * boxSize, boxSize, boxSize);
ctx.strokeStyle = 'white';
ctx.strokeRect(j * boxSize, i * boxSize, boxSize, boxSize);
}
}
}
// انتخاب رنگ
function floodFill(x, y, targetColor, replacementColor) {
if (targetColor === replacementColor) return;
if (grid[x][y] !== targetColor) return;
grid[x][y] = replacementColor;
if (x > 0) floodFill(x - 1, y, targetColor, replacementColor);
if (x < rows - 1) floodFill(x + 1, y, targetColor, replacementColor);
if (y > 0) floodFill(x, y - 1, targetColor, replacementColor);
if (y < cols - 1) floodFill(x, y + 1, targetColor, replacementColor);
}
// تنظیم پالت رنگ
function createColorPalette() {
const palette = document.getElementById('color-palette');
colors.forEach(color => {
const button = document.createElement('button');
button.style.backgroundColor = color;
button.addEventListener('click', () => {
currentColor = color;
floodFill(0, 0, grid[0][0], currentColor);
drawGrid();
});
palette.appendChild(button);
});
}
// راه‌اندازی بازی
function init() {
createGrid();
drawGrid();
createColorPalette();
}
init();
```
### توضیحات اضافی:
- **روش بازی**: بازیکن باید رنگی را از پالت انتخاب کند تا رنگ‌های هم‌جوار با رنگ اولیه را تغییر دهد. هدف این است که تمام صفحه را با یک رنگ واحد پر کنید.
- **الگوریتم Flood Fill**: در این بازی از الگوریتم **Flood Fill** استفاده شده است که شبیه به عملکرد ابزار سطل رنگ در نرم‌افزارهای ویرایش تصویر است.
- **افزایش چالش**: بازیکن باید سعی کند با کمترین تعداد حرکت ممکن صفحه را به‌طور کامل رنگ‌آمیزی کند.
### نتیجه‌گیری:
**بازی رنگ‌آمیزی سیلاب (Flood Color)** یک پروژه سرگرم‌کننده و آموزشی است که به کمک آن میتوانید مهارت‌های برنامه‌نویسی جاوااسکریپت خود را تقویت کنید. این بازی می‌تواند شما را با مفاهیمی مانند الگوریتم‌های بازگشتی و مدیریت حالت‌های مختلف در بازی آشنا کند. همچنین، میتوانید با افزودن ویژگی‌های جدید مانند محدودیت زمانی یا محدودیت حرکت‌ها، بازی را جذاب‌تر و چالش‌برانگیزتر کنید.
| صفحه قابل مشاهده:
دانلود پروژه بازی رنگ‌آمیزی سیلاب (Flood Color) در JavaScript با کد منبع می‌باشد
