کاور بازی

عنصر <canvas> HTML در صفحه وب به عنوان یک شیء مستطیل نمایش داده می‌شود:

کانواس HTML

<canvas> عناصر به خوبی برای توسعه بازی‌ها در HTML مناسب هستند.

<canvas> عناصر تمامی امکانات مورد نیاز برای ساخت بازی را فراهم می‌کند.

از JavaScript در <canvas> رسم، نوشتن متن، وارد کردن تصاویر و غیره.

.getContext("2d")

<canvas> عنصر یک شیء داخلی دارد که به نام getContext("2d") اشیاء، روش‌ها و ویژگی‌های مورد نیاز برای طراحی بازی را فراهم می‌کند.

شما می‌توانید در Canvas در آموزش <canvas> عناصر و getContext("2d") اطلاعات بیشتری در مورد اشیاء

پس، شروع کنید

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

مثال

function startGame() {
  myGameArea.start();
}
var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  }
}

آزمایش کنید

در بخش‌های بعدی این آموزش، اشیاء myGameArea مزایا و روش‌های بیشتری خواهید داشت.

توابع startGame() دعوت myGameArea 对象的 start() روش ایجاد کرده است.

start() یک <canvas> عنصر و به عنوان اولین فرزند به آن اضافه شود <body> در عنصر.