Com a nova forma de componentes de desenho, explicado no capítulo Jogo rotação, os movimentos são mais flexíveis.
Como mover objetos?
Adicionar uma speed propriedade para o component do construtor, que representa a velocidade actual do componente.
Também fazer algumas alterações na newPos() método, para calcular a posição do componente, com base na speed e angle .
Por padrão, os componentes são voltado para cima e definindo a propriedade velocidade para 1, o componente irá começar a se mover para a frente.
Exemplo
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);
}
}
Tente você mesmo " fazer voltas
Nós também queremos ser capaz de fazer curvas à esquerda e direita. Faça uma nova propriedade chamada moveAngle , que indica o valor em movimento atual, ou ângulo de rotação. Nos newPos() método de calcular o angle com base no moveAngle propriedade:
Exemplo
Defina a propriedade moveangle a 1, e ver o que acontece:
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);
}
}
Tente você mesmo " Usar o teclado
Como é que o quadrado vermelho se mover ao usar o teclado? Em vez de mover para cima e para baixo, e de lado a lado, o quadrado vermelho se move para frente quando você usa o "up" seta e vira à esquerda e à direita quando pressionando as setas esquerda e direita.