مع طريقة جديدة لمكونات الرسم، وأوضح في الفصل لعبة التناوب، وحركات أكثر مرونة.
كيفية تحريك الأجسام؟
إضافة speed الخاصية إلى component المنشئ، والذي يمثل السرعة الحالية للعنصر.
أيضا إجراء بعض التغييرات في newPos() طريقة لحساب موقف المكون، على أساس speed و angle .
افتراضيا، مكونات تواجه ما يصل، وتعيين الخاصية سرعة إلى 1، فإن عنصر بدء التحرك إلى الأمام.
مثال
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() طريقة حساب angle على أساس moveAngle الملكية:
مثال
تعيين الخاصية 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);
}
}
انها محاولة لنفسك » استخدام لوحة المفاتيح
كيف يمكن للمربع أحمر تتحرك عند استخدام لوحة المفاتيح؟ بدلا من تتحرك صعودا وهبوطا، ومن جانب إلى آخر، يتحرك مربع أحمر إلى الأمام عند استخدام "up" السهم، ويتحول اليسار واليمين عند الضغط على اليسار واليمين السهام.