ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی

انجام پروژه‌های واقعی یکی از بهترین روش‌ها برای یادگیری کامل‌تر زبان‌های برنامه‌نویسی است. اگر در حال یادگیری جاوا اسکریپت هستید، پروژه‌ای که در ادامه آمده و نحوه کدنویسی آن توضیح داده شده، برای شما کاملاً کاربردی خواهد بود. در این پروژه به نحوه ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت پرداخته شده است.

چه چیزی می‌خواهیم بسازیم؟

کد نهایی این پروژه را می‌توانید در این آدرس (+) ملاحظه کنید. چنان که از تصویر پیش‌نمایش زیر احتمالاً حدس می‌زنید در این پروژه از مزیت آیکون‌های جالب وب سایت fontawesome.com بهره گرفته‌ایم.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

بنابراین درج کد اسکریپت آن را درون فایل HTML خود فراموش نکنید.

کدنویسی بازی سنگ، کاغذ، قیچی با  جاوا اسکریپت

یکی از زیبایی‌های برنامه‌نویسی آن است که برای انجام هر کاری روش‌های متعددی وجود دارند. اما ما تلاش کرده‌ایم یکی از ساده‌ترین روش‌ها را در این راهنما معرفی کنیم.

گام 1

برای این که همه چیز منظم و متمرکز بماند، درون یک wrapper سه ناحیه را به تصویر کشیده‌ایم:

• یک ناحیه که آیکون‌ها (فوق) را درون دکمه‌ها نمایش می‌دهد و انتخاب‌های ممکن برای کاربر را نمایش می‌دهد.
• ناحیه دیگر که یک آیکون تصادفی از میان سه انتخاب را نمایش می‌دهد که نشان‌دهنده انتخاب رایانه است.
• ناحیه سوم نتیجه نهایی است که بسته به انتخاب‌ها یکی از عبارت‌های You Won ،You Lose یا It’s a draw را نمایش می‌دهد.

1<div id="youChooseBtns">
2    <button id="rock">
3      <i class="far fa-hand-rock"></i>
4    </button>
5    <button id="scissor">
6      <i class="far fa-hand-scissors"></i>
7    </button>
8    <button id="paper">
9      <i class="far fa-hand-paper"></i>
10   </button>
11  </div>
12  
13  <div id="computerPlay"></div>
14  
15  <div id="result"></div>

جادوی جاوا اسکریپت

1document.querySelectorAll('button').forEach( btn => btn.addEventListener('click', (e) => {  
2  e.preventDefault();
3  randomize();
4  computerPlays(e);
5}
6));

ما در نخستین گام یک شنونده رویداد (Event Listener) به 3 دکمه/آیکون خود اضافه می‌کنیم. بدین ترتیب هر زمان که یک دکمه کلیک شود، اتفاقات زیر رخ می‌دهند:

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

• صفحه رفرش نمی‌شود (با preventDefault).
• تابع تصادفی‌سازی فراخوانی می‌شود (در ادامه توضیح داده شده است).
• «پاسخ» (Answer) از کامپیوتر خواسته می‌شود. همچنان که در ادامه خواهید دید، این پاسخ یک آیکون است که به صورت تصادفی انتخاب شده است. حرف e که به تابع الحاق شده است نشان‌دهنده خود event و یک آرگومان است که به تابع ارسال می‌شود. ما آرگومان‌ها را زمانی ارسال می‌کنیم که یک تابع به چیزی مرتبط با رویداد نیاز داشته باشد. در اینجا چنان که در ادامه خواهیم دید، به نام کلاس رویداد (یعنی آیکونی) که کلیک شده نیاز داریم.

تصادفی سازی

از کد زیر برای انتخاب تصادفی یک آیکون از سوی رایانه استفاده می‌شود:

1const randomize = () => {
2     const random = [
3  '<i class="far fa-hand-rock"></i>',
4  '<i class="far fa-hand-scissors"></i>',
5  '<i class="far fa-hand-paper"></i>'
6];
7  let randomIcon = random[Math.floor(Math.random() * random.length)];
8  document.querySelector('#computerPlay').innerHTML = randomIcon;
9};

ما یک ثابت با یک آرایه شامل سه آیکون درست کرده‌ایم. از آنجا که آیکون‌ها به شکل متنی هستند، هر عنصر در آرایه صرفاً یک رشته است. در ادامه از تابع ()Math.random استفاده کرده‌ایم به طوری که یکی از عناصر موجود در آرایه را به صورت تصادفی خواهیم داشت. این همان انتخاب رایانه است که پس از کلیک کردن کاربر روی آیکون انتخابی خود فراخوانی می‌شود. نتیجه تابع Math.random درون یک div با Id به صورت computerPlay ظاهر می‌شود.

چه کسی برنده شده است؟

برای تعیین برنده بازی از کد زیر استفاده کرده‌ایم:

1const computerPlays = (e) => {
2  let chosenIcon = e.target.className;
3  let chosenByPc = document.querySelector('#computerPlay').innerHTML
4  let resultBanner = document.querySelector('#result')
5  
6  if(
7    (chosenIcon.includes("scissors") && chosenByPc.includes("paper")) || 
8    (chosenIcon.includes("rock") && chosenByPc.includes("scissors")) ||
9    (chosenIcon.includes("paper") && chosenByPc.includes("rock"))
10      ) { 
11      resultBanner.innerHTML = "You Won!"
12    }
13  else if (
14      (chosenIcon.includes("scissors") && chosenByPc.includes("rock")) ||
15      (chosenIcon.includes("rock") && chosenByPc.includes("paper")) ||
16      (chosenIcon.includes("paper") && chosenByPc.includes("scissors"))
17    ) {
18    resultBanner.innerHTML = "Ouch. You Lost!"
19  }
20  else {
21    resultBanner.innerHTML = "It's a draw!"
22  }
23}

تابع فوق برای افراد مبتدی ممکن است اندکی دشوار باشد و شاید بتوان آن را به شیوه‌ای بهتر نیز نوشت.

درون گزاره if/else همه گزینه‌هایی که در صورت برنده/بازنده/مساوی شدن بازی لازم است بررسی شوند درج شده‌اند. این انتخاب بر مبنای انتخاب کاربر و آیکون انتخاب‌ شده‌ی تصادفی از سوی رایانه تصمیم‌گیری می‌شود.

از آنجا که آیکون‌های fontawesome دارای کلاس‌هایی به صورت fa-hand-rock هستند از متد includes. برای شناسایی آیکون‌ها و مقایسه آن‌ها با همدیگر استفاده کرده‌ایم. نتیجه نهایی به صورت زیر است:

بدین ترتیب به پایان این مطلب می‌رسیم.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• آموزش JavaScript ES6 (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• مفهوم Callback در جاوا اسکریپت — به زبان ساده

==