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

[saalek110]

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


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

سایت خود را بسازید ، به روش saalek110

سایت خود را بسازید ، به روش saalek110 در این روش شما فقط html و css یاد می گیرید که خیلی خیلی ساده است و در همین تاپیک مقداریش آموزش داده می شود. کدهای php کدش به شکل آماده در اختیار شما قرار می گیرد. جاوا اسکریپت هم خیلی کم استفاده شده و کدش آماده در پست ها قرار داده می شود. طرز استفاده از...

forum.majidonline.com

یا این تاپیک:

ورژن یک سایت ساز منتشر شد ، بسته سایت ساز ، تاپیک سایت خود را بسازید

ورژن یک سایت ساز منتشر شد ، بسته سایت ساز ، تاپیک سایت خود را بسازید تاپیک فعلی یک تاپیک با موضوع تون کوین، نات کوین بود که چون اعتقادی به رمزارزها ندارم ، پستهایش را ادیت کردم تا برای کار فعلی مورد استفاده قرار گیرد.برای همینه تاریخ این پست مال یکی دو سال پیشه.

forum.majidonline.com

 

[saalek110]

لیست:

 

[saalek110]

کانواس یک سری دستورات رسم است ، مثلا رسم مربع و دایره و خط.
اینها دستورات ساده ای هستند و نیاز به آموزش ندارد. در تاپیک زیر این دستورات را ببینید:

کانواس

کانواس

forum.majidonline.com

 

[saalek110]

در تاپیک حاضر ، فرض می کنیم دستورات کانواس را شما بلدید و کدهای جاوا اسکریپت را فقط توضیح می دهیم

 

[saalek110]

داستان اصلی از تاپیک زیر شروع شد:

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

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

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

forum.majidonline.com

ولی من دیدم اون تاپیک کمی بی نظم است ، پس تصمیم گرفتم این تاپیک را با نظم و ترتیب بیشتر بنویسم.

 

[saalek110]

فرض کنیم شما تمام دستورات کانواس را بلدید، مثلا رسم مربع و دایره را بلدید... ولی آیا این دستورات خودش بازی می سازد؟ خیر. درسته که با نوشتن اون دستورات بلدید کلی شکل بسازید.. ولی همه شکلها کنار هم یا روی هم قرار بگید ، شبیه یک تابلو نقاشی میشه نه بازی.....

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


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

 

[saalek110]

ساختار بازی:
باید یک ساختاری داشته باشید که هر از چند گاهی بازی شما را راه بیاندازد. مثلا هر ۲۰ میلی ثانیه یا هر ۱۰۰ ملی ثانیه یا هر ۱ ثانیه یا چند ثانیه. بسته به نوع بازی.
در اون تاپیک ، که الان رسیده به صفحه ۵ ، ما دو ساختار را بررسی کردیم.
اولی یک بازی از سایت w3school که در صفحات اول اون تاپیک است. من ساختار اون بازی را اول تحلیل کردم ، بعد دیدم شلوغ است ، شروع به از هم باز کردن اونها کردم... بعد با کد باز شده و با کمی اضافه کردن کد ، یک بازی تانک ساختم که فقط با برخورد به ستونها ، رنگ ستون ها عوض میشد.

بعدش یک سورس دیگه از یک سایت سورس پیدا کردم که در صفحه ۴ اون تاپیک است ، یعنی پستهای ۶۰ تا ۸۰
ساختار اون ساده تر بود و اون نیاز ما برای هر از چند گاه اجرا شدن را براورده می کند.

 

[saalek110]

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

 

[saalek110]

کد ساختار:

"use strict";

var Game = {
    canvas : undefined,
    canvasContext : undefined,
    rectangle_x : 0,
    rectangle_y : 0,
    rectangle_h : 10,
    rectangle_w : 10
};

Game.start = () => {
    Game.canvas = document.getElementById("myCanvas");
    Game.canvasContext = Game.canvas.getContext("2d");
    Game.mainLoop();
}

Game.update = () => {
    Game.rectangle_x += 1;
    Game.rectangle_y += 1;
}

Game.draw = () => {
    Game
        .canvasContext
        .clearRect(
            0,
            0,
            Game.canvas.width,
            Game.canvas.height
        );

    Game.canvasContext.fillStyle = "blue";
    Game
        .canvasContext
        .fillRect(
            Game.rectangle_x,
            Game.rectangle_y,
            Game.rectangle_w,
            Game.rectangle_h
        );
}

Game.mainLoop = () => {
    Game.update();
    Game.draw();
    window.setTimeout(Game.mainLoop, 1000/60);
}

document.addEventListener('DOMContentLoaded', Game.start);

ادیت بعد پست ۳۶:
من تا پست ۳۶ ۳ قالب معرفی کردم، و در پست ۳۶ گفتم قالب به طور خلاصه چیه. پست ۳۶ را بخوانید و قالب سوم بدون دکمه را ببینید..شاید نیازی به دیدن قالب ۱ و ۲ نداشته باشید.

 

[saalek110]

بررسی ساختار:
می بینید که خیلی کوتاه است و فهم آن ساده است.
شما کدهای خودتون را در دو تابع update و draw قرار می دهید.
قسمت update برای تغییر اعداد. و قسمت draw برای رسم.
در کد بالا که برنامه حرکت یک مربع آبی به سمت پایین و راست به شکل مورب است ، می بینید که فقط xو y مربع اضافه شده ، و در قسمت draw هم خوب مربع رسم میشه.... می بینید که کار ساده است.

در این قسمت:

Game.mainLoop = () => {
    Game.update();
    Game.draw();
    window.setTimeout(Game.mainLoop, 1000/60);
}

هر چی اون عدد را بزرگ تر کنید ، بازی کندتر میشه.

 

[saalek110]

کدهای بالا را در فایل با پسوند js می توانید ذخیره کنید واسم فایل را در فایل html خود بگید ، یا بین تگهای script باز و script بسته بزارید. این طوری:

<script>
..
....
...
..
</script>

 

[saalek110]

فایل html اون ساختار را نویسنده این طوری نوشته:

<!DOCTYPE html>
<html>
    <head>
        <title>Movin Squares</title>
    </head>
    <body>
        <canvas id="myCanvas" height="500" width="500"></canvas>
    </body>
    <script src="script.js"></script>
</html>

در کدهای بالا ، یک کانکاس با نام myCanvas معرفی شده. و فایلی به نام script.js هم نام برده شده... پس کدهای خود را باید در فایلی به نام script.js قرار دهید.

 

[saalek110]

این ساختار از من نیست و متعلق به نویسنده کد لینک زیر است:

GitHub - PratikGarai/Javascript-Games: Some HTML5 Canvas Games

Some HTML5 Canvas Games. Contribute to PratikGarai/Javascript-Games development by creating an account on GitHub.

github.com

PratikGarai ، نام ایشان است ، و بابت کد از ایشان تشکر می کنم.

 

[saalek110]

در فایل html خود می توانید کدهای زیر را هم قرار دهید:

<center>
<p id="the_heart"></p>
<table><tr><td>
<button type="button" style=" font-size:35px; height:80px; width:140px" onclick="accelerate(4)">left</button>
</td>
<td>
<button type="button" style=" font-size:12px; height:150px; width:100px" onclick="accelerate(1)">up</button>
<br>
<button type="button" style=" font-size:12px; height:150px; width:100px" onclick="accelerate(3)">down</button>
</td>
<td>
<button type="button" style=" font-size:35px; height:80px; width:140px" onclick="accelerate(2)">right</button>
</td></tr>
</table>
</center>

مثلا قبل از :

</body>

۴ تا دکمه است که با زدن اونها با تابعی جاوا اسکریپت به نام accelerate ارتباط برقرار می کند.
اگر کسی در گوشی باشه ، جایگزین کلیدهای جهت کیبورد میشه....

این هم تابع accelerate که می توانید زیر باقی توابع جاوا اسکریپت قرار دهید.

function accelerate(n) {
    if (n==1)    Snake.direction = 1;
    if (n==2)    Snake.direction = 2;
    if (n==3)    Snake.direction = 3;
    if (n==4)    Snake.direction = 4;
 }

در کد بالا ، برای بازی مار یا snake بوده و جهت حرکت مار را تعیین می کرده ، شما متناسب با بازی خود کد بنویسید.

 

[saalek110]

خط کد زیر:

<p id="one_name"></p>

برای اینه که جا ا اسکریپت بتونه اونجا چیزی بنویسه. با کد زیر:

document.getElementById("one_name").innerHTML="yek neveshteh " ;

اگر این طوری بنویسیم:

document.getElementById("p3").innerHTML+= "updategamearea" ;

یعنی =+ بزاریم...نوشته قبلی در اون منطقه را پاک نمی کنه و به اون نوشته ، نوشته بعدی را اضافه می کنه..

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

از این p ها هر چند تا بخواهید می توانید در قسمت html داشته باشید و هر قسمت بازی گزارش خودش را اونجا انجام بده....

عدد هم می تونید بنویسید. من خودم با کد زیر عدد نوشتم:

document.getElementById("p5").innerHTML=  "frameno= " + JSON.stringify(myGameArea.frameNo) ;

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

 

[saalek110]

برگردیم به بررسی ساختار برنامه:
کد ساختار:
دو فایل زیر با هم کار می کند نه جدا.

فایل اول باهر اسمی ولی با پسوند html:

<!DOCTYPE html>
<html>
    <head>
        <title>Movin Squares</title>
    </head>
    <body>
        <canvas id="myCanvas" height="500" width="500"></canvas>
    </body>
    <script src="script.js"></script>
</html>

محتوای فایل script.js:

"use strict";
var Game = {
    canvas : undefined,
    canvasContext : undefined,
    rectangle_x : 0,
    rectangle_y : 0,
    rectangle_h : 10,
    rectangle_w : 10

};

Game.start = () => {
    Game.canvas = document.getElementById("myCanvas");
    Game.canvasContext = Game.canvas.getContext("2d");
    Game.mainLoop();
}
Game.update = () => {
    Game.rectangle_x += 1;
    Game.rectangle_y += 1;
}

Game.draw = () => {
    Game
        .canvasContext
        .clearRect(
            0,
            0,
            Game.canvas.width,
            Game.canvas.height
        );

    Game.canvasContext.fillStyle = "blue";
    Game
        .canvasContext
        .fillRect(
            Game.rectangle_x,
            Game.rectangle_y,
            Game.rectangle_w,
            Game.rectangle_h
        );
}
Game.mainLoop = () => {
    Game.update();
    Game.draw();
    window.setTimeout(Game.mainLoop, 1000/60);
}
document.addEventListener('DOMContentLoaded', Game.start);

 

[saalek110]

من کدهای پست قبل را در دو فایل با نامهای my_file.html و script.js در پوشه ای به نام base_structure آپلود کردم.

لینکش اینه:
saalek121.fast-page.org/test/amozesh/base_structure/my_file.html

Movin Squares

نتیجه اجرا، یک مربع آبی کوچک در حال حرکت به سمت پایین و راست به شکل مورب:

 

[saalek110]

در قسمت update که گفتم ، فقط مختصات x و y مربع افزایش پیدا کرده،
و در قسمت draw اول صفحه را پاک کرده، بعد مربع را رسم کرده..

اگر اول پاک نکنیم این طوری میشه:
saalek121.fast-page.org/test/amozesh/base_structure2/my_file.html

Movin Squares

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

 

[saalek110]

این خط کد:

document.addEventListener('DOMContentLoaded', Game.start);

فکر کنم برای دریافت ورودی کاربر است.. شاید برای کیبورد باشه.. من خودم در گوشی کار می کنم.

بازی snake از همین نویسنده را در صفحه ۴ اون تاپیک ببینید و بررسی کنید تا بفهمید این کد برای چیه.

 

[saalek110]