Гра Рух
Завдяки новому способу малювання компонентів, описаному в розділі "Гра Обертання", рухи стають більш гнучкими.
Як переміщувати об’єкти?
Додайте властивість 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);
}
}
Спробуйте самі »
Використання клавіатури
Як рухається червоний квадрат під час використання клавіатури? Замість того, щоб рухатися вгору-вниз і з боку в бік, червоний квадрат рухається вперед, коли ви використовуєте стрілку "вгору", і повертається вліво і вправо, якщо натискаєте стрілки вліво і вправо.