Ruch gry

Dzięki nowemu sposobowi rysowania komponentów omówionemu w rozdziale o obrotach, ruch jest teraz bardziej elastyczny.

Jak przesuwać obiekt?

w component dodanie w konstruktorze szybkość atruty, która reprezentuje bieżącą prędkość komponentu.

należy również dostosować newPos() zmiany w metodach szybkość i kąt obliczanie pozycji komponentu.

Domyślnie, komponent jest skierowany w górę, poprzez ustawienie szybkość ustaw na 1, komponent zacznie się poruszać do przodu.

Przykład

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

Spróbuj sam

zawijanie

chcemy również móc obracać w lewo i w prawo. Stwórz nazwany moveAngle nowych atrybutów, które wskazują na bieżącą wartość ruchu lub kąt obrotu. W newPos() w metodzie moveAngle obliczeń kąt:

Przykład

Ustaw wartość atrybutu moveangle na 1 i zobacz, co się stanie:

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

Spróbuj sam

Używanie klawiatury

Jak przesuwać czerwony kwadrat za pomocą klawiatury? Kiedy używasz strzałki w górę, czerwony kwadrat nie porusza się w górę i w dół, ale przechodzi z jednej strony na drugą, poruszając się do przodu, a także obraca się w lewo i w prawo, gdy używasz strzałek w lewo i w prawo.

Przykład

Spróbuj sam

Upewnij się, że obszar gry jest skoncentrowany, a następnie użyj klawiszy strzałki, aby przesunąć czerwony blok.