НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
Графіка. Уроки W3Schools українською для початківців

En

Гра Рух

Завдяки новому способу малювання компонентів, описаному в розділі "Гра Обертання", рухи стають більш гнучкими.


Як переміщувати об’єкти?

Додайте властивість 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);
  }
}
Спробуйте самі »

Використання клавіатури

Як рухається червоний квадрат під час використання клавіатури? Замість того, щоб рухатися вгору-вниз і з боку в бік, червоний квадрат рухається вперед, коли ви використовуєте стрілку "вгору", і повертається вліво і вправо, якщо натискаєте стрілки вліво і вправо.