اسکریپت بازی سنگ کاغذ و قیچی با جاوا اسکریپت: توضیح کامل و جامع
بازی سنگ کاغذ و قیچی، یکی از بازی‌های ساده و محبوب است که در بسیاری از کشورهای جهان شناخته شده و طرفداران زیادی دارد. این بازی، یک بازی استراتژیک و مبتنی بر تصمیم‌گیری است که در آن دو بازیکن، همزمان یکی از سه گزینه سنگ، کاغذ یا قیچی را انتخاب می‌کنند. هدف این بازی، برنده شدن در هر دور است؛ که در آن، قوانین ساده و قابل فهم، تعیین می‌کنند چه کسی برنده است و چه کسی بازنده.
در این مقاله، قصد داریم تا به صورت کامل و جامع، نحوه پیاده‌سازی اسکریپت بازی سنگ کاغذ و قیچی با زبان برنامه‌نویسی جاوا اسکریپت را توضیح دهیم. این اسکریپت، می‌تواند در توسعه بازی‌های تعاملی، برنامه‌های آموزشی، یا پروژه‌های سرگرمی مورد استفاده قرار گیرد. برای شروع، باید درک کنیم که چه اجزایی در این بازی دخیل هستند، و چگونه می‌توانیم آن‌ها را به صورت کد در بیاوریم.
ساختار کلی بازی و نیازمندی‌ها
در این بازی، کاربران باید بتوانند گزینه مورد نظر خود را انتخاب کنند، و سپس سیستم، پاسخ مناسب را بر اساس انتخاب‌های هر دو طرف، نشان دهد. علاوه بر این، نیاز است که نتیجه بازی مشخص شود، یعنی چه کسی برنده است یا اگر بازی مساوی است. برای این کار، باید چند عنصر کلیدی در نظر گرفته شود:
1. ورودی کاربر: کاربر باید بتواند گزینه مورد نظر خود (سنگ، کاغذ، قیچی) را انتخاب کند.
2. تصمیم‌گیری سیستم: سیستم باید بر اساس انتخاب کاربر و انتخاب تصادفی یا دستی حریف، نتیجه را محاسبه کند.
3. نمایش نتیجه: نتیجه نهایی باید به کاربر نشان داده شود، همراه با پیام‌های مناسب.
4. تکرار بازی: امکان بازی مجدد، برای تجربه بهتر و سرگرمی بیشتر.
همچنین، باید توجه داشت که این پروژه، نیازمند استفاده از عناصر HTML برای طراحی صفحه، CSS برای استایل‌دهی، و جاوا اسکریپت برای منطق بازی است. در ادامه، بخش به بخش، این اجزا را شرح می‌دهیم.
طراحی رابط کاربری (HTML)
در ابتدا، باید یک صفحه HTML ساده تهیه کنیم که شامل دکمه‌های انتخاب گزینه‌ها باشد. مثلا، سه دکمه برای سنگ، کاغذ و قیچی، و قسمتی برای نمایش نتیجه. ساختار پایه می‌تواند چنین باشد:
html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>بازی سنگ کاغذ و قیچی</title>
</head>
<body>
<h1>بازی سنگ کاغذ و قیچی</h1>
<div>
<button id="rock">سنگ</button>
<button id="paper">کاغذ</button>
<button id="scissors">قیچی</button>
</div>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
در این ساختار، هر دکمه، یک شناسه مخصوص دارد، که در جاوا اسکریپت، بر اساس آن‌ها، رویدادهای لازم را پیاده‌سازی می‌کنیم. همچنین، بخش `div#result` برای نمایش نتیجه بازی در نظر گرفته شده است.
نوشتن منطق بازی در جاوا اسکریپت
حالا نوبت می‌رسد به نوشتن کد جاوا اسکریپت. در فایل `script.js`، باید رویدادهای کلیک هر دکمه را تعریف کنیم، و بعد، نتیجه را محاسبه و نمایش دهیم.
ابتدا، باید گزینه‌های ممکن را تعریف کنیم:
javascript
const choices = ["سنگ", "کاغذ", "قیچی"];
سپس، یک تابع برای گرفتن تصمیم تصادفی حریف (اگر می‌خواهید بازی ضد کامپیوتر باشد) یا از کاربر دیگر، تعریف می‌کنیم. اما در اینجا، فرض می‌کنیم که کاربر و سیستم، هر دو، گزینه خود را انتخاب می‌کنند.
در ادامه، رویدادهای هر دکمه را به صورت زیر تعریف می‌کنیم:
javascript
document.getElementById('rock').addEventListener('click', () => playGame('سنگ'));
document.getElementById('paper').addEventListener('click', () => playGame('کاغذ'));
document.getElementById('scissors').addEventListener('click', () => playGame('قیچی'));
function playGame(userChoice) {
const systemChoice = choices[Math.floor(Math.random() * choices.length)];
let resultText = '';
if (userChoice === systemChoice) {
resultText = `مساوی شد! هر دو ${userChoice} را انتخاب کردند.`;
} else if (
(userChoice === 'سنگ' && systemChoice === 'قیچی') ||
(userChoice === 'کاغذ' && systemChoice === 'سنگ') ||
(userChoice === 'قیچی' && systemChoice === 'کاغذ')
) {
resultText = `شما برنده شدید! ${userChoice} در مقابل ${systemChoice} برنده شد.`;
} else {
resultText = `بازنده شدید! ${systemChoice} در مقابل ${userChoice} برنده شد.`;
}
document.getElementById('result').innerText = resultText;
}
در این کد، هر دکمه، یک رویداد کلیک دارد که تابع `playGame` را با گزینه مورد نظر فراخوانی می‌کند. در داخل این تابع، سیستم بر اساس انتخاب تصادفی، تصمیم می‌گیرد. سپس، نتیجه بر اساس قوانین بازی، تعیین و نمایش داده می‌شود.
افزودن امکانات بیشتر
برای جذاب‌تر کردن بازی، می‌توان قابلیت‌های بیشتری اضافه کرد:
1. تعداد برد و باخت: نگهداری امتیازات و نمایش آن‌ها در صفحه.
2. بازنشانی بازی: دکمه‌ای برای شروع مجدد، و ریست کردن امتیازات.
3. زمان‌بندی و انیمیشن: افزودن انیمیشن‌های جذاب برای انتخاب‌ها و نتیجه‌ها.
4. پشتیبانی چندنفره: امکان بازی با دوستان، یا چند کاربر.
همچنین، می‌توان از عناصر CSS برای زیباتر کردن صفحه و افزودن استایل‌های جذاب بهره برد. به این صورت، کاربر تجربه کاربری بهتری خواهد داشت.
نتیجه‌گیری
در نهایت، این پروژه، نمونه‌ای ساده و در عین حال کاربردی است که نشان می‌دهد چگونه می‌توان با ترکیب HTML، CSS، و جاوا اسکریپت، یک بازی تعاملی و سرگرم‌کننده ساخت. این اسکریپت، به راحتی قابل توسعه است، و می‌تواند به پروژه‌های پیچیده‌تر و بازی‌های دیگر تبدیل شود. مهم‌ترین نکته، درک قوانین بازی و پیاده‌سازی منطق آن است، که با تمرین و خلاقیت، می‌توان قابلیت‌های جدیدی به آن افزود.
در مجموع، ساخت اسکریپت بازی سنگ کاغذ و قیچی، نمونه‌ای عالی برای یادگیری مفاهیم پایه در برنامه‌نویسی وب است، و فرصت خوبی برای تمرین مهارت‌های JavaScript و طراحی رابط کاربری است. این پروژه، نه تنها سرگرم‌کننده است، بلکه به توسعه مهارت‌های فنی و خلاقیت شما کمک می‌کند، و می‌تواند پایه‌ای برای پروژه‌های بزرگ‌تر باشد.