Spil bevægelse

ved at udnytte den nye måde at tegne komponenter på, der beskrives i kapitlet om spilrotation, er bevægelsen nu mere fleksibel.

hvordan man flytter objekter?

i component tilføje en hastighed egenskab, som repræsenterer den nuværende hastighed af komponenten.

endda newPos() metoderne skal ændres for at hastighed og vinkel beregne komponentens position.

Som standard er komponenten vendt opad, og ved at sætte hastighed sættes til 1, vil komponenten begynde at bevæge sig fremad.

Eksempel

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

Prøv det selv

drehning

Vi håber også, at vi kan dreje til venstre og højre. Opret en variabel moveAngle ny egenskab, som indikerer den nuværende bevægelsesværdi eller rotationsvinkel. I newPos() metoden ud fra moveAngle egenskab beregning vinkel:

Eksempel

Sæt moveangle-egenskaben til 1 og se, hvad der sker:

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

Prøv det selv

Brug af tastatur

Hvordan bevæger den røde firkant sig, når den bruges med tastatur? Når du bruger 'opad'-pilen, bevæger den røde firkant ikke opad og nedad, men fra én side til den anden fremad og roterer også fra venstre til højre, når du trykker på pilen til venstre og højre.

Eksempel

Prøv det selv

Sørg for, at spilområdet får fokus, og brug derefter piletasterne til at flytte den røde firkant.