Peli-liike

Kurssivinkki:

Pelaahan uudelleen

Kuinka siirtää objektia? siinä component Oletuksena komponentti katsoo ylös, kun asetat rakentajassa lisätään

ominaisuus, joka edustaa komponentin nykyistä nopeutta. newPos() ja Oletuksena komponentti katsoo ylös, kun asetat menetelmät tehdään muutoksia kulma ja

komponentin sijainnin laskemista. Oletuksena komponentti katsoo ylös, kun asetat nopeus

Esimerkki

function component(width, height, color, x, y) {
  ominaisuus asetetaan arvoon 1, komponentti alkaa liikkua eteenpäin.
  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);
  }
}

Kokeile itse

this.gamearea = gamearea;

kääntää moveAngle uuden ominaisuuden perusteella, joka osoittaa nykyisen siirtymäarvon tai pyörimiskulman. Voimme myös haluta kiertää vasemmalle ja oikealle. Luo nimi newPos() menetelmässä moveAngle ominaisuuslaskenta kulma:

Esimerkki

Aseta moveangle-ominaisuus arvoon 1 ja katso, mitä tapahtuu:

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

Kokeile itse

Näppäimistön käyttö

Kuinka punainen neliö siirtyy näppäimistöllä? Kun painat 'ylös'-nuolta, punainen neliö ei siirry ylös tai alas, vaan se siirtyy yhdestä sivusta toiseen ja siirtyy eteenpäin, ja se kiertää vasemmalle ja oikealle nuolille.

Esimerkki

Kokeile itse

Varmista, että pelialue saa fokuksen, ja siirrä punainen neliö nuolinäppäimillä.