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

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

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

طراحی بازی

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

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

کلیک کنید

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

جاوا اسکریپت

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

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

کلیک کنید

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

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

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 در اختیار شما قرار دهد. کد کامل این بازی و همچنین یک نسخه اجرایی آن را می‌توانید در این صفحه (+) ملاحظه کنید.

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

کلیک کنید

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

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش طراحی رابط کاربری وبسایت با فریمورک jQuery UI
• ساخت بازی سنگ، کاغذ، قیچی در جاوا اسکریپت — راهنمای کاربردی
• مقادیر NaN در جاوا اسکریپت — به زبان ساده

==