С помощью нового способа компонентов чертежей, поясняется в главе игры вращения, движения являются более гибкими.
Как переместить объекты?
Добавьте 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" стрелка, и поворачивает влево и вправо при нажатии стрелки влево и вправо.