May 26
Padroneggiare la capacità di fare un'animazione palla che rimbalza in HTML è un passo fondamentale per gli sviluppatori di giochi che permetteranno di andare a progetti più grandi e migliori. I centri di processo intere intorno "tela", un tag HTML5 che permette di costruire una cornice, riempire il telaio con una forma e quindi spostare la forma in qualsiasi modo si desidera.
1 Creare un documento HTML di base utilizzando il "html", "testa" e "tag body":
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
2 Inserire un tag "canvas" tra i tag "body" e assegna un ID, una larghezza e un'altezza. La tela rappresenta lo spazio in cui la palla rimbalzerà:
<Canvas id = "bouncing_ball_canvas" width = "500" height = "500">
</ Canvas>
3 Configurazione di un modulo JavaScript tra i tag "head":
<Script type = "text / javascript">
</ Script>
4 Stabilire le variabili per la tela, della palla iniziale "X" coordinare, della palla iniziale "y" coordinare, e gli importi la palla dovrebbe muoversi lungo la "x" e "y" assi ogni iterazione:
var canvas_variable;
var init_x = 200;
var init_y = 100;
var x_move = 5;
var y_move = 5;
5 Costruire una funzione JavaScript che memorizza la tela in una variabile:
initialize_canvas function ()
{
canvas_variable = bouncing_ball_canvas.getContext ( '2d');
}
6 Costruire una funzione JavaScript che cancella la tela, inizializza una forma tela, inizializza un colore tela, disegna la forma come una palla, si ferma il disegno e poi riempie la forma con il colore precedentemente inizializzato:
Funzione draw_ball ()
{
canvas_variable.clearRect (0,0, 500, 500);
canvas_variable.beginPath ();
canvas_variable.fillStyle = "# ff0000";
canvas_variable.arc (init_x, init_y, 30, 0, Math.PI * 2, true);
canvas_variable.closePath ();
canvas_variable.fill ();
}
Si noti che i valori in canvas_variable.clearRect riguardano x iniziali della tela di coordinate, iniziale coordinata y, larghezza e altezza.
Si noti che i valori in canvas_variable.arc riferiscono a x iniziali della sfera di coordinate, iniziale coordinata y, angolo di partenza, terminando l'angolo e lo stato in senso orario / antiorario.
7 Supplemento la seconda funzione con il codice che controlla se l'iniziale "x" e variabili "y" hanno attraversato oltre il limite della tela, e cambia il segno positivo / negativo delle variabili xey mossa. Seguire con codice che aumenta l'iniziale "x" e "y" coordinata variabili dalle variabili di spostamento:
if (init_x <0 || init_x> 500) x_move = -x_move;
if (init_y <0 || init_y> 500) y_move = -y_move;
init_x + = x_move;
init_y + = y_move;
8 Regolare la prima funzione con il codice che chiama la seconda funzione ogni 15 millisecondi:
setInterval (draw_ball, 15);
9 Caricare la prima funzione nel corpo del documento regolando il primo tag "body":
<body onload = "initialize_canvas ();">