Gli ultimi tutorial di sviluppo web
 

Componenti del gioco HTML


Aggiungere un quadrato rosso sulla zona di gioco:


Aggiungere un componente

Fare un costruttore di componenti, che consente di aggiungere componenti sul gamearea.

Il costruttore oggetto è chiamato component , e facciamo il nostro primo componente, chiamato myGamePiece :

Esempio

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red" , 10, 120);
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

Prova tu stesso "

I componenti hanno proprietà e metodi per controllare i loro apparenze e movimenti.


montatura

Per rendere il gioco pronto per l'azione, aggiorneremo il display 50 volte al secondo, che è molto simile a fotogrammi di un film.

In primo luogo, creare una nuova funzione chiamata updateGameArea() .

Nel myGameArea oggetto, aggiungere un intervallo che si svolgerà il updateGameArea() funzione ogni 20 millisecondi (50 times per second) . Aggiungere anche una funzione chiamata clear() , che cancella l'intera tela.

Nel component costruttore, aggiungere una funzione chiamata update() , per gestire il disegno del componente.

Il updateGameArea() funzione chiama la clear() e update() metodo.

Il risultato è che il componente viene disegnato e cancellato 50 volte al secondo:

Esempio

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.update = function(){
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.update();
}
Prova tu stesso "

Farlo muovere

Per dimostrare che il quadrato rosso è in corso di elaborazione a 50 volte al secondo, cambieremo la posizione x (horizontal) di un pixel ogni volta che aggiorniamo l'area di gioco:

Esempio

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
   
myGamePiece.update();
}
Prova tu stesso "

Perché liberare l'area di gioco?

Potrebbe sembrare inutile per cancellare l'area di gioco ad ogni aggiornamento. Tuttavia, se lasciamo fuori il clear() metodo, tutti i movimenti del componente lasceranno una scia di dove è stato posizionato l'ultimo fotogramma:

Esempio

function updateGameArea() {
    //myGameArea.clear();
    myGamePiece.x += 1;
   
myGamePiece.update();
}
Prova tu stesso "

Cambiare le dimensioni

È possibile controllare la larghezza e l'altezza del componente:

Esempio

Creare un rettangolo di 10x140 pixel:

function startGame() {
    myGameArea.start();
    myGamePiece = new component( 10 , 140 , "red" , 10, 120);
}
Prova tu stesso "

Cambiare il colore

È possibile controllare il colore del componente:

Esempio

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue" , 10, 120);
}
Prova tu stesso "

È inoltre possibile utilizzare altri colorvalues ​​come esadecimale, RGB o RGBA:

Esempio

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
}
Prova tu stesso "

Cambiare la posizione

Usiamo X e Y coordinate per posizionare i componenti sull'area di gioco.

L'angolo in alto a sinistra della tela ha le coordinate (0,0)

Mouse sopra l'area di gioco qui sotto per vedere la sua coordinate x e y:

X
Y

È possibile posizionare i componenti, ovunque ti piace nell'area di gioco:

Esempio

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red" , 2 , 2 );
}
Prova tu stesso "

molti dei componenti

Si può mettere il maggior numero di componenti che vuoi nell'area di gioco:

Esempio

var redGamePiece, blueGamePiece, yellowGamePiece;

function startGame() {
    redGamePiece = new component(75, 75, "red" , 10, 10);
    yellowGamePiece = new component(75, 75, "yellow" , 50, 60);
    blueGamePiece = new component(75, 75, "blue" , 10, 110);
   
myGameArea.start();
}

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
Prova tu stesso "

componenti in movimento

Fai tutti e tre i componenti si muovono in direzioni diverse:

Esempio

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.x += 1;
    yellowGamePiece.x += 1;
    yellowGamePiece.y += 1;
    blueGamePiece.x += 1;
    blueGamePiece.y -= 1;
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
Prova tu stesso "