Spel rörelse

Genom att använda det nya sättet att rita komponenter som beskrivs i kapitlet om spelrotation, är handlingen nu mer flexibel.

Hur rör sig objektet?

i component Lägg till en speed egenskap, som representerar den aktuella komponenthastigheten.

vi måste också ändra newPos() metoder gör några ändringar för att speed och angle beräkna komponentens position.

Som standard är komponenten riktad uppåt, genom att speed egenskapen sätts till 1, komponenten börjar röra sig framåt.

Exempel

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

Prova själv

vänd

vi hoppas också kunna vända vänster och höger. Skapa ett namn moveAngle s nya egenskaper, som anger den aktuella rörelsevärdet eller rotationsvinkeln. I newPos() metoden enligt moveAngle attributberäkning angle:

Exempel

Sätt moveangle-attributet till 1 och se vad som händer:

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

Prova själv

Använd tangentbordet

Hur röd blockrörelse på tangentbordet? När du använder "Uppåt"-pilen, rörs den röda blocket inte uppåt och neråt, utan flyttar från en sida till en annan och rör sig framåt, och roterar vänster och höger när du trycker på vänster och höger pilar.

Exempel

Prova själv

Säkerställ att spelområdet får fokus, använd sedan piltangenterna för att flytta den röda kuben.