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

جزئیات محصول

دانلود پروژه بازی **سنگ، کاغذ، قیچی (Rock, Paper, Scissors)** با استفاده از HTML، CSS و JavaScript

دانلود پروژه بازی **سنگ، کاغذ، قیچی (Rock, Paper, Scissors)** با استفاده از HTML، CSS و JavaScript

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

خرید فایل


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

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

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

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




در اینجا یک پروژه ساده برای ایجاد بازی **سنگ، کاغذ، قیچی (Rock, Paper, Scissors)** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا با کامپیوتر بازی کنند و نتایج را مشاهده کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای بازی ایجاد می‌کنیم.
 
```html
   
   
    بازی سنگ، کاغذ، قیچی
   
   
       

بازی سنگ، کاغذ، قیچی

       
           
           
           
       
       
       
   
   
```
 
### 2. **CSS**
برای طراحی ظاهری بازی از CSS استفاده می‌کنیم.
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}
 
h1 {
    margin-bottom: 20px;
}
 
.choices {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
 
.choice {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    flex: 1;
    margin: 0 5px;
}
 
.choice:hover {
    background-color: #0056b3;
}
 
#result {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}
 
#playAgainBtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
}
```
 
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل انتخاب‌های کاربر و کامپیوتر، بررسی برنده و مدیریت وضعیت بازی است.
 
```javascript
const choices = document.querySelectorAll('.choice');
const resultDiv = document.getElementById('result');
const playAgainBtn = document.getElementById('playAgainBtn');
 
// انتخاب تصادفی از بین سنگ، کاغذ و قیچی
function getComputerChoice() {
    const options = ['rock', 'paper', 'scissors'];
    const randomIndex = Math.floor(Math.random() * options.length);
    return options[randomIndex];
}
 
// بررسی برنده
function determineWinner(userChoice, computerChoice) {
    if (userChoice === computerChoice) {
        return 'تساوی!';
    } else if (
        (userChoice === 'rock' && computerChoice === 'scissors') ||
        (userChoice === 'paper' && computerChoice === 'rock') ||
        (userChoice === 'scissors' && computerChoice === 'paper')
    ) {
        return 'شما برنده شدید!';
    } else {
        return 'کامپیوتر برنده شد!';
    }
}
 
// افزودن رویداد کلیک به دکمه‌ها
choices.forEach(choice => {
    choice.addEventListener('click', function() {
        const userChoice = this.dataset.choice;
        const computerChoice = getComputerChoice();
        
        const winner = determineWinner(userChoice, computerChoice);
        resultDiv.textContent = `شما: ${userChoice} | کامپیوتر: ${computerChoice} | نتیجه: ${winner}`;
 
        // مخفی کردن دکمه‌ها و نمایش دکمه بازی دوباره
        choices.forEach(c => c.style.display = 'none');
        playAgainBtn.style.display = 'block';
    });
});
 
// افزودن رویداد کلیک به دکمه بازی دوباره
playAgainBtn.addEventListener('click', function() {
    resultDiv.textContent = '';
    choices.forEach(c => c.style.display = 'block');
    playAgainBtn.style.display = 'none';
});
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، گزینه‌های بازی (سنگ، کاغذ، قیچی) و بخش نتیجه است.
2. **CSS**: طراحی ساده و زیبا برای ایجاد یک رابط کاربری کاربرپسند.
3. **JavaScript**:
   - **انتخاب کامپیوتر**: انتخاب تصادفی یکی از گزینه‌ها (سنگ، کاغذ، قیچی).
   - **بررسی برنده**: تعیین نتیجه بازی با توجه به انتخاب کاربر و کامپیوتر.
   - **مدیریت وضعیت**: نمایش نتیجه و مدیریت دکمه‌ها برای بازی دوباره.
 
### نتیجه‌گیری
این پروژه **بازی سنگ، کاغذ، قیچی** یک مثال عالی برای استفاده از مفاهیم JavaScript، مانند دستکاری DOM، رویدادهای کاربر و منطق شرطی است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند شمارش امتیاز یا افزودن ویژگی‌های چندنفره اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **سنگ، کاغذ، قیچی (Rock, Paper, Scissors)** با استفاده از HTML، CSS و JavaScript می‌باشد