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

جزئیات محصول

دانلود پروژه بازی **سنگ، کاغذ، قیچی** (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
   
   
    بازی سنگ، کاغذ، قیچی
   
   
       

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

       
           
           
           
       
       

       

امتیاز شما: 0

       

امتیاز رایانه: 0

   
   
```
 
### 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;
}
 
.game-container {
    text-align: center;
}
 
.options {
    margin: 20px 0;
}
 
.option {
    padding: 10px 20px;
    font-size: 18px;
    margin: 0 10px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
}
 
.option:hover {
    background-color: #0056b3;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق بازی با JavaScript می‌رویم. در این کد، بازیکن گزینه خود را انتخاب می‌کند و سپس رایانه به طور تصادفی یک گزینه انتخاب می‌کند.
 
```javascript
let userScore = 0;
let computerScore = 0;
 
const resultDisplay = document.getElementById('result');
const userScoreDisplay = document.getElementById('userScore');
const computerScoreDisplay = document.getElementById('computerScore');
 
const options = document.querySelectorAll('.option');
 
options.forEach(option => {
    option.addEventListener('click', () => {
        const userChoice = option.id;
        const computerChoice = getComputerChoice();
        const result = determineWinner(userChoice, computerChoice);
        updateScore(result);
        displayResult(result, userChoice, computerChoice);
    });
});
 
function getComputerChoice() {
    const choices = ['rock', 'paper', 'scissors'];
    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 'رایانه برنده شد!';
    }
}
 
function updateScore(result) {
    if (result === 'شما برنده شدید!') {
        userScore++;
        userScoreDisplay.textContent = userScore;
    } else if (result === 'رایانه برنده شد!') {
        computerScore++;
        computerScoreDisplay.textContent = computerScore;
    }
}
 
function displayResult(result, userChoice, computerChoice) {
    resultDisplay.textContent = `شما: ${userChoice} | رایانه: ${computerChoice} | نتیجه: ${result}`;
}
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، گزینه‌های انتخابی (سنگ، کاغذ، قیچی)، و نمایش امتیازات است.
2. **CSS**: طراحی ساده و کاربرپسند برای دکمه‌ها و متن.
3. **JavaScript**:
   - **امتیازها**: متغیرهایی برای ذخیره امتیاز کاربر و رایانه تعریف شده است.
   - **انتخاب رایانه**: رایانه به صورت تصادفی یکی از گزینه‌ها را انتخاب می‌کند.
   - **تعیین برنده**: تابعی برای تعیین برنده با توجه به انتخاب‌های کاربر و رایانه.
   - **به‌روزرسانی امتیاز**: امتیازها بر اساس نتیجه به‌روز می‌شوند و نمایش داده می‌شوند.
 
### نتیجه‌گیری
این بازی سنگ، کاغذ، قیچی یک پروژه ساده و سرگرم‌کننده است که می‌توانید با آن آشنایی بیشتری با HTML، CSS و JavaScript پیدا کنید. شما می‌توانید ویژگی‌های بیشتری مانند تاریخچه بازی، سطح دشواری یا تایمر را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه بازی **سنگ، کاغذ، قیچی** (Rock, Paper, Scissors) با استفاده از HTML، CSS و JavaScript می‌باشد