اگر شما هم مثل من باشید و علاقه زیادی هم به برنامه نویسی و هم چالش هاش داشته باشید ٬ مسلما با آموزش ساخت بازی با جاوا اسکریپت خیلی حال میکنید.در نگاه اول شاید خیلی ساده به نظر برسه اما اگه خودتون بدون هیچ آموزشی تصمیم به ساخت بازی با جاوا اسکریپت داشته باشید ٬ متوجه میشید که میتونه چقدر چالش سخت و در عین حال لذت بخشی باشه.بریم سر اصل مطلب ٬ یعنی ساخت بازی با جاوا اسکریپت.بازی که قصد ساختش رو داریم چیزی مشابه اون بازی هواپیمایی هست که توی آتاری بود ! اما خیلی خیلی خیلی ساده تر.

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

 

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

خب بریم سر اصل مطلب یعنی سخت بازی ساده با جاوا اسکریپت 🙂

برای شروع به یه IDE نیاز داریم که برای نوشتن کدمون از اون استفاده کنیم.من خودم به شخصه از VSCode استفاده میکنم که هم سبک و هم سریع هست.اما شما میتونید از برنامه های دیگه مثل Nodepad++ یا Sublime Text یا Atom و یا … استفاده کنید.

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

داخل فولدر یک فایل به اسم index.html و یک فایل به اسم main.js بسازید.حواستون باشه که html و js فرمت فایل های ما هستند و جزو اسم محسوب نمیشن.

حالا فایل index.html رو باز کنید تا قسمت اول برنامه نویسی رو شروع کنیم.

فایل HTML

ساختار پایه هر فایل HTML رو مینویسیم :

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
</head>
<body>

</body>
</html>

این قسمت رو برای اون دسته از افرادی که شاید دانش HTML نداشته باشن مینویسم و در صورتی که نیازی به توضیح ندارید میتونید به قسمت بعد برید.

با نوشتن خط اول ما مشخص میکنیم که میخوایم از HTML5 استفاده کنیم.

داخل خط دوم تگ پایه <html> رو باز کردیم و زبان فایلمون رو برابر با فارسی گذاشتیم. دقت کنید که داخل خط آخر هم تگ <html> رو بستیم ٬ اونم با اضافه کردن یک اسلش به قبل اسم html.

خط سوم ٬ <head> هست که برای مشخص کردن یک سری خصوصیات ابتدایی فایل HTML و اضافه کردن فایل های جاوا اسکریپت و سی اس اس استفاده میشه.دقت کنید که توی خط پنجم هم این تگ رو به همون شیوه قبلی بستیم ٬ یعنی با اضافه کردن یک اسلش به قبل اسم head.

توی خط چهارم از تگ <title> استفاده شده که عنوان صفحه رو مشخص میکنه.عنوان صفحه همون متنی هست که روی تب های مرورگر نمایش داده میشه! همونطور که میبینید این تگ داخل همین خط بسته شده.

و اما میرسیم به تگ <body> که تمام اجزای صفحه که باید به کاربر نشون داده بشن رو قراره در بر بگیره! پس هر عنصر و تگ دیگه ای که بخوایم کاربر مشاهده کنه رو داخل <body> مینویسیم ! منظورم از داخل <body> یعنی بعد از باز شدن تگ <body> و قبل از بسته شدن اون یعنی </body>.

ساخت عناصر مورد نیاز ( ساخت بازی با جاوا اسکریپت )

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

پس دست به کار شیم :

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
</head>
<body>
<div id="gameRegion">

<div class="rock"></div>
<div class="shot"></div>
<div id="shooter"></div>

</div>
</body>
</html>

خب بریم سر توضیحات.بعد از باز شدن تگ <body> ٬ یک تگ <div> باز کردیم و خصوصیت آیدی اون رو برابر با مقدار gameRegion قرار دادیم.اینکار برای این هست که بعدا بتونیم خصوصیاتی مثل رنگ ٬ اندازه و … رو با سی اس اس بهش اضافه کنیم.داخل این gameRegion ٬ ۳ تا تگ <div> دیگه داریم.

اولینش با خصوصیت class برابر با مقدار rock هست که قراره سنگ هایی باشه که به عنوان دشمن از بالا به سمت پایین حرکت میکنن.اگر دقت کنید میبینید که برای gameRegion از آیدی و برای rock از کلاس استفاده کردیم.دلیل اینکار اینه که ما قرار نیست فقط یک سنگ داشته باشیم که حرکت میکنه ٬ بلکه شاید تعدادشون به ۱۰ تا و یا ۲۰ تا برسه.تفاوت کلاس و آیدی در همینه.آیدی باید در صفحه همیشه یکتا باشه و درصورتی که چند بار از یک آیدی یکسان استفاده شه ٬ به مشکل بر میخوریم.اما کلاس اینطور نیست و میتونه هر چند بار توی صفحه تکرار شه.

عنصر بعدی که داریم کلاس shot رو داره و قرار هست که تیر های ما رو مشخص کنه.

و در نهایت عنصر shooter رو داریم که همون مستطیلی هست که ما قراره کنترل کنیم و باهاش تیر شلیک کنیم.

حالا که ساختار HTML رو کامل ایجاد کردیم ٬ میریم سراغ سی اس اس و شکل و رنگ دادن به این عناصری که ساختیم.

رنگ و شکل دادن عناصر با سی اس اس ( ساخت بازی با جاوا اسکریپت )

داخل تگ <head> ٬ یک تگ جدید به نام <style> باز میکنیم و بعد اون رو میبندیم.داخل این تگ قراره خصوصیات سی اس اس مورد نیازمون رو بنویسیم.

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
<style>

</style>
</head>
<body>
<div id="gameRegion">

<div class="rock"></div>
<div class="shot"></div>
<div id="shooter"></div>

</div>
</body>
</html>

حالا که همه چیز برای نوشتن سی اس اس آماده هست ٬ شروع به نوشتن کد هامون میکنیم.

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
<style>
#gameRegion{
   background: #efefef;
   border: 1px solid #555;
   width: 500px;
   height:400px;
}
</style>
</head>
<body>
<div id="gameRegion">

<div class="rock"></div>
<div class="shot"></div>
<div id="shooter"></div>

</div>
</body>
</html>

با نوشتن این کد و سیو کردن فایلمون ٬ میتونیم فایل html رو با دو بار کلیک کردن روی اون باز کنیم و نتیجه رو ببینیم.

همونطور که میبینید ٬ gameRegion ما سمت چپ و بالای صفحه قرار گرفته ٬ اما ما اینو نمیخوایم و باید وسط صفحه قرار بگیره.قبل از اینکه بریم سراغ منتقل کردنش به وسط ٬ یک سری توضیحات کوتاه در مورد کدی که نوشتیم بدم.

با نوشتن #gameRegion ٬ در واقع ما داریم به مرورگر دستور میدیم که بره دنبال تگی بگرده که خصوصیت آیدی gameRegion رو داره و این خصوصیات سی اس اسی که داخل {} نوشتیم رو بهش نسبت بده.پس از # برای صدا زدن تگ ها با آیدیشون استفاده میکنیم.

با نوشتن background رنگ بکگراند و با نوشتن border ٬ رنگ حاشیه ٬ قطر و نوع این حاشیه رو مشخص کردیم.یک حاشیه با قطر 1 پیکسل ٬ نوع خطی و با رنگ #555.دستور width طول و height ارتفاع این عنصر داخل صفحه رو مشخص میکنن.

حالا میخوایم این ناحیه بازیمون رو وسط صفحه قرار بدیم.

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
<style>
#gameRegion{
   background: #efefef;
   border: 1px solid #555;
   width: 500px;
   height:400px;
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:auto;
}
</style>
</head>
<body>
<div id="gameRegion">

<div class="rock"></div>
<div class="shot"></div>
<div id="shooter"></div>

</div>
</body>
</html>

با نوشتن این چند خط اضافه عنصر ما به وسط صفحه منتقل میشه.اما چون توضیحش یکم طولانی و سخت میشه کاری به توضیحاتش ندارم.

خب ناحیه بازی ما آماده شد. حالا بریم سراغ مستطیل خودمون که قراره باهاش تیر بزنیم.

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
<style>
#gameRegion{
   background: #efefef;
   border: 1px solid #555;
   width: 500px;
   height:400px;
}
#shooter{
   width:40px;
   height:10px;
   background: red;
   position:absolute;
   bottom:10px;
   right:0;
   left:0;
   margin:auto;
}
</style>
</head>
<body>
<div id="gameRegion">

<div class="rock"></div>
<div class="shot"></div>
<div id="shooter"></div>

</div>
</body>
</html>

خب مستطیلمون هم آماده شد.حالا فقط تیر ها و سنگ هایی که قراره از بالای صفحه بیان باقی موندن.

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
<style>
#gameRegion{
   background: #efefef;
   border: 1px solid #555;
   width: 500px;
   height:400px;
}
#shooter{
   width:40px;
   height:10px;
   background: red;
   position:absolute;
   bottom:10px;
   right:0;
   left:0;
   margin:auto;
}
.rock{
   width:40px;
   height:40px;
   border-radius:50%;
   background:#333;
   position:absolute;
   top:0;
   left:0;
}
.shot{
   width:2px;
   height:2px;
   background:red;
   position:absolute;
   bottom:30px;
   right:0;
   left:0;
   margin:auto;
}
</style>
</head>
<body>
<div id="gameRegion">

<div class="rock"></div>
<div class="shot"></div>
<div id="shooter"></div>

</div>
</body>
</html>

این کد ها هم سنگ و تیر ما رو میسازن که در آموزش بعدی اون ها رو حرکت میدیم و تعداد زیادی قراره ازشون بسازیم.اما قبل از اینکه به پایان این آموزش برسیم ٬ نکته ای که وجود داره صدا زدن کلاس ها با . هست.دیدیم که عناصری که دارای آیدی بودند رو با # صدا میزدیم.برای صدا زدن عناصر بر اساس کلاسی که بهشون نسبت داده شده ٬ داخل سی اس اس ٬ قبل از اسم اون کلاس . میذاریم و بعد از اون اسم کلاس رو مینویسیم ٬ مثل .shot یا .rock .

خب این قسمت از آموزش به پایان رسید و توی قسمت بعدی ٬ سراغ جاوا اسکریپت و اصل بازی میکنیم.امیدوارم که داخل این مطلب چیز جدیدی یاد گرفته باشید.منتظر قسمت بعد باشید 🙂

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