مرجع تخصصی پروژه ها و فایل ها

جزئیات محصول

دانلود پروژه **بازی رنگ RGB** با استفاده از HTML، CSS و JavaScript

دانلود پروژه **بازی رنگ RGB** با استفاده از HTML، CSS و JavaScript

قیمت: 80,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر  بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



 در اینجا یک پروژه ساده برای ایجاد یک **بازی رنگ RGB** با استفاده از HTML، CSS و JavaScript ارائه شده است. در این بازی، کاربر باید رنگ صحیح را بر اساس مقادیر RGB نمایش داده شده انتخاب کند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
 
```html
   
   
    بازی رنگ RGB
   
   
       

بازی رنگ RGB

       

       
       
   
   
```
 
### 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;
}
 
h1 {
    color: #333;
}
 
#colorDisplay {
    font-size: 24px;
    margin: 20px 0;
}
 
#squareContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}
 
.square {
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
    border: 2px solid #fff;
}
 
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 colors = [];
const squareContainer = document.getElementById('squareContainer');
const colorDisplay = document.getElementById('colorDisplay');
const resetBtn = document.getElementById('resetBtn');
let pickedColor;
 
resetBtn.addEventListener('click', resetGame);
 
function resetGame() {
    colors.length = 0; // پاک کردن آرایه رنگ‌ها
    generateColors(6); // تولید 6 رنگ تصادفی
    pickedColor = pickColor(); // انتخاب رنگ تصادفی
    colorDisplay.textContent = pickedColor; // نمایش رنگ انتخابی
    displayColors(); // نمایش رنگ‌ها در صفحه
}
 
function generateColors(num) {
    for (let i = 0; i < num; i++) {
        colors.push(randomColor());
    }
}
 
function randomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}
 
function pickColor() {
    const randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
}
 
function displayColors() {
    squareContainer.innerHTML = ''; // پاک کردن محتوا قبلی
    colors.forEach(color => {
        const square = document.createElement('div');
        square.classList.add('square');
        square.style.backgroundColor = color;
        square.addEventListener('click', () => handleColorClick(color));
        squareContainer.appendChild(square);
    });
}
 
function handleColorClick(color) {
    if (color === pickedColor) {
        alert('شما برنده شدید!');
        changeAllColors(color); // تغییر رنگ همه مربع‌ها به رنگ انتخاب شده
    } else {
        alert('رنگ اشتباه است. دوباره تلاش کنید!');
        this.style.backgroundColor = '#f0f0f0'; // تغییر رنگ مربع به خاکستری
    }
}
 
function changeAllColors(color) {
    const squares = document.querySelectorAll('.square');
    squares.forEach(square => {
        square.style.backgroundColor = color;
    });
}
 
// شروع بازی
resetGame();
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، نمایش رنگ انتخاب شده، محلی برای نمایش رنگ‌ها و یک دکمه برای شروع دوباره بازی است.
2. **CSS**: طراحی ساده و جذاب با مربع‌های رنگی و دکمه زیبا.
3. **JavaScript**:
   - **تابع `resetGame`**: بازی را ریست می‌کند و رنگ‌های جدید تولید می‌کند.
   - **تابع `generateColors`**: تعدادی رنگ تصادفی تولید می‌کند.
   - **تابع `randomColor`**: یک رنگ تصادفی RGB ایجاد می‌کند.
   - **تابع `pickColor`**: یک رنگ تصادفی از آرایه رنگ‌ها انتخاب می‌کند.
   - **تابع `displayColors`**: رنگ‌ها را به عنوان مربع‌ها در صفحه نمایش می‌دهد.
   - **تابع `handleColorClick`**: بررسی می‌کند که آیا رنگ انتخاب شده درست است یا خیر و واکنش مناسب را نشان می‌دهد.
   - **تابع `changeAllColors`**: رنگ همه مربع‌ها را به رنگ انتخاب شده تغییر می‌دهد.
 
### نتیجه‌گیری
این بازی RGB می‌تواند به عنوان یک پروژه سرگرم‌کننده و آموزنده برای یادگیری JavaScript و کار با DOM در صفحات وب استفاده شود. شما می‌توانید ویژگی‌های بیشتری مانند سطح دشواری، زمان‌سنج یا تغییر رنگ‌ها را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی رنگ RGB** با استفاده از HTML، CSS و JavaScript می‌باشد