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

جزئیات محصول

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

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

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

خرید فایل


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

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

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

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



 ### پروژه **بازی سنگ، کاغذ، قیچی (Rock Paper Scissors) با JavaScript**
 
این پروژه یک بازی کلاسیک سنگ، کاغذ، قیچی است که می‌توانید با استفاده از 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);
    width: 80%;
    max-width: 400px;
    text-align: center;
}
 
h1 {
    margin-bottom: 20px;
}
 
.choices {
    margin-bottom: 20px;
}
 
.choice {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    margin: 5px;
}
 
.result {
    margin-top: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}
 
#restartBtn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}
```
 
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم. این کد انتخاب کاربر را با انتخاب کامپیوتر مقایسه می‌کند و نتیجه را نمایش می‌دهد.
 
```javascript
// انتخاب‌های ممکن
const choices = ['rock', 'paper', 'scissors'];
 
// تابع برای انتخاب تصادفی کامپیوتر
function computerChoice() {
    const randomIndex = Math.floor(Math.random() * choices.length);
    return choices[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 'کامپیوتر برنده شد!';
    }
}
 
// افزودن رویداد کلیک به دکمه‌های انتخاب
document.querySelectorAll('.choice').forEach(button => {
    button.addEventListener('click', function() {
        const userChoice = this.getAttribute('data-choice');
        const compChoice = computerChoice();
        const result = determineWinner(userChoice, compChoice);
        
        // نمایش نتیجه
        document.getElementById('result').textContent = `شما انتخاب کردید: ${userChoice}, کامپیوتر انتخاب کرد: ${compChoice}. نتیجه: ${result}`;
        document.getElementById('restartBtn').style.display = 'block'; // نمایش دکمه شروع دوباره
    });
});
 
// افزودن رویداد کلیک به دکمه شروع دوباره
document.getElementById('restartBtn').addEventListener('click', function() {
    document.getElementById('result').textContent = '';
    this.style.display = 'none'; // مخفی کردن دکمه شروع دوباره
});
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، دکمه‌هایی برای انتخاب سنگ، کاغذ یا قیچی و نمایش نتیجه.
2. **CSS**: طراحی زیبا برای رابط کاربری.
3. **JavaScript**:
   - **انتخاب تصادفی**: یک انتخاب تصادفی برای کامپیوتر تولید می‌شود.
   - **تعیین برنده**: با مقایسه انتخاب کاربر و کامپیوتر، برنده تعیین می‌شود و نتیجه به کاربر نمایش داده می‌شود.
   - **دکمه شروع دوباره**: پس از هر بازی، کاربر می‌تواند بازی را دوباره شروع کند.
 
### نتیجه‌گیری
این پروژه **بازی سنگ، کاغذ، قیچی** یک مثال ساده برای یادگیری JavaScript و کار با رویدادها و DOM است. شما می‌توانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند ثبت نتایج، شمارش امتیازها و غیره را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه **بازی سنگ، کاغذ، قیچی (Rock Paper Scissors) با JavaScript** می‌باشد