الحركة في اللعبة

باستخدام الطريقة الجديدة لرسم المكونات التي تم شرحها في فصل التحول، أصبحت الحركة الآن أكثر مرونة.

كيفية تحريك الكائن؟

في component إضافة سرعة التي تمثل السرعة الحالية للمكون.

أيضًا على خاصية newPos() تغيير بعض الأساليب، ليعتمد سرعة و angle حسابات موقع المكون.

بافتراض الافتراض، يكون المكون وجهه إلى أعلى، من خلال تعيين سرعة للبدء في الحركة. خاصية

مثال

function component(width, height, color, x, y) {
  this.gamearea = gamearea;
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

جربها بنفسك

الانعطاف

نأمل أيضًا في أن نستطيع الدوران إلى اليسار واليمنا. أنشئ اسمًا جديدًا moveAngle الخاصية الجديدة، التي تشير إلى القيمة الحالية للتحرك أو الزاوية التدويرية. newPos() في طريقة moveAngle حسابات الخاصية angle:

مثال

يرجى تعيين خاصية moveangle إلى 1 لمعرفة ما سيحدث:

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  this.moveAngle = 1;
  this.speed = 1;
  this.x = x;
  this.y = y;
  this.update = function() {
    ctx = myGameArea.context;
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.rotate(this.angle);
    ctx.fillStyle = color;
    ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
    ctx.restore();
  }
  this.newPos = function() {
    this.angle += this.moveAngle * Math.PI / 180;
    this.x += this.speed * Math.sin(this.angle);
    this.y -= this.speed * Math.cos(this.angle);
  }
}

جربها بنفسك

استخدام لوحة المفاتيح

كيف يتحرك المربع الأحمر باستخدام لوحة المفاتيح؟ عندما تستخدم "الصعود" السهم، لن يتحرك المربع الأحمر للأعلى والأسفل، بل سيقوم بالانتقال من جهة إلى جهة أخرى ويتحرك للأمام، وسيقوم بالدوران إلى اليسار واليمنا عند الضغط على السهمين اليسار واليمنا.

مثال

جربها بنفسك

تأكد من أن منطقة اللعبة تحصل على التركيز، ثم استخدم مفاتيح الأسهم للتحرك بالكرة الحمراء.