Mouvement de jeu

en utilisant la nouvelle méthode de dessin du composant expliquée dans le chapitre sur la rotation du jeu, l'action est maintenant plus flexible.

comment déplacer un objet ?

dans component ajouter un speed l'attribut, qui représente la vitesse actuelle du composant.

de plus, nous devons modifier newPos() faire quelques modifications aux méthodes speed et angle calculez la position du composant.

par défaut, le composant fait face vers le haut, en définissant speed l'attribut est défini sur 1, le composant commence à se déplacer vers l'avant.

Exemple

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);
  }
}

Essayez-le vous-même

tourne

nous espérons également pouvoir tourner à gauche et à droite. Créez un composant nommé moveAngle nouvel attribut, il indique la valeur de déplacement actuelle ou l'angle de rotation. Dans newPos() dans la méthode moveAngle calcul de l'attribut angle:

Exemple

Veuillez définir l'attribut moveangle sur 1 et voir ce qui se passe :

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);
  }
}

Essayez-le vous-même

Utilisation du clavier

Comment faire pour que le carré rouge se déplace en utilisant le clavier ? Lorsque vous appuyez sur la flèche vers le haut, le carré rouge ne monte ni ne descend, mais il se déplace d'un côté à l'autre et se déplace vers l'avant, et il pivotera vers la gauche et la droite lorsque vous appuyez sur les flèches vers la gauche et la droite.

Exemple

Essayez-le vous-même

Assurez-vous que la zone de jeu est au premier plan, puis utilisez les touches flèches pour déplacer le carré rouge.