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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



ایجاد یک بازی **Color Game** با استفاده از **JavaScript**، **HTML** و **CSS** می‌تواند یک پروژه سرگرم‌کننده و آموزشی باشد. در این بازی، هدف بازیکن شناسایی رنگ درست از بین گزینه‌های ارائه شده است.
 
در ادامه، کد منبع این بازی را به همراه توضیحات ارائه می‌دهم.
 
### ساختار پروژه
ابتدا یک پوشه جدید به نام `color-game` ایجاد کرده و در آن سه فایل به نام‌های `index.html`، `style.css` و `script.js` بسازید.
 
### 1. کد HTML (`index.html`)
```html
   
   
    بازی رنگ‌ها
   
   
       

بازی رنگ‌ها

       

       
       

       
   
   
```
 
### 2. کد CSS (`style.css`)
```css
body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
 
.container {
    text-align: center;
}
 
h1 {
    color: #333;
}
 
#colorDisplay {
    font-size: 24px;
    margin: 20px 0;
}
 
.button {
    padding: 20px;
    margin: 10px;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}
 
#restartBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}
```
 
### 3. کد JavaScript (`script.js`)
```javascript
const colors = generateRandomColors(6);
const colorDisplay = document.getElementById('colorDisplay');
const colorButtons = document.getElementById('colorButtons');
const resultDisplay = document.getElementById('result');
const restartBtn = document.getElementById('restartBtn');
 
let pickedColor = pickColor();
 
colorDisplay.textContent = pickedColor;
 
colors.forEach(color => {
    const button = document.createElement('button');
    button.style.backgroundColor = color;
    button.classList.add('button');
    button.addEventListener('click', function() {
        if (this.style.backgroundColor === pickedColor) {
            resultDisplay.textContent = 'درست است!';
            changeColors(pickedColor);
        } else {
            resultDisplay.textContent = 'اشتباه است!';
            this.style.backgroundColor = '#f0f0f0'; // تغییر رنگ به خاکستری
        }
    });
    colorButtons.appendChild(button);
});
 
restartBtn.addEventListener('click', function() {
    reset();
});
 
function generateRandomColors(num) {
    const arr = [];
    for (let i = 0; i < num; i++) {
        arr.push(randomColor());
    }
    return arr;
}
 
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 random = Math.floor(Math.random() * colors.length);
    return colors[random];
}
 
function changeColors(color) {
    const buttons = document.querySelectorAll('.button');
    buttons.forEach(button => {
        button.style.backgroundColor = color;
    });
}
 
function reset() {
    colors.length = 0; // پاک کردن آرایه رنگ‌ها
    colors.push(...generateRandomColors(6)); // تولید رنگ‌های جدید
    pickedColor = pickColor(); // انتخاب رنگ جدید
    colorDisplay.textContent = pickedColor; // به‌روز رسانی متن رنگ
    resultDisplay.textContent = ''; // پاک کردن نتیجه
    colorButtons.innerHTML = ''; // پاک کردن دکمه‌ها
 
    colors.forEach(color => {
        const button = document.createElement('button');
        button.style.backgroundColor = color;
        button.classList.add('button');
        button.addEventListener('click', function() {
            if (this.style.backgroundColor === pickedColor) {
                resultDisplay.textContent = 'درست است!';
                changeColors(pickedColor);
            } else {
                resultDisplay.textContent = 'اشتباه است!';
                this.style.backgroundColor = '#f0f0f0'; // تغییر رنگ به خاکستری
            }
        });
        colorButtons.appendChild(button);
    });
}
```
 
### توضیحات کد
 
1. **HTML**:
   - شامل ساختار اصلی بازی است، از جمله عنوان، نمایش رنگ مورد نظر، دکمه‌های رنگ، نمایش نتیجه و دکمه‌ای برای شروع دوباره.
 
2. **CSS**:
   - استایل برای طراحی بازی، دکمه‌ها و دیگر عناصر بازی.
 
3. **JavaScript**:
   - **تولید رنگ‌ها**: با تابع `generateRandomColors` رنگ‌های تصادفی ایجاد می‌شود.
   - **انتخاب رنگ**: با تابع `pickColor` یک رنگ تصادفی انتخاب می‌شود که باید شناسایی شود.
   - **ایجاد دکمه‌ها**: برای هر رنگ یک دکمه ایجاد می‌شود و به آن گوش‌دهنده رویداد برای بررسی پاسخ بازیکن اضافه می‌شود.
   - **کنترل بازی**: اگر رنگ انتخاب شده درست باشد، پیغام "درست است!" نمایش داده می‌شود و رنگ تمام دکمه‌ها تغییر می‌کند. اگر اشتباه باشد، رنگ دکمه به خاکستری تغییر می‌کند.
   - **شروع دوباره**: با کلیک بر روی دکمه "شروع دوباره"، بازی ریست می‌شود و رنگ‌های جدید تولید می‌شوند.
 
### نحوه اجرای پروژه
1. فایل‌های `index.html`، `style.css` و `script.js` را ایجاد کرده و کدهای مربوطه را در آنها قرار دهید.
2. فایل `index.html` را در مرورگر خود باز کنید.
3. بازی را شروع کرده و سعی کنید رنگ درست را شناسایی کنید!
 
با این کدها می‌توانید یک بازی رنگ‌ها ساده بسازید و از آن لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **Color Game** با استفاده از **JavaScript**، **HTML** و **CSS** می‌باشد