Движение в игре

сейчас действия более гибкие, благодаря новому способу рисования компонентов, который был рассмотрен в главе о вращении в игре.

как переместить объект?

в component добавить в конструктор скорость представляет текущую скорость компонента.

еще и свойство newPos() методы, чтобы изменить их в зависимости от скорость и 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() методе на основе 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);
  }
}

Попробуйте это на себе

Использование клавиатуры

Как перемещается красный квадрат при использовании клавиатуры? Когда вы используете стрелку 'вверх', красный квадрат не поднимается и не опускается, а перемещается с одной стороны на другую вперед, и он вращается влево и вправо при нажатии на стрелки 'влево' и 'вправо'.

Пример

Попробуйте это на себе

Убедитесь, что фокус игры находится в области игры, затем используйте клавиши的方向 для перемещения красного блока.