تگ های موضوع سنگ کاغذ و قیچی با جاوا اسکریپت

سنگ کاغذ و قیچی با جاوا اسکریپت: راهنمای کامل و جامع

در دنیای برنامه‌نویسی، بازی‌های ساده اما جذابی وجود دارند که می‌توان آن‌ها را با کم‌ترین کد و در عین حال، قابلیت‌های زیاد پیاده‌سازی کرد. یکی از این بازی‌های محبوب، «سنگ، کاغذ، قیچی» است. بازی‌ای که در آن، دو بازیکن به صورت هم‌زمان، یکی در نقش کامپیوتر و دیگری کاربر، انتخاب می‌کنند و بر اساس قوانین مشخص، برنده مشخص می‌شود. در این مقاله، قصد دارم به طور جامع و کامل، روش ساخت این بازی با استفاده از جاوا اسکریپت را شرح دهم، تا بتوانید به راحتی آن را پیاده‌سازی کنید، و در عین حال، نکات مهم و ترفندهای مربوط به توسعه این نوع بازی‌ها را فرا بگیرید.
مقدمه
در ابتدا، باید بدانید که بازی «سنگ، کاغذ، قیچی» چگونه کار می‌کند. هر بازیکن، یکی از سه گزینه را در هر دور انتخاب می‌کند: سنگ، کاغذ، یا قیچی. سپس، بر اساس قوانین بازی، برنده مشخص می‌شود. قانون اصلی این است که:
- سنگ، قیچی را می‌کشد؛
- قیچی، کاغذ را می‌برد؛
- کاغذ، سنگ را می‌پوشاند.
در نتیجه، اگر هر دو بازیکن یک گزینه انتخاب کنند، نتیجه مساوی است. در غیر این صورت، برنده مشخص می‌شود. در این پروژه، ما قصد داریم این بازی را با جاوا اسکریپت، HTML و CSS پیاده‌سازی کنیم، تا تجربه‌ای تعاملی و جذاب داشته باشید.
گام اول: طراحی رابط کاربری
برای شروع، باید یک رابط کاربری جذاب و ساده طراحی کنیم. این رابط باید شامل دکمه‌هایی باشد که کاربر بتواند گزینه مورد نظر خود را انتخاب کند، مثلاً دکمه‌های «سنگ»، «کاغذ»، و «قیچی». همچنین، نیاز است فضای نمایش نتیجه و امتیازها را نیز در نظر بگیریم.
در HTML، ما این بخش‌ها را به شکل زیر می‌سازیم:

html  

<div class="game-container">

  <h1>سنگ، کاغذ، قیچی</h1>

  <div class="choices">

    <button id="rock">سنگ</button>

    <button id="paper">کاغذ</button>

    <button id="scissors">قیچی</button>

  </div>

  <div class="result">

    <p id="player-choice">انتخاب شما: </p>

    <p id="computer-choice">انتخاب کامپیوتر: </p>

    <p id="game-result">نتیجه: </p>

  </div>

  <div class="score">

    <p>امتیاز شما: <span id="player-score">0</span></p>

    <p>امتیاز کامپیوتر: <span id="computer-score">0</span></p>

  </div>

</div>

در CSS، استایل‌های پایه را قرار می‌دهیم تا ظاهر بازی جذاب‌تر شود، اما بخش مهم‌تر، در جاوا اسکریپت است.
گام دوم: منطق بازی در جاوا اسکریپت
حالا، باید منطق انتخاب‌ها و تعیین برنده را بنویسیم. برای این کار، ابتدا باید رویدادهای کلیک بر روی دکمه‌ها را مدیریت کنیم. هر بار کاربر یکی از گزینه‌ها را کلیک کند، بازی شروع می‌شود، و کامپیوتر، با انتخاب تصادفی، پاسخ می‌دهد.
در ادامه، نمونه کد پایه برای این کار را ارائه می‌دهم:

javascript  

const choices = ['rock', 'paper', 'scissors'];
let playerScore = 0;

let computerScore = 0;
document.getElementById('rock').addEventListener('click', () => play('rock'));

document.getElementById('paper').addEventListener('click', () => play('paper'));

document.getElementById('scissors').addEventListener('click', () => play('scissors'));
function getComputerChoice() {

  const randomIndex = Math.floor(Math.random() * choices.length);

  return choices[randomIndex];

}
function play(userChoice) {

  const computerChoice = getComputerChoice();
document.getElementById('player-choice').innerText = `انتخاب شما: ${userChoice}`;

  document.getElementById('computer-choice').innerText = `انتخاب کامپیوتر: ${computerChoice}`;
if (userChoice === computerChoice) {

    document.getElementById('game-result').innerText = 'نتیجه: مساوی!';

  } else if (

    (userChoice === 'rock' && computerChoice === 'scissors') ||

    (userChoice === 'scissors' && computerChoice === 'paper') ||

    (userChoice === 'paper' && computerChoice === 'rock')

  ) {

    document.getElementById('game-result').innerText = 'نتیجه: شما برنده شدید!';

    playerScore++;

    document.getElementById('player-score').innerText = playerScore;

  } else {

    document.getElementById('game-result').innerText = 'نتیجه: کامپیوتر برنده شد!';

    computerScore++;

    document.getElementById('computer-score').innerText = computerScore;

  }

}

در این کد، هر بار که کاربر روی دکمه‌ای کلیک کند، تابع `play()` فراخوانی می‌شود، که در آن، انتخاب تصادفی کامپیوتر و منطق برنده شدن بررسی می‌شود. امتیازها به روزرسانی می‌شوند و نتیجه نمایش داده می‌شود.
گام سوم: بهبود و توسعه بازی
برای جذاب‌تر کردن بازی، می‌توانید ویژگی‌های زیر را اضافه کنید:
- اضافه کردن انیمیشن‌ها: مثلاً، هنگام کلیک، دکمه‌ها کمی جابجا شوند یا رنگشان تغییر کند.
- مدیریت بازی‌های چندگانه: مثلا، بازی تا رسیدن به ۵ امتیاز ادامه یابد، و برنده نهایی اعلام شود.
- اضافه کردن صدا: صداهای جذاب هنگام برد یا باخت.
- اضافه کردن قابلیت ریست: دکمه‌ای برای شروع مجدد بازی.
- استفاده از آرایه‌ها و توابع پیچیده‌تر: برای توسعه منطق، یا اضافه کردن گزینه‌های جدید مانند «دب» یا «آتش».
گام چهارم: نکات مهم و بهترین تمرین‌ها
در توسعه این بازی، چند نکته مهم وجود دارد:
- همیشه از رویدادهای `addEventListener` برای مدیریت کلیک‌ها استفاده کنید، تا کدتان منظم و قابل توسعه باشد.
- از توابع مستقل بهره ببرید. مثلا، تابعی جدا برای تعیین برنده، امتیازدهی، و نمایش نتیجه.
- حتماً از `Math.random()` برای انتخاب تصادفی کامپیوتر بهره بگیرید، اما مراقب باشید که این تابع به درستی کار کند.
- سعی کنید کدهای HTML، CSS و جاوا اسکریپت را جدا کنید، تا ساختار پروژه منظم باشد.
- از نظرات در کد بهره ببرید، تا یادگیری و نگهداری راحت‌تر شود.
- بازی‌های تعاملی باید جذاب و کاربرپسند باشند، پس طراحی ظاهری، رنگ‌ها و فونت‌ها را به درستی انتخاب کنید.
نتیجه‌گیری
در نهایت، ساخت بازی «سنگ، کاغذ، قیچی» با جاوا اسکریپت، هم برای مبتدی‌ها و هم برای توسعه‌دهندگان حرفه‌ای، یک تمرین عالی است که مهارت‌های پایه در برنامه‌نویسی وب را تقویت می‌کند. این بازی، با توجه به سادگی‌اش، می‌تواند پایه‌ای باشد برای توسعه بازی‌های پیچیده‌تر، یا افزودن ویژگی‌های جدید به بازی‌های ساده دیگر. با کمی خلاقیت و تمرین، می‌توانید این بازی را تبدیل به یک پروژه کامل و جذاب کنید، و اصول برنامه‌نویسی تعاملی را به بهترین شکل یاد بگیرید.
در پایان، پیشنهاد می‌کنم که حتماً این پروژه را پیاده‌سازی کنید، و سعی کنید ایده‌های جدید و خلاقانه به آن اضافه کنید. بازی‌های کوچک، در کنار آموزش پایه‌های برنامه‌نویسی، لذت بخش و آموزنده هستند، و مسیر یادگیری شما را جذاب‌تر می‌کنند. پس، شروع کنید!