کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### پروژه **بازی سنگ، کاغذ، قیچی (Rock, Paper, Scissors) در 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 {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
.choices {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.choice {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin: 0 10px;
}
.choice:hover {
background-color: #0056b3;
}
.result {
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق بازی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// انتخاب عناصر
const choices = document.querySelectorAll('.choice');
const resultDiv = document.getElementById('result');
// تابع برای انتخاب تصادفی کامپیوتر
function getComputerChoice() {
const randomNumber = Math.floor(Math.random() * 3);
return ['rock', 'paper', 'scissors'][randomNumber];
}
// تابع برای تعیین برنده
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.getAttribute('data-choice');
const computerChoice = getComputerChoice();
const result = determineWinner(userChoice, computerChoice);
resultDiv.textContent = `شما: ${userChoice} | کامپیوتر: ${computerChoice} - ${result}`;
});
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان بازی، سه دکمه برای انتخاب سنگ، کاغذ و قیچی و یک بخش برای نمایش نتیجه بازی است.
2. **CSS**:
- طراحی ساده و زیبا برای بازی با استفاده از استایل‌ها و چیدمان.
3. **JavaScript**:
- **انتخاب عناصر**: انتخاب عناصر HTML با استفاده از `querySelectorAll` و `getElementById`.
- **تابع انتخاب کامپیوتر**: تابعی که یک انتخاب تصادفی از بین گزینه‌های سنگ، کاغذ و قیچی انجام می‌دهد.
- **تابع تعیین برنده**: تابعی که برنده را بر اساس قوانین بازی تعیین می‌کند.
- **رویداد کلیک**: با کلیک بر روی هر دکمه، انتخاب کاربر و کامپیوتر گرفته می‌شود و نتیجه به نمایش درمی‌آید.
### نتیجه‌گیری
این پروژه **بازی سنگ، کاغذ، قیچی** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند امتیازدهی، نمایش تاریخچه بازی یا حتی طراحی دوباره رابط کاربری را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه *بازی سنگ، کاغذ، قیچی (Rock, Paper, Scissors) در JavaScript** می‌باشد
