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);
}
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:
È 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 "