مكونات اللعبة

Kara birin baka dan zuwa kudancin wasan:

Kara komponen

Kafa fitaccen mai kirkira komponen, wanda ke ba shi damar kara komponen zuwa kudancin wasan.

Fitaccen mai kirkira wanda ke kirakomponen (component), ake kafa farkon komponen, wanda ake kira myGamePiece:

مثال

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

تجربة شخصية

Manhada za'annan da ke kula da fasalin kuma kaiwa.

Fim

Lallaka dake da nuna kuma zane kaiwa, ake kura kai kada 50, wanda kai kuma yana kama abin da ke fimin.

首先，创建一个名为 updateGameArea() 的新函数。

在 myGameArea 对象中，添加一个间隔，该间隔将每 20 毫秒运行一次 updateGameArea() 函数（每秒 50 次）。再添加一个名为 clear() 的函数，用于清除整个画布。

在 component 构造函数中，添加了一个名为 update() 的函数，用于处理组件的绘制。

updateGameArea() 函数调用 clear() 和 update() 方法。

结果是组件每秒会被绘制和清除 50 次：

مثال

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]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

تجربة شخصية

让它动起来

为了证明红色方块每秒被绘制 50 次，每次更新游戏区域时，我们都会将 x 位置（水平）更改一个像素：

مثال

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

تجربة شخصية

为什么要清理游戏区？

似乎没有必要在每次更新时清理游戏区域。然而，如果我们省略 clear() 方法，组件的所有移动都会留下它在最后一帧中的位置的痕迹：

مثال

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

تجربة شخصية

تغيير الحجم

يمكنك التحكم في عرض وارتفاع العنصر:

مثال

إنشاء مستطيل بعرض 10x140 بكسل:

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

تجربة شخصية

تغيير اللون

يمكنك التحكم في لون العنصر:

مثال

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

تجربة شخصية

يمكنك استخدام أي قيمة لون أخرى، مثل الشيفرة السداسية أو rgb أو rgba:

مثال

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

تجربة شخصية

تغيير الموقع

نستخدم الأشكال x و y لتحديد موضع العناصر في منطقة اللعبة.

مطلق الزاوية العلوية اليسرى للرسم هو (0,0).

يمكنك عرض الأشكال x و y عن طريق وضع المؤشر الفارغ في منطقة اللعبة أدناه:

يمكنك وضع العناصر في أي مكان في منطقة اللعبة:

مثال

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

تجربة شخصية

عناصر متعددة

يمكنك وضع أي عدد من العناصر في منطقة اللعبة:

مثال

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

تجربة شخصية

تحريك العناصر

لتحريك الثلاثة عناصر في اتجاهات مختلفة في نفس الوقت:

مثال

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

تجربة شخصية