Движение игры
Благодаря новому способу рисования компонентов, описанному в главе «Вращение игры», движения стали более гибкими.
Как перемещать объекты?
Добавьте в конструктор 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);
}
}
Используйте клавиатуру
Как движется красный квадрат при использовании клавиатуры? Вместо того, чтобы двигаться вверх и вниз и из стороны в сторону, красный квадрат движется вперед, когда вы используете стрелку «вверх», и поворачивается влево и вправо, когда вы нажимаете стрелки влево и вправо.