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

إضافة مكعب أحمر إلى منطقة اللعبة:

إضافة مكون

إنشاء مكون بناء يسمح لك بإضافة المكونات إلى منطقة اللعبة.

وظيفة بناء هذا العنصر تسمىمكون (component)، قمنا بإنشاء المكون الأول، واسمه 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);
}

تجربة بنفسك

هذه المكونات تحتوي على خصائص وأساليب تحكم مظهرها وحركتها.

الإطار

لإعداد اللعبة بشكل جيد للتحرك، سنقوم بتحديث العرض كل ثانية 50 مرة، مما يشبه إطارات الفيلم.

الجديد updateGameArea() الجديدة. أولاً، قم بإنشاء اسم

في المعادلة في 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();
}

تجربة بنفسك