Movimento de Jogos

ao usar a nova maneira de desenhar componentes explicada no capítulo de rotação do jogo, a ação agora é mais flexível.

como mover um objeto?

em component adicionar um velocidade propriedade, que representa a velocidade atual do componente.

também precisamos alterar newPos() métodos para fazer algumas alterações, para velocidade e ângulo para calcular a posição do componente.

Padrão, o componente está virado para cima, ajustando velocidade propriedade para 1, o componente começará a se mover para 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);
  }
}

Experimente você mesmo

girar

também gostaríamos de poder girar para a esquerda e para a direita. Crie um nome para moveAngle nova propriedade, que indica o valor de movimento atual ou o ângulo de rotação. No newPos() método com base em moveAngle cálculo ângulo:

Exemplo

Defina a propriedade moveangle para 1 e veja 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);
  }
}

Experimente você mesmo

Usando o teclado

Como mover o bloco vermelho usando o teclado? Quando você usa a seta 'para cima', o bloco vermelho não se move para cima e para baixo, mas sim de um lado para o outro, se movendo para frente e girando para esquerda e para direita quando pressionadas as setas 'esquerda' e 'direita'.

Exemplo

Experimente você mesmo

Certifique-se de que a área do jogo esteja focada e use as teclas de seta para mover o quadrado vermelho.