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

۱۱۲۲ بازدید
آخرین به‌روزرسانی: ۰۸ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی

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

997696

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

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

بنابراین درج کد اسکریپت آن را درون فایل 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 دکمه/آیکون خود اضافه می‌کنیم. بدین ترتیب هر زمان که یک دکمه کلیک شود، اتفاقات زیر رخ می‌دهند:

  • صفحه رفرش نمی‌شود (با 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. برای شناسایی آیکون‌ها و مقایسه آن‌ها با همدیگر استفاده کرده‌ایم. نتیجه نهایی به صورت زیر است:

بازی سنگ، کاغذ، قیچی

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

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

==

بر اساس رای ۵ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
ragonese.valeria
۱ دیدگاه برای «ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی»

سلام خوبین خیلی ممنون از اموزش تون.
من یه سوال دارم
من یه button برای refreshساختم و میخام موقع که هم کاربر و هم کامپیوتر انتخابشو کرد وامتیاز به برنده بازی داده شد تا این دکمه refresh کلیک نشده دسترسی کاربرو به دیگر item های رو صفحه بازی ببند وموقع که refresh کلیک شد همه چه به حالت اول برگرده.
ممنون

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *