Wie man eine springenden Ball-Animation in HTML

Meistern die Fähigkeit, eine springenden Ball-Animation in HTML zu machen, ist ein grundlegender Schritt für Spieleentwickler, die Sie zu größeren und besseren Projekte gehen auf ermöglichen. Der gesamte Prozess dreht sich um "Leinwand", einen HTML5-Tag, der erlaubt Ihnen, einen Rahmen zu konstruieren, den Rahmen mit einer Form füllen und verschieben Sie dann die Form, in welcher Weise Sie möchten.

Anweisungen

Erstellen einer Kugel

1 Erstellen Sie ein einfache HTML-Dokument mit der "html", "Kopf" und "Körper" Tags:

< html >< Head >< / head >< Körper >< / body >< / html >

2 Fügen Sie einen Tag der "Leinwand" zwischen den "Body"-Tags ein, und weisen sie eine ID, eine Breite und eine Höhe. Die Leinwand stellt den Raum, wo der Ball hüpfen wird:

< Leinwand Id = "Bouncing_ball_canvas" Width = "500" Height = "500" >< / Leinwand >

3 Richten Sie ein JavaScript-Modul zwischen den "Kopf"-Tags:

< Skript-Typ = "Text/Javascript" >< / script >

4 Schaffen Variablen für die Leinwand, den Ball anfänglichen "X" Koordinate, den Ball anfänglichen "y" Koordinate und die Beträge, die der Ball auf das "X" verschoben werden soll, und "y" Achsen jede Iteration:

Var Canvas_variable;Var Init_x = 200;Var Init_y = 100;Var X_move = 5;Var Y_move = 5;

5 Erstellen Sie eine JavaScript-Funktion, die die Leinwand in einer Variablen speichert:

Funktion initialize_canvas(){Canvas_variable = bouncing_ball_canvas.getContext('2d');}

6 Erstellen Sie eine JavaScript-Funktion, die löscht die Leinwand Initialisiert eine Leinwand-Form, Initialisiert eine Leinwandfarbe, zeichnet die Form wie ein Ball, Zeichnung hält, dann füllt die Form mit der zuvor initialisierten Farbe:

Funktion 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();

}

Beachten Sie, dass die Werte in canvas_variable.clearRect auf der Leinwand Initial x Koordinate, anfängliche y-Koordinate, Breite und Höhe beziehen.

Beachten Sie, dass die Werte in canvas_variable.arc den Ball Initial x Koordinate, anfängliche y Koordinate, Startwinkel, Endung Winkel und im Uhrzeigersinn/gegen-Uhrzeigersinn-Status.

7 Ergänzung die zweite Funktion mit Code, der prüft, ob die erste "X" und "y" Variablen über die Leinwand-Grenze überschritten haben und ändert die positiven/negativen Vorzeichen von x und y Variablen wechseln Führen Sie es mit Code, der erhöht die anfängliche "X" und "y" koordinieren Variablen durch die verschieben-Variablen:

Wenn (Init_x < 0 || Init_x > 500) X_move = - X_move;Wenn (Init_y < 0 || Init_y > 500) Y_move = - Y_move;

Init_x += X_move;Init_y += Y_move;

8 Passen Sie die erste Funktion mit Code, der die zweite Funktion alle 15 Millisekunden aufruft:

SetInterval (Draw_ball, 15);

9 Laden Sie die erste Funktion in das Dokument Körper durch Anpassen des ersten "Body"-Tags:

< Körper onLoad="initialize_canvas();" >