Con il nuovo modo di componenti del disegno, spiegato nel capitolo Gioco rotazione, i movimenti sono più flessibili.
Come spostare gli oggetti?
Aggiungere una speed alloggio ai component di costruzione, che rappresenta la velocità corrente del componente.
Apportare alcune modifiche anche nel newPos() metodo per calcolare la posizione del componente, sulla base speed e angle .
Per impostazione predefinita, i componenti sono rivolti verso l'alto, e impostando la proprietà di velocità a 1, il componente inizia a muoversi in avanti.
Esempio
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 tu stesso " si curva
Vogliamo anche essere in grado di fare giri a destra ea sinistra. Fare una nuova proprietà denominata moveAngle , che indica il valore di movimento corrente, o l'angolo di rotazione. Nei newPos() metodo di calcolare l' angle base alla moveAngle di proprietà:
Esempio
Impostare la proprietà moveangle a 1, e vedere cosa succede:
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 tu stesso " Utilizzare la tastiera
Come fa il quadrato rosso si muove quando si utilizza la tastiera? Invece di muoversi su e giù, e da un lato all'altro, il quadrato rosso si sposta in avanti quando si utilizza il "up" freccia, e si gira a destra ea sinistra quando si preme il frecce sinistra e destra.