Mastering die Fähigkeit, einen springenden Ball Animation in HTML zu machen ist ein grundlegender Schritt für Spiele-Entwickler , die Ihnen erlauben zu gehen auf größere und bessere Projekte . Der ganze Prozess dreht sich um "canvas ", ein HTML5 -Tag, das Sie erlaubt , einen Rahmen zu bauen , füllen den Rahmen mit einer Form und bewegen Sie dann die Form , in welcher Art und Weise Sie möchten . Anleitung
erstellen Ball
1

Erstellen eines einfachen HTML-Dokument mit der "html ", " Kopf " und " Körper " tags:

;
2

Einfügen einer " Leinwand " tag zwischen den "body "-Tags und weisen eine ID , eine Breite und eine Höhe . Die Leinwand stellt den Raum , wo die Kugel abprallen :

Seite 3

einrichten eines JavaScript -Modul zwischen den "Kopf" tags:

4

Richten Sie Variablen für die Leinwand, koordinieren den Ball anfängliche "x " -Koordinate des Balles initial " y" , und die Mengen der Ball sollte entlang der "x " und " y" Achsen jede Iteration zu verschieben:

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 Variable speichert :

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

Konstruieren Sie einen JavaScript-Funktion , die die Leinwand löscht , initialisiert eine Leinwand Form , initialisiert ein Leinwand Farbe, zieht die Form wie ein Ball , stoppt Zeichnen und füllt dann die Form mit dem zuvor initialisiert Farbe :

Funktion draw_ball () {

canvas_variable.clearRect (0,0 , 500, init_y , 30 , 0, Math.PI * 2 , true); canvas_variable.closePath (); canvas_variable.fill (); }

Beachten Sie, dass die Werte in canvas_variable.clearRect betreffen die Leinwand anfängliche x -Koordinate, y-Koordinate anfänglichen , Breite und Höhe .

Beachten Sie, dass die Werte in canvas_variable.arc , den Ball anfängliche x -Koordinate, y-Koordinate anfänglichen beziehen , Startwinkel , Endwinkel und clockwise/anti- Uhrzeigersinn Status .
7

Nachtrag die zweite Funktion mit Code, ob die anfängliche "x " und " y" Variablen haben jenseits der Leinwand die Grenze überschritten prüft und ändert die positive /negative Vorzeichen des x und y Variablen bewegen . Folgen Sie es mit dem Code , der die anfängliche "x " und " y" koordinieren Variablen erhöht durch die Bewegung Variablen :

if ( init_x < 0