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

بریم سراغ قسمت اصلی ساخت بازی با جاوا اسکریپت. و اینکه اگر من مدام این عبارت ساخت بازی با جاوا اسکریپت رو تکرار میکنم فقط برای سئوی مطلب هستش و امیدوارم دلخور نشید D:

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

خب اول از همه نیاز داریم که فایل جاوا اسکریپتمون رو به فایل HTML متصل کنیم.برای اینکار فایل index.html رو باز کنید و داخل تگ <head> و بعد از <title> کد زیر رو بنویسید.

<!doctype html>
<html lang="fa">
<head>
<title>Simple Js Game</title>
<script type="text/javascript" src="main.js"></script>
<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>

 

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

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

فایل main.js رو باز کنید و داخلش کد های زیر رو بنویسید.

window.onload = init;
window.onkeydown = keyDown;
window.onkeyup = keyUp;

var KEYRIGHT;
var KEYLEFT;
var KEYSPACE;

const shooter;
const gameRegion;

function init(){
   shooter = document.querySelector('#shooter');
   gameRegion = document.querySelector('#gameRegion');
}

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

پس خط پنجم به معنای تعریف یک متغیر با نام KEYRIGHT هست.و همونطور که میبینید همه خطوط تهشون ; ( سمی کالن یا SemiColon ) دارن که باید همیشه یادتون باشه بذارید.

اما توی خط دوازدهم سمی کالن نذاشتیم. دلیلش چیه؟

توی جاوا اسکریپت موقع تعریف کردن یک تابع ( Function ) ٬ شرط گذاشتن ( If ) ٬ ایجاد حلقه ( Loop ) و … نیاز به سمی کالن نداریم.و فقط نیاز به {} هست که کد هایی که قرار هست تابع اجرا کنه ٬ یا بر اساس شرط اجرا شن ٬ یا توی هر دور حلقه نیاز به اجرا دارند رو درون این آکولاد ها میذاریم.

قبل از اینکه بریم سراغ خط اول تا سوم ٬ باید با مفهوم رویداد ( Event ) آشنا شید.

رویداد به معنی اتفاق هست.یعنی یک اتفاقی میفته یک کاری باید انجام شه.اتفاقی مثل فشرده شدن یک دکمه روی کیبورد ٬ یا اتفاقی مثل لود شدن صفحه.

توی خط اول ما اومدیم رویداد لود شدن صفحه رو تعریف کردیم و در صورتی که اتفاق افتاد گفتیم که تابع init رو اجرا کنه.

خط دوم میگه که وقتی یک دکمه فشرده شد تابع keyDown رو اجرا کن که هنوز تعریفش نکردیم.

و داخل خط سوم هم میگیم وقتی دستمون از روی دکمه برداشته شد تابع keyUp رو اجرا کن که اون رو هم هنوز تعریف نکردیم.

حالا بریم سراغ تابع init.همونطور که توی دو خط بالاتر توضیح دادم گفتیم که وقتی صفحه لود شد این تابع باید اجرا شه.توی این تابع میایم اتفاقاتی که باید به محض لود شدن صفحه بیفته رو مشخص میکنیم.مثل مقدار دهی کردن.

درون تابع init گفتیم به متغیر shooter مقداری برابر با document.querySelector(‘#shooter’) رو دادیم.حالا این خط چیکار میکنه؟

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

خط بعدی هم که میاد دنبال عنصری با آیدی gameRegion توی صفحه میگرده و اون رو توی متغیر gameRegion میریزه.

اگه یادتون باشه گفتم که ما تعریف کردیم وقتی رویداد onkeydown رخ داد ٬ تابع keyDown باید اجرا شه و اون رو تعریف نکردیم هنوز.

پس تعریفش میکنیم :

window.onload = init;
window.onkeydown = keyDown;
window.onkeyup = keyUp;

var KEYRIGHT;
var KEYLEFT;
var KEYSPACE;

const shooter;
const gameRegion;

function init(){
   shooter = document.querySelector('#shooter');
   gameRegion = document.querySelector('#gameRegion');
}

function keyDown(e){
   if(e.keyCode == 39){
     alert('کلید جهتی راست');
   }
   if(e.keyCode == 37){
     alert('کلید جهتی چپ');
   }
   if(e.keyCode == 32){
     alert('کلید اسپیس');
   }
}

function keyUp(e){
   if(e.keyCode == 39)
   {
     alert('کلید جهتی راست رها شد');
   }
   if(e.keyCode == 37)
   {
     alert('کلید جهتی چپ رها شد');
   }
   if(e.keyCode == 32)
   {
     alert('کلید اسپیس رها شد');
   }
}

خب ما دو تابع keyDown و keyUp رو تعریف کردیم.اگه دقت کنید میبینید که درون پرانتزی که جلوی تابع init هست چیزی نوشته نشده اما داخل پرانتز های جلوی keyDown و keyUp حرف e رو نوشتیم و داخل تابع هم ازش استفاده کردیم.

پرانتز های جلوی توابع برای دریافت یک پارامتر و یا مقدار هستند که میتونید از این مقدار داخل تابع استفاده کنید و این مقدار هر اسمی میتونه داشته باشه.به مثال زیر توجه کنید :

function foo(bar){
   alert('bar');
}
foo('hello');

ما کی تابع به اسم foo تعریف کردیم و مقدار bar رو به عنوان پارامتر براش در نظر گرفتیم.داخل تابع هم اومدیم و اون رو با تابع از پیش تعریف شده alert که داخل جاوا اسکریپت هست نشون دادیم.بعد از تعریف تابع ٬ ما تابع رو فراخوانی کردیم و بهش مقدار hello رو پاس دادیم.hello در واقع میاد داخل تابع و هر جایی که از bar استفاده شده باشه بجای اون قرار میگیره.و این باعث میشه که hello به کاربر نشون داده شه.

توی توابع keyDown و keyUp هم همین اتفاق رخ داده.

و اما بریم سراغ کد داخل این دو تابع.داخل هرکدوم از این دو تابع ٬ ۳ شرط وجود داره.

متغیر e که به تابع پاس داده شده ٬ خصوصیتی به اسم keyCode داره که به معنی کد کلید فشرده شده هست.هر کلید موجود در کیبورد ٬ دارای یک کد عددی مخصوص هست.۳۹ برای کلید جهتی راست ٬ ۳۷ کلید جهتی چپ و ۳۲ برای اسپیس هست.پس ما اومدیم شرط گذاشتیم که اگر کلید جهتی سمت راست فشرده شد ٬ اعلام کنه کلید جهتی سمت راست و به همین صورت برای دو کلید دیگه.

این آموزش ساخت بازی با جاوا اسکریپت هم اینجا به پایان میرسه تا توی قسمت بعد بریم سراغ کارای یکم هیجانی تر 🙂

اگر هم سوالی دارید ٬ توی کامنت ها منتظرتون هستم.

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