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

جزئیات محصول

دانلود پروژه بازی

دانلود پروژه بازی "سنگ، کاغذ، قیچی" با استفاده از JavaScript

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

خرید فایل


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

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

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

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


ساخت بازی "سنگ، کاغذ، قیچی" با استفاده از JavaScript یکی از پروژه‌های ساده و سرگرم‌کننده است که می‌تواند به شما کمک کند تا مفاهیم اساسی برنامه‌نویسی مانند توابع، دستورات شرطی و تعاملات کاربر را یاد بگیرید. در این بازی، کاربر می‌تواند یکی از گزینه‌های سنگ، کاغذ، یا قیچی را انتخاب کند و کامپیوتر نیز به صورت تصادفی یک گزینه را انتخاب می‌کند. سپس نتیجه بازی مشخص می‌شود که کدام یک از کاربر یا کامپیوتر برنده شده‌اند.
 
### ویژگی‌های اصلی پروژه
1. **انتخاب بازیکن و کامپیوتر**: کاربر می‌تواند یکی از سه گزینه را انتخاب کند و کامپیوتر نیز یک انتخاب تصادفی انجام می‌دهد.
2. **تعیین برنده**: بعد از هر دور، مشخص می‌شود که چه کسی برنده شده است.
3. **امتیازدهی**: شمارنده امتیازات برای بازیکن و کامپیوتر.
 
### مراحل پیاده‌سازی پروژه
 
#### ۱. ساختار HTML
ابتدا یک فایل HTML به نام `index.html` ایجاد کرده و کد زیر را در آن قرار دهید:
 
```html
   
   
    بازی سنگ، کاغذ، قیچی
   
   
       

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

       
           

امتیاز شما: 0

           

امتیاز کامپیوتر: 0

       
       
           
           
           
       
       

نتیجه بازی اینجا نمایش داده می‌شود.

   
   
```
 
#### ۲. استایل‌دهی با CSS
سپس یک فایل CSS به نام `style.css` ایجاد کنید و کد زیر را در آن قرار دهید:
 
```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
 
.game-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
.choices button {
    font-size: 1.5em;
    margin: 10px;
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    transition: background-color 0.3s;
}
 
.choices button:hover {
    background-color: #45a049;
}
 
#result {
    margin-top: 20px;
    font-size: 1.2em;
}
```
 
#### ۳. اسکریپت JavaScript
در نهایت، یک فایل JavaScript به نام `script.js` ایجاد کرده و کد زیر را در آن قرار دهید:
 
```javascript
let userScore = 0;
let computerScore = 0;
 
const userScore_span = document.getElementById('userScore');
const computerScore_span = document.getElementById('computerScore');
const result_p = document.getElementById('result');
 
const rock_btn = document.getElementById('rock');
const paper_btn = document.getElementById('paper');
const scissors_btn = document.getElementById('scissors');
 
// اضافه کردن رویدادها به دکمه‌ها
rock_btn.addEventListener('click', () => playGame('rock'));
paper_btn.addEventListener('click', () => playGame('paper'));
scissors_btn.addEventListener('click', () => playGame('scissors'));
 
// تابع اصلی بازی
function playGame(userChoice) {
    const computerChoice = getComputerChoice();
    determineWinner(userChoice, computerChoice);
}
 
// تابع برای تولید انتخاب تصادفی برای کامپیوتر
function getComputerChoice() {
    const choices = ['rock', 'paper', 'scissors'];
    const randomIndex = Math.floor(Math.random() * 3);
    return choices[randomIndex];
}
 
// تابع برای تعیین برنده بازی
function determineWinner(userChoice, computerChoice) {
    if (userChoice === computerChoice) {
        result_p.textContent = `مساوی! هر دو ${userChoice} را انتخاب کردید.`;
    } else if (
        (userChoice === 'rock' && computerChoice === 'scissors') ||
        (userChoice === 'paper' && computerChoice === 'rock') ||
        (userChoice === 'scissors' && computerChoice === 'paper')
    ) {
        userScore++;
        userScore_span.textContent = userScore;
        result_p.textContent = `شما برنده شدید! ${userChoice} ${computerChoice} را شکست می‌دهد.`;
    } else {
        computerScore++;
        computerScore_span.textContent = computerScore;
        result_p.textContent = `شما باختید! ${computerChoice} ${userChoice} را شکست می‌دهد.`;
    }
}
```
 
### توضیحات کد
 
1. **تعریف امتیازات**: دو متغیر `userScore` و `computerScore` برای نگهداری امتیازات بازیکن و کامپیوتر تعریف شده‌اند.
2. **رویداد کلیک دکمه‌ها**: برای هر دکمه (سنگ، کاغذ، قیچی)، رویدادی اضافه شده است تا هنگام کلیک روی هرکدام، تابع `playGame` با انتخاب بازیکن فراخوانی شود.
3. **انتخاب تصادفی کامپیوتر**: تابع `getComputerChoice` یکی از گزینه‌ها را به‌صورت تصادفی انتخاب می‌کند.
4. **تعیین برنده**: تابع `determineWinner` مقایسه می‌کند که بازیکن و کامپیوتر چه چیزی انتخاب کرده‌اند و بر اساس قواعد بازی، برنده را مشخص می‌کند.
 
### نحوه اجرای پروژه
1. همه فایل‌ها (`index.html`, `style.css`, `script.js`) را در یک پوشه ذخیره کنید.
2. فایل `index.html` را در مرورگر خود باز کنید تا بازی اجرا شود.
 
### نتیجه‌گیری
این پروژه "سنگ، کاغذ، قیچی" با JavaScript، HTML، و CSS ساخته شده است و یک بازی ساده و تعاملی برای کاربران ارائه می‌دهد. می‌توانید این پروژه را گسترش دهید، مثلاً با اضافه کردن گزینه‌های بیشتر (مانند لیزر یا اسپوک!)، ایجاد انیمیشن‌های جذاب‌تر، یا حتی ذخیره کردن امتیازهای بازی به‌صورت محلی (local storage). این پروژه به شما کمک می‌کند تا با اصول برنامه‌نویسی JavaScript و تعاملات کاربر آشنا شوید.
| صفحه قابل مشاهده: دانلود پروژه بازی "سنگ، کاغذ، قیچی" با استفاده از JavaScript می‌باشد