Ultimele tutoriale de dezvoltare web
 

Mișcarea HTML Joc

Cu noul mod de componente de desen, a explicat în capitolul joc de rotație, mișcările sunt mai flexibile.


Cum de a muta obiecte?

Adăugați o speed de proprietate la component constructor, care reprezintă viteza actuală a componentei.

De asemenea , face unele modificări în newPos() metoda, pentru a calcula poziția componentei, bazată pe speed și angle .

În mod implicit, componentele sunt orientate în sus, și prin stabilirea proprietății de viteză la 1, componenta va începe să se miște înainte.

Exemplu

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);
    }
}
Încearcă - l singur »

virajelor

De asemenea, dorim să fie în măsură să facă viraje la stânga și la dreapta. Faceți o proprietate nouă numit moveAngle , care indică valoarea curentă în mișcare, sau unghiul de rotație. În newPos() metoda calculează angle bazat pe moveAngle proprietatea:

Exemplu

Setați proprietatea moveangle la 1, și să vedem ce se întâmplă:

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);
    }
}
Încearcă - l singur »

Utilizați tastatura

Cum pătrat roșu muta atunci când se utilizează tastatura? În loc să se deplasează în sus și în jos, și dintr -o parte în alta, pătrat roșu se mișcă înainte atunci când utilizați "up" în "up" săgeată, și apoi stânga și dreapta la apăsarea săgețile stânga și dreapta.