Componenti del gioco
Aggiungi un quadrato rosso nell'area di gioco:
Aggiungi un componente
Crea un costruttore di componenti, che ti consente di aggiungere componenti all'area di gioco.
Viene chiamato il costruttore di oggetti
componente creiamo 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);
}
I componenti hanno proprietà e metodi per controllarne l'aspetto e i movimenti.
Cornici
Per rendere il gioco pronto per l'azione, aggiorneremo il display 50 volte al secondo, che è molto simile ai fotogrammi di un film.
Innanzitutto, crea una nuova funzione chiamata updateGameArea().
Nell'oggetto myGameArea, aggiungi un intervallo che esegua la updateGameArea()funzione ogni 20 millisecondi (50 volte al secondo). Aggiungi anche una funzione chiamata clear(), che cancella l'intera tela.
Nel componentcostruttore, aggiungi una funzione chiamata
update(), per gestire il disegno del componente.
La updateGameArea()funzione chiama il clear()e il update()metodo.
Il risultato è che il componente viene estratto 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();
}
Fallo muovere
Per dimostrare che il quadrato rosso viene disegnato 50 volte al secondo, cambieremo la posizione x (orizzontale) di un pixel ogni volta che aggiorniamo l'area di gioco:
Esempio
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Perché liberare l'area di gioco?
Potrebbe sembrare superfluo ripulire l'area di gioco ad ogni aggiornamento. Tuttavia, se tralasciamo il
clear()metodo, tutti i movimenti del componente lasceranno una traccia di dove era posizionato nell'ultimo frame:
Esempio
function updateGameArea() {
// myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Cambia la dimensione
Puoi controllare la larghezza e l'altezza del componente:
Esempio
Crea un rettangolo di 10x140 pixel:
function startGame() {
myGameArea.start();
myGamePiece = new component(140, 10, "red", 10, 120);
}
Cambia il colore
Puoi controllare il colore del componente:
Esempio
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Puoi anche usare altri valori di colore come hex, rgb o rgba:
Esempio
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Cambia la posizione
Usiamo le coordinate x e y per posizionare i componenti nell'area di gioco.
L'angolo in alto a sinistra della tela ha le coordinate (0,0)
Passa il mouse sopra l'area di gioco sottostante per vedere le sue coordinate x e y:
Puoi posizionare i componenti dove preferisci nell'area di gioco:
Esempio
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Molti componenti
Puoi mettere tutti i 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();
}
Componenti in movimento
Fai muovere tutti e tre i componenti 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();
}