آموزش ساخت بازی با جاوا اسکریپت – راهنمای کامل و ساده

فیلم آموزش ساخت بازی Platformer 2D در یونیتی Unity در فرادرس

مقایسه جاوا اسکریپت و جاوا برای توسعه بازی

اغلب اوقات پیش می‌آید که افراد جاوا و جاوا اسکریپت را مرتبط با هم در نظر می‌گیرند و حتی گاهی به اشتباه فکر می‌کنند این دو زبان یکسان هستند و تفاوت جاوا و جاوا اسکریپت را نمی‌دانند. در یک کلام می‌توان گفت که جاوا و جاوا اسکریپت دو زبان کاملاً مجزا هستند و تنها وجه اشتراک آن‌ها این است که کلمه «جاوا» در هردوی آن‌ها وجود دارد. جاوا اسکریپت نوعی زبانی «مفسری» (Interpreter) است و از طرفی دیگر زبان جاوا نوعی زبان «کامپایلری» (Compiler) به‌حساب می‌آید.

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

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

مقایسه جاوا و جاوا اسکریپت برای توسعه بازی

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

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

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

بازی‌ های محبوب ساخته شده با جاوا اسکریپت

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

«Tower Building»: این بازی ایده‌ای عالی برای شروع ساخت بازی با جاوا اسکریپت است. این بازی به بازیکنان اجازه می‌دهد تا بلوک‌ها را روی هم چیده و یک برج بسیار بلند بسازند. بازی Tower Building برای تلفن‌های همراه توسعه داده شده و علاوه براین، کد منبع آزاد آن در «گیت هاب» (GitHub) موجود است و کاربران می‌توانند جزئیات ساخت و توسعه آن را بررسی کنند و حتی آن را بهبود ببخشند.
«Bejeweled»: این بازی به‌عنوان نوعی بازی مبتنی بر مرورگر در اوایل دهه 2000 ساخته شد. این بازی بسیار شبیه به بازی «Candy Crush» است که در آن بازیکن باید سه شی یا عنصر هم نوع را پشت سر هم برای کسب امتیاز قرار دهد.
«2048»: این هم نوعی بازی جذاب ساخته شده با جاوا اسکریپت است که در آن بازیکنان می‌توانند از کلیدهای جهت‌دار برای جابه‌جایی عناصر استفاده کنند. هدفِ این بازی، لغزاندن کاشی‌های شماره‌دار روی یک شبکه شطرنجی به‌گونه‌ای است که بتوان کاشی‌ها را با هم طوری ترکیب کرد تا کاشی با شماره ۲۰۴۸ ایجاد شود.
«Polycraft»: این بازی ساخته شده با جاوا اسکریپت نیز نوعی بازی سه بُعدی است که در مرورگر اجرا می‌شود. این بازی جذاب نیز پر از ماجراجویی، اکتشاف، جمع‌آوری، کاردستی و حتی مبارزه است.
«Words With Friends 2»: این بازی جذاب برای موبایل ساخته شده است و در ساخت آن از React Native استفاده کرده‌اند. React Native فریمورکی برای ایجاد بازی و اپلیکیشن موبایل با جاوا اسکریپت است.

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

بهترین موتورهای بازی جاوا اسکریپت

کدهای جاوا اسکریپت صرفاً متن هستند و به تنهایی نمی‌توانند هر کاری را انجام دهند، بنابراین این کدها برای عملی کردن ساخت بازی با جاوا اسکریپت نیاز به چیزی به نام «موتور بازی» (Game Engine) یا «کتابخانه رندرینگ» پیدا می‌کنند، یادگیری کار با موتورهای بازی قدم مهم دیگری در توسعه بازی است و تنها کدنویسی برای این هدف کافی نیست.

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

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

موتور بازی PixiJS جاوا اسکریپت

موتور بازی «PixiJS» نوعی موتور بازی جاوا اسکریپت منبع باز است که سرعت بالا و قابلیت استفاده API، از ویژگی‌های مهم این موتور بازی به حساب می‌آیند. این موتور بازی همچنین دارای رندر دو بعدی و قابلیت پشتیبانی «چندپلتفرمی» (Cross Platform) است تا کاربران بتوانند بازی‌های خود را برای چندین پلتفرم بسازند. منبع آزاد بودن یان موتور بازی جاوا اسکریپتاین امکان را فراهم کرده است تا موتور بازی PixiJS پیشرفت چشم‌گیری داشته باشد و همزمان متخصصان زیادی روی آن کار کرده‌اند تا به این پیشرفت کمک کنند.

ساخت بازی با جاوا اسکریپت به وسیله موتور بازی BabylonJS

موتور بازی «BabylonJS» نیز نوعی کتابخانه رندرینگ یا موتور بازی به‌حساب می‌آید و دارای ابزارهای بسیار قدرتمندی است که به کاربران امکان می‌دهد هر چیزی از انیمیشن‌های ساده گرفته تا بازی‌های سه‌ بعدی را ایجاد کنند.

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

موتور بازی جاوا اسکریپت Phaser

«Phaser» نیز نوعی موتور بازی است که از ساخت بازی‌های HTML5 دسکتاپ و موبایل پشتیبانی می‌کند. تمرکز اصلی این موتور بازی بر روی توسعه بازی‌های دو بُعدی است که قابلیت کامپایل و اجرا را در چندین پلتفرم دارند. یکی از مهم‌ترین مزایای موتور Phaser امکان استفاده از افزونه‌های اضافی در صورت نیاز است. این ویژگی Phaser به توسعه‌دهنده این امکان را می‌دهد که اجزای بازی خود را تا حد امکان سبک و کوچک نگه دارد و اجزای غیرضروری را از بازی حذف کند.

فریمورک توسعه بازی جاوا اسکریپت MelonJS

فریمورک توسعه بازی «MelonJS» نوعی موتور بازی کم حجم است و به توسعه‌دهندگان امکان افزودن افزونه‌های مورد نیاز و دلخواه را می‌دهد. این موتور ساخت بازی با جاوا اسکریپت به کاربر امکان می‌دهد ویژگی‌هایی مانند برخورد، سایه، فیزیک، جلوه‌های ویژه و موارد دیگر را به بازی اضافه کند. همچنین در مقایسه با سایر موتورهای بازی، به خاطر رابط کاربری ساده و مبتدی بودن بسیار معروف است.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کتابخانه توسعه بازی با جاوا اسکریپت Three.js

کتابخانه «Three.js» نیز یکی دیگر از کتابخانه‌های محبوب برای ارائه گرافیک‌های سه‌ بُعدی در مرورگر وب برای ساخت بازی با جاوا اسکریپت به‌حساب می‌آید. این کتابخانه بسیار محبوب و همچنین استفاده از آن بسیار ساده است و نمونه بازی‌های ساخته شده زیادی با آن وجود دارند. رندر پیش‌فرض این موتور بازی «WebGL» است، اما از رندرهای «SVG» ،»Canvas 2D» و «CSS3D» نیز پشتیبانی می‌کند.

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

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

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

برای مشاهده همه فیلم‌های آموزش جاوا اسکریپت فرادرس و شروع یادگیری + اینجا کلیک کنید.

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

برای ساخت بازی با جاوا اسکریپت به یک سری پیش‌نیازها و مراحل نیاز است. در این بخش از مطلب قرار بر این است که بازی مار با جاوا اسکریپت یا همان بازی Snake پیاده‌سازی شود. به‌منظور درک عمیق‌تر ساخت بازی با زبان جاوا اسکریپت، این مثال به صورت ساده ارائه خواهد شد تا به کاربر دید شفافی از این موضوع بدهد.

برای شروع کار ساخت بازی با زبان جاوا اسکریپت، به «کد ادیتوری» (ویرایشگر کد) مناسب نیاز است تا کدهای برنامه نویس درون آن نوشته شوند. ویرایشگرهای زیادی برای این منظور وجود دارند که کاربران می‌توانند از آن استفاده کنند. همچنین ویرایشگرهای آنلاین نیز هم‌اکنون در سطح وب در دسترس هستند که می‌توان از آن‌ها نیز استفاده کرد.

قدم ا - نمایش صفحه بازی و ساخت یک شی به عنوان مار

برای ساخت بازی مار با جاوا اسکریپت ابتدا باید صفحه بازی و مار ایجاد شوند. برای این کار، فایلی با نام «Snakegame.html» ایجاد می‌شود. این فایل شامل تمام کدهای پروژه ساخت بازی مار با جاوا اسکریپت خواهد بود که با باز کردن فایل بازی نیز اجرا خواهد شد. همچنین، به منظور ساخت بازی و ترسیم گرافیک باید از Canvas در HTML استفاده شود. canvas به عنوان صفحه بازی در نظر گرفته می‌شود. قطعه کد مربوط به انجام این کار به صورت زیر است:

1<canvas id="gameCanvas" width="400" height="400"><canvas>

نکته: id شناسه canvas است و همیشه باید مشخص شود. همچنین ابعاد عرض و ارتفاع Canvas را نیز باید در هنگام اعلان آن تعیین کنیم.

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

آموزش Canvas در HTML رایگان — به زبان ساده و گام به گام

فیلم آموزش کتابخانه Redux در جاوا اسکریپت JS برای مدیریت وضعیت برنامه ها در فرادرس

ساخت صفحه بازی مار با جاوا اسکریپت

در این مرحله صفحه بازی مورد استفاده برای بازی مار ساخته خواهد شد. برای این منظور، ابتدا عنصر canvas دریافت می‌شود که این کار با استفاده از id gameCanvas اتفاق می‌افتد که در بالا به آن اشاره شد. در مرحله بعدی در ساخت صفحه بازی، context 2d دریافت خواهد شد که این به معنای ایجاد فضای دو بعدی است. در ادامه مستطیلی آبی کم رنگ 400 در 400 با حاشیه سیاه ساخته می‌شود که تمام صفحه را از گوشه بالا سمت چپ یعنی نقطه (0، 0) می‌پوشاند. قطعه کد این کار به صورت زیر خواهد بود:

1const snakeboard = document.getElementById("gameCanvas");
2const snakeboard_ctx = gameCanvas.getContext("2d");

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

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

1let snake = [  {x: 200, y: 200},  {x: 190, y: 200},  {x: 180, y: 200},  {x: 170, y: 200},  {x: 160, y: 200},];

نکته: مختصات y برای همه قسمت‌ها همیشه 200 است. همچنین مختصات x باید 10 تا 10 تا کاهش یابد تا همه قسمت‌های مختلف بدن مار را نشان دهد. اولین نقطه مختصات، نشان دهنده سر مار است. حال می‌توان برای نمایش مار روی صفحه، تابعی نوشت که برای هر جفت مختصات، مستطیلی رسم کند. این تابع به صورت زیر نوشته خواهد شد:

1function drawSnakePart(snakePart) 
2{  
3  snakeboard_ctx.fillStyle = 'lightblue';  
4  snakeboard_ctx.strokestyle = 'darkblue';
5  snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
6  snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
7}
8 
9/*Function that prints the parts*/
10function drawSnake() 
11{  
12  snake.forEach(drawSnakePart);
13}

کنار هم گذاشتن کدهای قدم ١

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

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Js Snake Game - Faradras</title>
5    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
6
7  </head>
8
9  <body>
10
11    <canvas id="snakeboard" width="400" height="400"></canvas>
12
13    <style>
14      #snakeboard {
15        position: absolute;
16        top: 50%;
17        left: 50%;
18        transform: translate(-50%, -50%);
19      }
20    </style>
21  </body>
22
23  <script>
24    const board_border = 'black';
25    const board_background = "white";
26    const snake_col = 'lightblue';
27    const snake_border = 'darkblue';
28    
29    let snake = [
30      {x: 200, y: 200},
31      {x: 190, y: 200},
32      {x: 180, y: 200},
33      {x: 170, y: 200},
34      {x: 160, y: 200}
35    ]
36    
37    // Get the canvas element
38    const snakeboard = document.getElementById("snakeboard");
39    // Return a two dimensional drawing context
40    const snakeboard_ctx = snakeboard.getContext("2d");
41    // Start game
42    main();
43    
44    // main function called repeatedly to keep the game running
45    function main() {
46        clearCanvas();
47        drawSnake();
48    }
49    
50    // draw a border around the canvas
51    function clearCanvas() {
52      //  Select the colour to fill the drawing
53      snakeboard_ctx.fillStyle = board_background;
54      //  Select the colour for the border of the canvas
55      snakeboard_ctx.strokestyle = board_border;
56      // Draw a "filled" rectangle to cover the entire canvas
57      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
58      // Draw a "border" around the entire canvas
59      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
60    }
61    
62    // Draw the snake on the canvas
63    function drawSnake() {
64      // Draw each part
65      snake.forEach(drawSnakePart)
66    }
67    
68    // Draw one snake part
69    function drawSnakePart(snakePart) {
70
71      // Set the colour of the snake part
72      snakeboard_ctx.fillStyle = snake_col;
73      // Set the border colour of the snake part
74      snakeboard_ctx.strokestyle = snake_border;
75      // Draw a "filled" rectangle to represent the snake part at the coordinates
76      // the part is located
77      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
78      // Draw a border around the snake part
79      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
80    }
81    
82  </script>
83</html>

خروجی این مرحله به صورت تصویر زیر است:

در حال حاضر، تابع main فقط دو تابع clearCanvas()‎ و drawSnake()‎ را فراخوانی خواهد کرد.

قدم 2 - ایجاد حرکت خودکار مار

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

پیاده سازی حرکت افقی مار در محیط بازی

برای اینکه مار بتواند به‌صورت افقی حرکت کند باید مختصات x یا مختصات افقی آن را به‌صورت زیر تغییر دهیم.

برای اینکه مار بتواند یک قدم (10 پیکسل) به سمت راست حرکت کند، باید مختصات x افزایش یابد که برای هر قدم، این افزایش به‌صورت (dx = +10) یا 10 پیکسل است.
همچنین برای اینکه مار به سمت چپ حرکت کند باید مختصات x کاهش یابد، که این کاهش به‌صورت (dx = -10) یا کاهش 10 پیکسلی خواهد بود.

نکته: dx همان سرعت افقی مار است. همچنین باید تابعی به نام move_snake ایجاد شود تا snake را به‌روز کند. قطعه کد حرکت افقی مار به صورت زیر است:

1function move_snake() 
2{  
3  const head = {x: snake[0].x + dx, y: snake[0].y};
4  snake.unshift(head);
5  snake.pop();
6}

در تابع بالا سر جدید برای مار ایجاد می‌شود و در مرحله بعد این سر جدید با استفاده از snake.unshift به ابتدای snake اضافه خواهد شد و با استفاده از snake.pop آخرین عنصر snake حذف می‌شود. در نتیجه، تمام اجزای دیگر مار در جای خود قرار خواهند گرفت.

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

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

حرکت عمودی مار در صفحه

در این مرحله باید برای حرکت عمودی مار کد نوشت. برای این نوع حرکت، همه مختصات y را نباید تغییر داد چون با این کار کل بدن مار به بالا یا پایین حرکت می‌کند. برای رفع این مشكل باید فقط مختصات y سر مار را تغییر دهیم که این تغییر نیز به اندازه 10 پیکسل در هر حرکت انجام خواهد شد. با کاهش 10 پیکسلی برای حرکت مار به سمت بالا و افزایش 10 پیکسلی برای حرکت دادن مار به پایین، مار به‌درستی حرکت می‌کند. همچنین برای اجرای درست این عملکرد، متد move_snake باید به‌روز شود تا مختصات y سر مار، هم‌زمان با dy (سرعت عمودی مار) افزایش یابد.

1const head = {x: snake[0].x + dx, y: snake[0].y + dy};

حرکت خودکار مار در صفحه

برای حرکت مار، مثلاً 50 پیکسل به سمت راست، باید 5 بار move_snake(x) فراخوانی شود. با 5 بار فراخوانی این متد مار، به‌جای حرکت گام‌به‌گام به سمت آن نقطه، به موقعیت 50Px می‌پرد و برای اینکه مار به‌صورت خواسته شده حرکت کند، می‌توان با تنظیم setTimeout تأخیری جزئی بین هر تماس اضافه کرد. همچنین برای عملکرد صحیح باید اطمینان حاصل کرد هر بار که move_snake فراخوانی می‌شود، drawSnake نیز با آن فراخوانی شود، در غیر این صورت مراحل میانی که مار حرکت می‌کند، غیرقابل مشاهده خواهند بود. قطعه کد مربوط به پیاده‌سازی این عملکرد به صورت زیر است:

1setTimeout(function onTick() {  clearCanvas();  move_Snake();  drawSnake();}, 100);
2setTimeout(function onTick() {  clearCanvas();  move_Snake();  drawSnake();}, 100);
3...
4drawSnake();

نکته: ‎ clearCanvas‎‎() در داخل setTimeout فراخوانی می‌شود تا تمام موقعیت‌های قبلی snake را حذف کند.

این برنامه هنوز مشکل دارد، زیرا هیچ متد یا تابعی به برنامه نمی‌گوید که باید قبل از رفتن به setTimeout بعدی، منتظر setTimeout باشد. این یعنی که مار همچنان فقط با کمی تأخیر 50 پیکسل به جلو حرکت می‌کند، برای رفع این مشکل، باید کد را در داخل توابع قرار داد. به‌جای ایجاد تعداد بی‌نهایت توابع که یکدیگر را فراخوانی می‌کنند، می‌توان تابعی اصلی با نام function main() ایجاد کرد و آن را بارها و بارها فراخوانی کرد. قطعه کد مربوط به پیاده‌سازی این عملکرد به صورت زیر است:

1function main() 
2{  
3   setTimeout(function onTick() 
4   {    
5     clearCanvas();    
6     advanceSnake();  
7     drawSnake();
8     // Call main again
9     main();
10   }, 100)
11}

قرار دادن کدهای گام دوم ساخت بازی مار در کنار هم

در این مرحله باید کدهای قدم 2 ساخت بازی با جاوا اسکریپت در کنار هم قرار بگیرند تا روند ساخت بازی ادامه یابد. کدهای این مرحله به صورت زیر خواهند بود:

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Js Snake Game - Faradras</title>
5    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
6
7  </head>
8
9  <body>
10
11    <canvas id="snakeboard" width="400" height="400"></canvas>
12
13    <style>
14      #snakeboard {
15        position: absolute;
16        top: 50%;
17        left: 50%;
18        transform: translate(-50%, -50%);
19      }
20    </style>
21  </body>
22
23  <script>
24    const board_border = 'black';
25    const board_background = "lightblue";
26    const snake_col = 'red';
27    const snake_border = 'darkblue';
28    
29    let snake = [
30      {x: 200, y: 200},
31      {x: 190, y: 200},
32      {x: 180, y: 200},
33      {x: 170, y: 200},
34      {x: 160, y: 200}
35    ]
36
37    // Horizontal velocity
38    let dx = 10;
39    // Vertical velocity
40    let dy = 0;
41    
42    // Get the canvas element
43    const snakeboard = document.getElementById("snakeboard");
44    // Return a two dimensional drawing context
45    const snakeboard_ctx = snakeboard.getContext("2d");
46    // Start game
47    main();
48    
49    // main function called repeatedly to keep the game running
50    function main() {
51        setTimeout(function onTick() {
52        clear_board();
53        move_snake();
54        drawSnake();
55        // Call main again
56        main();
57      }, 100)
58    }
59    
60    // draw a border around the canvas
61    function clear_board() {
62      //  Select the colour to fill the drawing
63      snakeboard_ctx.fillStyle = board_background;
64      //  Select the colour for the border of the canvas
65      snakeboard_ctx.strokestyle = board_border;
66      // Draw a "filled" rectangle to cover the entire canvas
67      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
68      // Draw a "border" around the entire canvas
69      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
70    }
71    
72    // Draw the snake on the canvas
73    function drawSnake() {
74      // Draw each part
75      snake.forEach(drawSnakePart)
76    }
77    
78    // Draw one snake part
79    function drawSnakePart(snakePart) {
80
81      // Set the colour of the snake part
82      snakeboard_ctx.fillStyle = snake_col;
83      // Set the border colour of the snake part
84      snakeboard_ctx.strokestyle = snake_border;
85      // Draw a "filled" rectangle to represent the snake part at the coordinates
86      // the part is located
87      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
88      // Draw a border around the snake part
89      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
90    }
91
92    function move_snake() {
93      // Create the new Snake's head
94      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
95      // Add the new head to the beginning of snake body
96      snake.unshift(head);
97      snake.pop();
98    }
99    
100  </script>
101</html>

خروجی این مرحله به صورت زیر است:

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

قدم ٣ - استفاده از کلیدهای جهت دار برای تغییر جهت مار

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

تغییر جهت مار

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

1function change_direction(event) 
2{  
3   const LEFT_KEY = 37;
4   const RIGHT_KEY = 39;
5   const UP_KEY = 38;
6   const DOWN_KEY = 40;
7 
8   const keyPressed = event.keyCode;
9   const goingUp = dy === -10;
10   const goingDown = dy === 10;
11   const goingRight = dx === 10;  
12   const goingLeft = dx === -10;
13 
14     if (keyPressed === LEFT_KEY && !goingRight)
15     {    
16          dx = -10;
17          dy = 0;  
18     }
19 
20     if (keyPressed === UP_KEY && !goingDown)
21     {    
22          dx = 0;
23          dy = -10;
24     }
25 
26     if (keyPressed === RIGHT_KEY && !goingLeft)
27     {    
28          dx = 10;
29          dy = 0;
30     }
31 
32     if (keyPressed === DOWN_KEY && !goingUp)
33     {    
34          dx = 0;
35          dy = 10;
36     }
37}

به‌منظور ادغام تابع change_direction ، می‌توان از addEventListener در کدها برای پاسخ دادن به زمانی که یک کلید فشار داده می‌شود به نحو احسن استفاده کرد. سپس می‌توان change_direction را با رویداد keydown فراخوانی کرد. این کار با کد زیر امکان پذیر است.

1document.addEventListener("keydown", change_direction)

ایجاد شرط مرزی برای جلوگیری از حرکت بی نهایت

به منظور جلوگیری از حرکت بی‌نهایت مار، باید شرایط مرزی را به کدها اضافه کرد، یعنی زمانی که مار به مرز برخورد کند، بازی خاتمه یابد. برای این کار، باید تابعی به نام has_game_ended ساخته شود که وقتی بازی تمام شد، مقدار true و در غیر این صورت، مقدار false را بازگرداند.

در ساخت بازی مار با جاوا اسکریپت دو حالت زیر بازی را خاتمه می‌دهد:

سر مار با بدنش برخورد می‌کند.
سر مار با مرز صفحه برخورد می‌کند.

اعمال این دو شرط در کدهای زیر گنجانده شده است:

1function has_game_ended()
2{  
3  for (let i = 4; i < snake.length; i++)
4  {    
5    const has_collided = snake[i].x === snake[0].x && snake[i].y === snake[0].y
6    if (has_collided) 
7      return true
8  }
9  const hitLeftWall = snake[0].x < 0;  
10  const hitRightWall = snake[0].x > snakeboard.width - 10;
11  const hitToptWall = snake[0].y < 0;
12  const hitBottomWall = snake[0].y > snakeboard.height - 10;
13 
14  return hitLeftWall ||  hitRightWall || hitToptWall || hitBottomWall
15}

این تابع در ابتدا بررسی می‌کند که سر مار با اعضای بدن خودش برخورد می‌کند یا خیر و سپس برخورد مار به مرز صفحه را هم مورد بررسی قرار خواهد داد و در صورت ارضای هر یک از این دو شرط، بازی خاتمه خواهد یافت و بازیکن بازنده می‌شود.

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

قرار دادن کدهای مرحله 3 در کنار هم

در این مرحله از آموزش ساخت بازی با جاوا اسکریپت، کدهای مرحله ٣ به صورت زیر در کنار هم قرار داده شده‌اند:

1<!DOCTYPE html>
2<html>
3  <head>
4  	<title>Js Snake Game - Faradras</title>
5    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">
6
7  </head>
8
9  <body>
10
11    <canvas id="snakeboard" width="400" height="400"></canvas>
12
13    <style>
14      #snakeboard {
15        position: absolute;
16        top: 50%;
17        left: 50%;
18        transform: translate(-50%, -50%);
19      }
20    </style>
21  </body>
22
23  <script>
24    const board_border = 'black';
25    const board_background = "lightblue";
26    const snake_col = 'red';
27    const snake_border = 'darkblue';
28    
29    let snake = [
30      {x: 200, y: 200},
31      {x: 190, y: 200},
32      {x: 180, y: 200},
33      {x: 170, y: 200},
34      {x: 160, y: 200}
35    ]
36
37    // True if changing direction
38    let changing_direction = false;
39    // Horizontal velocity
40    let dx = 10;
41    // Vertical velocity
42    let dy = 0;
43    
44    // Get the canvas element
45    const snakeboard = document.getElementById("snakeboard");
46    // Return a two dimensional drawing context
47    const snakeboard_ctx = snakeboard.getContext("2d");
48    // Start game
49    main();
50
51    document.addEventListener("keydown", change_direction);
52    
53    // main function called repeatedly to keep the game running
54    function main() {
55
56        if (has_game_ended()) return;
57
58        changing_direction = false;
59        setTimeout(function onTick() {
60        clear_board();
61        move_snake();
62        drawSnake();
63        // Call main again
64        main();
65      }, 100)
66    }
67    
68    // draw a border around the canvas
69    function clear_board() {
70      //  Select the colour to fill the drawing
71      snakeboard_ctx.fillStyle = board_background;
72      //  Select the colour for the border of the canvas
73      snakeboard_ctx.strokestyle = board_border;
74      // Draw a "filled" rectangle to cover the entire canvas
75      snakeboard_ctx.fillRect(0, 0, snakeboard.width, snakeboard.height);
76      // Draw a "border" around the entire canvas
77      snakeboard_ctx.strokeRect(0, 0, snakeboard.width, snakeboard.height);
78    }
79    
80    // Draw the snake on the canvas
81    function drawSnake() {
82      // Draw each part
83      snake.forEach(drawSnakePart)
84    }
85    
86    // Draw one snake part
87    function drawSnakePart(snakePart) {
88
89      // Set the colour of the snake part
90      snakeboard_ctx.fillStyle = snake_col;
91      // Set the border colour of the snake part
92      snakeboard_ctx.strokestyle = snake_border;
93      // Draw a "filled" rectangle to represent the snake part at the coordinates
94      // the part is located
95      snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
96      // Draw a border around the snake part
97      snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
98    }
99
100    function has_game_ended() {
101      for (let i = 4; i < snake.length; i++) {
102        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
103      }
104      const hitLeftWall = snake[0].x < 0;
105      const hitRightWall = snake[0].x > snakeboard.width - 10;
106      const hitToptWall = snake[0].y < 0;
107      const hitBottomWall = snake[0].y > snakeboard.height - 10;
108      return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
109    }
110
111    function change_direction(event) {
112      const LEFT_KEY = 37;
113      const RIGHT_KEY = 39;
114      const UP_KEY = 38;
115      const DOWN_KEY = 40;
116      
117    // Prevent the snake from reversing
118    
119      if (changing_direction) return;
120      changing_direction = true;
121      const keyPressed = event.keyCode;
122      const goingUp = dy === -10;
123      const goingDown = dy === 10;
124      const goingRight = dx === 10;
125      const goingLeft = dx === -10;
126      if (keyPressed === LEFT_KEY && !goingRight) {
127        dx = -10;
128        dy = 0;
129      }
130      if (keyPressed === UP_KEY && !goingDown) {
131        dx = 0;
132        dy = -10;
133      }
134      if (keyPressed === RIGHT_KEY && !goingLeft) {
135        dx = 10;
136        dy = 0;
137      }
138      if (keyPressed === DOWN_KEY && !goingUp) {
139        dx = 0;
140        dy = 10;
141      }
142    }
143
144    function move_snake() {
145      // Create the new Snake's head
146      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
147      // Add the new head to the beginning of snake body
148      snake.unshift(head);
149      snake.pop();
150    }
151    
152  </script>
153</html>

خروجی این مرحله به صورت زیر است:

قدم ٤ - ساخت طعمه و امتیاز برای مار

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

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