ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت
بازی سنگ، کاغذ، قیچی یکی از بازی‌های ساده و محبوب است که به راحتی می‌توان آن را با استفاده از جاوا اسکریپت پیاده‌سازی کرد. این بازی معمولاً بین دو نفر انجام می‌شود، که هر کدام یکی از سه گزینه را انتخاب می‌کند: سنگ، کاغذ یا قیچی. هدف این است که بر اساس قوانین مشخص، برنده تعیین شود.
قوانین بازی
در این بازی:
- سنگ (که به صورت یک دایره نمایش داده می‌شود) قیچی را می‌شکند.
- قیچی (که به صورت یک قیچی نمایش داده می‌شود) کاغذ را قیچی می‌کند.
- کاغذ (که به صورت یک ورق کاغذ نمایش داده می‌شود) سنگ را می‌پوشاند.
به این ترتیب، باید برنده را بر اساس انتخاب‌های بازیکنان شناسایی کنیم.
ساختار کلی کد
برای پیاده‌سازی این بازی، ما به HTML، CSS و جاوا اسکریپت نیاز داریم.
- HTML: برای ساختار صفحه و نمای بازی.
- CSS: برای زیباسازی و طراحی صفحات.
- جاوا اسکریپت: برای پیاده‌سازی منطق بازی.
نمونه کد HTML:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>بازی سنگ، کاغذ، قیچی</h1>
<div id="choices">
<button onclick="play('rock')">سنگ</button>
<button onclick="play('paper')">کاغذ</button>
<button onclick="play('scissors')">قیچی</button>
</div>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
```
نمونه کد CSS:
```css
body {
font-family: Arial, sans-serif;
text-align: center;
}
button {
margin: 10px;
padding: 10px;
font-size: 16px;
}
```
نمونه کد جاوا اسکریپت:
```javascript
function play(userChoice) {
const choices = ['rock', 'paper', 'scissors'];
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
let result = '';
if (userChoice === computerChoice) {
result = 'تساوی!';
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'scissors' && computerChoice === 'paper') ||
(userChoice === 'paper' && computerChoice === 'rock')
) {
result = 'شما برنده شدید!';
} else {
result = 'کامپیوتر برنده شد!';
}
document.getElementById('result').innerText = `انتخاب شما: ${userChoice}, انتخاب کامپیوتر: ${computerChoice}. ${result}`;
}
```
این کدها به شما اجازه می‌دهند تا با کلیک بر روی دکمه‌ها، انتخاب خود را انجام دهید و نتیجه بازی را مشاهده کنید.
نتیجه‌گیری
با استفاده از جاوا اسکریپت، می‌توانید بازی سنگ، کاغذ، قیچی را به سادگی پیاده‌سازی کنید. این پروژه نه تنها سرگرم‌کننده است بلکه به شما کمک می‌کند تا مهارت‌های خود را در برنامه‌نویسی تقویت کنید. از این رو، می‌توانید آن را گسترش دهید و ویژگی‌های جدیدی به آن اضافه کنید.
ساخت بازی سنگ، کاغذ، قیچی در جاوااسکریپت: راهنمای جامع
مقدمه
بازی سنگ، کاغذ، قیچی یکی از بازی‌های کلاسیک و ساده است که در عین حال، می‌تواند به عنوان تمرینی عالی برای یادگیری جاوااسکریپت باشد. این بازی، با استفاده از چند خط کد، قابل پیاده‌سازی است و کاربر می‌تواند با انتخاب یکی از گزینه‌ها، نتیجه بازی را ببیند. در ادامه، به صورت کامل و جامع، مراحل ساخت این بازی را بررسی می‌کنیم، از طراحی رابط کاربری گرفته تا منطق بازی و افزودن قابلیت‌های جذاب.
---
۱. ساختار پایه HTML
ابتدا، باید فرم یا دکمه‌هایی برای انتخاب گزینه‌ها در صفحه طراحی کنیم. مثلا:
```html
<h2>سنگ، کاغذ، قیچی</h2>
<button id="rock">سنگ</button>
<button id="paper">کاغذ</button>
<button id="scissors">قیچی</button>
<p id="result"></p>
```
در این کد، سه دکمه برای انتخاب کاربر قرار داده شده است و یک پاراگراف برای نمایش نتیجه.
---
۲. نوشتن جاوااسکریپت برای عملکرد
حالا، باید کد جاوااسکریپت را بنویسیم تا به عملکرد این دکمه‌ها واکنش نشان دهد. مثلا:
```javascript
// اخذ عناصر DOM
const buttons = document.querySelectorAll('button');
const resultText = document.getElementById('result');
// گزینه‌های بازی
const choices = ['سنگ', 'کاغذ', 'قیچی'];
// افزودن رویداد به هر دکمه
buttons.forEach(button => {
button.addEventListener('click', () => {
const userChoice = button.innerText;
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
const gameResult = determineWinner(userChoice, computerChoice);
displayResult(userChoice, computerChoice, gameResult);
});
});
// تابع تعیین برنده
function determineWinner(user, computer) {
if (user === computer) {
return 'مساوی!';
} else if (
(user === 'سنگ' && computer === 'قیچی') ||
(user === 'کاغذ' && computer === 'سنگ') ||
(user === 'قیچی' && computer === 'کاغذ')
) {
return 'شما برنده شدید!';
} else {
return 'بازنده شدید!';
}
}
// نمایش نتیجه
function displayResult(user, computer, result) {
resultText.innerHTML = `
شما: ${user} <br>
کامپیوتر: ${computer} <br>
نتیجه: ${result}
`;
}
```
در این کد، وقتی کاربر بر روی یکی از دکمه‌ها کلیک می‌کند، بازی انجام می‌شود و نتیجه در صفحه نمایش داده می‌شود.
---
۳. افزودن ویژگی‌های جذاب
برای جذاب‌تر کردن بازی، می‌توانید موارد زیر را اضافه کنید:
- اضافه کردن انیمیشن‌ها: برای مثال، هنگام کلیک کردن، انیمیشن‌های کوچک به کار ببرید.
- ثبت امتیاز: تعداد برد و باخت کاربر را نگهدارید و نمایش دهید.
- پیشنهاد تصادفی: به جای کامپیوتر، گزینه‌های تصادفی معنادار قرار دهید.
- اضافه کردن صدا: با کلیک، صداهای مرتبط پخش کنید.
---
۴. نکات مهم و بهبودها
- مدیریت خطاها: مطمئن شوید که کاربر فقط گزینه‌های مجاز را انتخاب می‌کند.
- طراحی واکنش‌گرا: صفحه باید در دستگاه‌های مختلف به خوبی نمایش داده شود.
- کد بهینه و قابل توسعه: ساختار کد باید قابل گسترش باشد، مثلا اضافه کردن حالت‌های جدید.
---
نتیجه‌گیری
در نهایت، این بازی نمونه‌ای عالی برای شروع است و می‌تواند با افزودن امکانات بیشتر، به پروژه‌ای کامل تبدیل شود. با تمرین و خلاقیت، می‌توانید بازی‌های پیچیده‌تر و جذاب‌تر بسازید و مهارت‌های برنامه‌نویسی خود را تقویت کنید.
آیا نیاز دارید که نمونه کامل کد در فایل HTML و JS را برایتان بفرستم؟
