ساخت یک بازی ساده با جاوا اسکریپت — از صفر تا صد

۶۹۹ بازدید
آخرین به‌روزرسانی: ۰۷ شهریور ۱۴۰۲
زمان مطالعه: ۳ دقیقه
ساخت یک بازی ساده با جاوا اسکریپت — از صفر تا صد

در این مقاله با روش ساخت یک بازی ساده با جاوا اسکریپت آشنا می‌شویم. تنها راه یادگیری، تمرین است و در این راهنما قصد داریم با بررسی عملی روش دستکاری DOM شروع به بهبود مهارت‌های خود بکنیم. با این که این مقاله برای افراد تازه‌کار نوشته شده است، اما به آن معنی نیست که اصلاً به درد توسعه‌دهندگان باتجربه‌تر نمی‌خورد. در این مقاله با موارد زیر آشنا خواهیم شد:

997696
  • مبانی CSS و جاوا اسکریپت
  • مبانی Flexbox ،CSS3 و مدل لی‌آوت وب
  • دستکاری دینامیک DOM با استفاده از جاوا اسکریپت

طراحی بازی

ساخت یک بازی ساده با جاوا اسکریپت

بازی ساده‌ای که می‌خواهیم طراحی کنیم، دارای شرایط زیر است:

  • در این بازی از یک تصویر به عنوان پس‌زمینه استفاده می‌شود و یک تصویر اردک در آن وجود دارد که قابل کلیک است.
  • زمانی که کاربر روی تصویر اردک کلیک کند، دو اتفاق می‌افتد:
    • امتیاز کنونی یک واحد افزایش می‌یابد.
    • اردک به یک موقعیت تصادفی جدید جابجا می‌شود.
  • این بازی با استفاده از قابلیت‌های استاندارد ES6 ساخته می‌شود.
  • برای لی‌آوت از Flexbox استفاده شده است.

به عنوان یک قاعده کلی، نخستین کاری که در چنین مواردی باید انجام دهیم، تفکر در مورد رویکردی است که باید انتخاب کنیم. این بدان معنی است که باید هر گام را تحلیل کنیم و جزییاتی که باید برای به دست آوردن آن الزام خاص پیاده‌سازی شوند را مشخص ساخته باشیم. در ادامه این کار را انجام می‌دهیم.

برای حل این چالش به ترتیب گام‌های زیر را باید برداریم. در این راه حل از رویکرد «تقسیم و حل» استفاده شده است.

  1. لی‌آوت را با استفاده از فایل‌ها (تصویر پس‌زمینه و اردک) و یک کادر امتیاز پیاده‌سازی می‌کنیم.
  2. زمانی که روی تصویر اردک کلیک می‌شود، باید یک «شنونده رویداد» (event listener) وجود داشته باشد که تحریک شود.
  3. تابعی ایجاد می‌کنیم که امتیاز کنونی را افزایش دهد.
  4. تابعی می‌سازیم که اردک را به صورت تصادفی جابجا کند.

حال که مراحل اجرایی را شناختیم، بدون هرگونه توضیح اضافی به سراغ پیاده‌سازی عملی بازی می‌رویم.

لی‌آوت

لی‌آوت ما (فایل index.html) یک div به عنوان یک کانتینر دارد که دو تصویر پس‌زمینه و اردک در آن قرار می‌گیرند. در نهایت یک عنصر scoreContainer وجود دارد که متن score و همچنین مقدار امتیاز (به عنوان شمارنده) در آن جای می‌گیرد:

1<div class="container">
2     <img src="https://bit.ly/2Q4q14a" />
3     <img id="duck" src="https://bit.ly/2KQJVKc" alt="duck" />
4     <div class="scoreContainer">
5       <div id="score-text">Score</div>
6       <div id="score-counter">0</div>
7    </div>
8</div>

استایل این لی‌آوت نیز به صورت زیر است:

1/*Make any img element responsive*/
2img {
3 max-width: 100%;
4}
5/*Set a fixed size for width and height and in an absolute position*/
6#duck {
7 margin: 50px;
8 width: 100px;
9 height: 100px;
10 position: absolute;
11 left: 100px;
12 top: 100px;
13}
14/*Style for the Score container*/
15.scoreContainer {
16 background-color: black;
17 width: 15%;
18 height: 15%;
19 color: #ffffff;
20 top: 5%;
21 right: 5%;
22 border: 2px solid greenyellow;
23 border-radius: 10px;
24 display: flex;
25 position: fixed;
26 flex-direction: column;
27 align-items: center;
28}
29#score-text {
30 font-size: 1.5em;
31}
32#score-counter {
33 font-size: 3.1em;
34 font-weight: bold;
35 color: #06e515;
36}

جاوا اسکریپت

در این بخش اسکریپت‌های لازم را توضیح می‌دهیم.

ایجاد شنونده رویداد

اکنون باید یک شنونده رویداد روی تصویر اردک ایجاد کنیم. زمانی که کاربر روی تصویر اردک کلیک می‌کند یک تابع اجرا خواهد شد:

1//Get the target element
2const duck = document.querySelector("#duck");
3//Add the click event listener
4duck.addEventListener("click", () => {
5  //Dont forget call the functions here 
6  increaseScore();
7  moveDuck();
8});

ایجاد تابع افزایش امتیاز کنونی

اینک که شنونده رویداد را ایجاد کردیم، باید یک تابع بسازیم که شمارنده را یک واحد افزایش دهد:

1//Increase score by 1
2const increaseScore = () => {
3  //Get the content of the target element. The current value for score
4  const score = document.querySelector("#score-counter").innerHTML;
5  //Get the element to increase the value
6  const scoreHTML = document.querySelector("#score-counter");
7  //Cast the score value to Number type
8  let count = Number(score);
9  //Set the new score to the target element
10  scoreHTML.innerHTML = count + 1;
11};

ایجاد تابع جابجایی تصادفی اردک

اینک زمان آن رسیده است که اردک را جابجا کنیم. از آنجا که این حرکت اردک تصادفی است، بهتر است یک تابع کمکی بسازیم که یک عدد تصادفی می‌گیرد و سپس به یک موقعیت تصادفی انتساب می‌دهد. این تابع به صورت زیر است:

1//Get a random number
2const getRandomNum = (num) => {
3  return Math.floor(Math.random() * Math.floor(num));
4}

در این مرحله باید یک تابع برای جابجا کردن اردک بسازیم. به این منظور از مشخصه innerWidth برای گرفتن عرض داخلی پنجره به صورت پیکسل و از مشخصه innerHeight برای دریافت ارتفاع داخلی پنجره به پیکسل استفاده می‌کنیم. ضمناً از تابع getRandomNum برای تنظیم مقادیر پیکسلی مشخصه‌های سمت بالا و چپ برای تعیین موقعیت عمودی و افقی اردک بهره می‌گیریم.

1/*
2Move the duck randomly 
3*/
4const moveDuck = () => {
5  const w = window.innerWidth;
6  const h = window.innerHeight;
7  duck.style.top = getRandomNum(w) + "px";
8  duck.style.left = getRandomNum(h) + "px";
9};

سخن پایانی

به این ترتیب موفق شدیم بازی ساده خود را در جاوا اسکریپت طراحی کنیم. امیدواریم این راهنمای ساده توانسته باشد درک خوبی از روش دستکاری DOM در اختیار شما قرار دهد. کد کامل این بازی و همچنین یک نسخه اجرایی آن را می‌توانید در این صفحه (+) ملاحظه کنید.

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

==

بر اساس رای ۱۱ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
better-programming
۲ دیدگاه برای «ساخت یک بازی ساده با جاوا اسکریپت — از صفر تا صد»

سلام.چطوری برنامه جاوا رو روی کامپیوتر اجرا کنم؟

باید به html وصل کنید

نظر شما چیست؟

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