کاربران گرامی در این پروژه به شما پروژه بازی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه بازی با جاوااسکریپت سایر بازی هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه بازی بازی های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد بازی **سنگ، کاغذ، قیچی** با استفاده از 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;
}
.options {
margin-bottom: 20px;
}
.option {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin: 5px;
}
#result {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
color: #333;
}
#resetBtn {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
```
### 3. **JavaScript**
در نهایت منطق بازی سنگ، کاغذ، قیچی را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
const options = document.querySelectorAll('.option');
const resultDiv = document.getElementById('result');
const resetBtn = document.getElementById('resetBtn');
options.forEach(option => {
option.addEventListener('click', function() {
const userChoice = this.dataset.choice;
const computerChoice = getComputerChoice();
const winner = determineWinner(userChoice, computerChoice);
displayResult(userChoice, computerChoice, winner);
resetBtn.style.display = 'block'; // نمایش دکمه تجدید نظر
});
});
function getComputerChoice() {
const choices = ['rock', 'paper', 'scissors'];
const randomIndex = Math.floor(Math.random() * choices.length);
return choices[randomIndex];
}
function determineWinner(user, computer) {
if (user === computer) {
return 'تساوی!';
} else if (
(user === 'rock' && computer === 'scissors') ||
(user === 'paper' && computer === 'rock') ||
(user === 'scissors' && computer === 'paper')
) {
return 'شما برنده شدید! 🎉';
} else {
return 'کامپیوتر برنده شد! 😢';
}
}
function displayResult(user, computer, winner) {
resultDiv.innerHTML = `
شما: ${user}
کامپیوتر: ${computer}
نتیجه: ${winner}
`;
}
resetBtn.addEventListener('click', function() {
resultDiv.innerHTML = '';
resetBtn.style.display = 'none'; // پنهان کردن دکمه تجدید نظر
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان بازی، دکمه‌های انتخاب سنگ، کاغذ و قیچی، و بخش نمایش نتیجه است.
2. **CSS**: طراحی برای بازی سنگ، کاغذ، قیچی که شامل طراحی دکمه‌ها و بخش نمایش نتیجه می‌شود.
3. **JavaScript**:
- **انتخاب کامپیوتر**: یک انتخاب تصادفی برای کامپیوتر تولید می‌کند.
- **تشخیص برنده**: بررسی می‌کند که آیا کاربر برنده شده، کامپیوتر برنده شده یا تساوی شده است.
- **نمایش نتیجه**: نتیجه بازی را در بخش مشخص شده نمایش می‌دهد.
- **تجدید نظر**: دکمه‌ای برای شروع دوباره بازی نمایش می‌دهد.
### نتیجه‌گیری
این پروژه **بازی سنگ، کاغذ، قیچی** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و مدیریت رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند تاریخچه بازی یا امتیازدهی اضافه کنید. از کدنویسی لذت ببرید!
