Con la nueva forma de componentes de dibujo, se explica en el capítulo del juego de rotación, los movimientos son más flexibles.
Cómo mover objetos?
Añadir una speed alojamiento a la component constructor, que representa la velocidad actual del componente.
También hacer algunos cambios en el newPos() método, para calcular la posición del componente, basado en speed y el angle .
De forma predeterminada, los componentes estén mirando hacia arriba, y estableciendo la propiedad de velocidad a 1, el componente comenzarán a moverse hacia adelante.
Ejemplo
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);
}
}
Inténtalo tú mismo " haciendo Giros
También queremos ser capaces de hacer giros a la izquierda y derecha. Hacer una nueva propiedad llamada moveAngle , lo que indica el valor actual de movimiento, o el ángulo de rotación. En los newPos() método de calcular el angle basado en la moveAngle propiedad:
Ejemplo
Establecer la propiedad moveangle a 1, y ver lo que sucede:
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);
}
}
Inténtalo tú mismo " Usa el teclado
¿Cómo se mueve el cuadrado rojo al utilizar el teclado? En lugar de moverse hacia arriba y hacia abajo y de lado a lado, el cuadro rojo se mueve hacia adelante cuando se utiliza el "up" flecha, y gira a la izquierda y la derecha al presionar las flechas derecha e izquierda.