کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **بازی سیل (Flood Game)** با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، هدف این است که رنگ یک خانه را تغییر دهید تا با رنگ خانه‌های مجاور هم‌خوانی داشته باشد و تمام خانه‌ها را با یک رنگ پر کنید.
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
```html
بازی سیل (Flood Game)
```
### 2. **CSS**
سپس از CSS برای طراحی ظاهر بازی استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
#board {
display: grid;
grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(10, 50px);
gap: 2px;
margin-bottom: 20px;
}
.cell {
width: 50px;
height: 50px;
cursor: pointer;
}
#colorPalette {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.color {
width: 30px;
height: 30px;
margin: 0 5px;
cursor: pointer;
border: 1px solid #333;
border-radius: 5px;
}
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;
}
```
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. در این کد، ما یک شبکه از خانه‌ها ایجاد می‌کنیم که رنگ آن‌ها قابل تغییر است.
```javascript
const board = document.getElementById('board');
const colorPalette = document.getElementById('colorPalette');
const resetBtn = document.getElementById('resetBtn');
const message = document.getElementById('message');
let selectedColor = 'red';
const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange'];
// ایجاد شبکه خانه‌ها
function createBoard() {
for (let i = 0; i < 100; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.style.backgroundColor = getRandomColor();
cell.addEventListener('click', () => changeColor(i));
board.appendChild(cell);
}
}
// تغییر رنگ خانه‌ها
function changeColor(index) {
const cells = document.querySelectorAll('.cell');
const targetColor = cells[index].style.backgroundColor;
floodFill(cells, index, targetColor, selectedColor);
checkWin(cells);
}
// الگوریتم پر کردن سیل
function floodFill(cells, index, targetColor, newColor) {
if (cells[index].style.backgroundColor !== targetColor) return;
cells[index].style.backgroundColor = newColor;
if (index % 10 !== 0) floodFill(cells, index - 1, targetColor, newColor); // چپ
if (index % 10 !== 9) floodFill(cells, index + 1, targetColor, newColor); // راست
if (index - 10 >= 0) floodFill(cells, index - 10, targetColor, newColor); // بالا
if (index + 10 < cells.length) floodFill(cells, index + 10, targetColor, newColor); // پایین
}
// بررسی پیروزی
function checkWin(cells) {
const firstColor = cells[0].style.backgroundColor;
const allSameColor = Array.from(cells).every(cell => cell.style.backgroundColor === firstColor);
if (allSameColor) {
message.textContent = 'تبریک! شما برنده شدید!';
}
}
// ایجاد پالت رنگ
function createColorPalette() {
colors.forEach(color => {
const colorDiv = document.createElement('div');
colorDiv.classList.add('color');
colorDiv.style.backgroundColor = color;
colorDiv.addEventListener('click', () => selectColor(color));
colorPalette.appendChild(colorDiv);
});
}
// انتخاب رنگ
function selectColor(color) {
selectedColor = color;
}
// ایجاد بازی دوباره
resetBtn.addEventListener('click', () => {
board.innerHTML = '';
message.textContent = '';
createBoard();
});
// رنگ تصادفی برای خانه‌ها
function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}
// شروع بازی
createBoard();
createColorPalette();
```
### توضیحات کد:
1. **HTML**: شامل یک شبکه از خانه‌ها، پالت رنگ‌ها، یک دکمه برای شروع دوباره بازی و یک پیام برای اعلام برنده است.
2. **CSS**: طراحی صفحه با استفاده از گرید برای نمایش خانه‌ها و طراحی دکمه و رنگ‌ها.
3. **JavaScript**:
- **تابع `createBoard`**: شبکه‌ای از 100 خانه ایجاد می‌کند و رنگ‌های تصادفی به آن‌ها اختصاص می‌دهد.
- **تابع `changeColor`**: رنگ خانه کلیک شده را تغییر می‌دهد و از الگوریتم `floodFill` برای تغییر رنگ خانه‌های مجاور استفاده می‌کند.
- **تابع `floodFill`**: الگوریتم پر کردن سیل که رنگ خانه‌ها را بر اساس رنگ انتخابی تغییر می‌دهد.
- **تابع `checkWin`**: بررسی می‌کند که آیا همه خانه‌ها به یک رنگ تغییر کرده‌اند یا خیر.
- **تابع `createColorPalette`**: پالت رنگ‌ها را ایجاد می‌کند و امکان انتخاب رنگ را به کاربر می‌دهد.
- **تابع `selectColor`**: رنگ انتخابی را تنظیم می‌کند.
- **تابع `getRandomColor`**: یک رنگ تصادفی از لیست رنگ‌ها برمی‌گرداند.
- **رویداد کلیک برای دکمه `resetBtn`**: بازی را دوباره راه‌اندازی می‌کند.
### نتیجه‌گیری
این بازی سیل یک پروژه سرگرم‌کننده و آموزنده برای یادگیری JavaScript و کار با DOM در صفحات وب است. شما میتوانید ویژگی‌های بیشتری مانند سطح دشواری، زمان‌سنج یا حالت‌های مختلف بازی را به این پروژه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه **بازی سیل (Flood Game)** با استفاده از HTML، CSS و JavaScript می‌باشد
