Peli pyöriminen

Punainen laatikko voi pyöriä:

Pyöritä osaa

Tässä opetusosassa punainen laatikko voi liikkua pelialueella, mutta sitä ei voi kiertää tai pyörittää.

Jotta voimme pyörittää komponenttia, meidän on muutettava tapaa, jolla piirrämme komponentin.

Ainoa käytettävissä oleva pyörimismetodi pöydällä on, että se pyörittää koko pöytää:

Kaikki muut, mitä piirrät pöydälle, pyöritetään, ei vain tietty komponentti.

Tämä on syy, miksi meidän on tehtävä: update() tehtävässä tehdään muutoksia:

Ensiksi, säilytämme nykyisen pöydän kontekstin:

ctx.save();

Sitten siirrämme koko pöydän tiettyyn komponentin keskikohdalle translate-metodilla:

ctx.translate(x, y);

Sitten suoritamme halutun pyörimisen rotate() metodilla:

ctx.rotate(angle);

Nyt olemme valmiita piirtämään komponentin pöydälle, mutta nyt meillä on piirrettävä keskikohdan sijainti 0,0 kohtaan siirrettyä (ja pyöritettyä) pöytää:

ctx.fillRect(width / -2, height / -2, width, height);

Valmistuttuamme meidän on käytettävä restore-metodia palauttaaksemme tämän kontekstityypin alkuperäiseen sijaintiin:

ctx.restore();

tämä komponentti on ainoa, joka pyörii:

komponentin rakentaja

komponentti rakentajalla on nimi kulma uusi ominaisuus, joka edustaa komponentin kulmaa asteen muodossa.

komponentti rakentajan update Metodi on komponentin piirtämisen sijainti, tässä näet sallitun komponentin pyörimisen muutoksen:

esimerkki

function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.angle = 0;
  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();
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.angle += 1 * Math.PI / 180;
  myGamePiece.update();
}

Kokeile itse