Mastering evnen til at gøre en hoppende bold animation i HTML er et grundlæggende skridt for spiludviklere , der vil tillade dig at gå videre til større og bedre projekter. Hele processen centre rundt " lærred ", en HTML5 -tag , der tillader dig at konstruere en ramme , fylde rammen med en form og derefter flytte figuren i uanset fashion du ønsker. Instruktioner
Opret en Ball
1
Oprette en grundlæggende HTML-dokument ved hjælp af " html ", "hoved " og " krop " tags : Hej
,
< /html >
2
Indsæt en " lærred " tag mellem " krop " tags og tildele det et ID , en bredde og en højde . Lærredet repræsenterer det rum , hvor bolden vil hoppe : Hej
< br >
3
Setup en JavaScript -modul mellem "hoved" -tags : Hej
4
Etabler variabler for lærredet , bolden oprindelige "x" koordinat , bolden oprindelige "y" koordinerer , og beløbene bolden skal bevæge sig langs "x" og "y" akser hver iteration :
var canvas_variable , var init_x = 200 , var init_y = 100; var x_move = 5; var y_move = 5;
5
Byg en JavaScript-funktion , der gemmer lærredet i en variabel :
funktion initialize_canvas () { canvas_variable = bouncing_ball_canvas.getContext ( '2 d ' );}
6
Konstruer en JavaScript-funktion , der rydder lærredet , initialiserer et lærred form, initialiserer en lærredsfarve henleder form som en kugle , stopper tegning og udfylder derefter formen med den tidligere initialiseret farve : Hej
funktion draw_ball () {
canvas_variable.clearRect ( 0,0, 500, init_y , 30, 0, Math.PI * 2 , true ), canvas_variable.closePath (); canvas_variable.fill ();
}
Bemærk at værdierne i canvas_variable.clearRect vedrører lærredet oprindelige x -koordinat , initial y koordinat , bredde og højde .
Bemærk at værdierne i canvas_variable.arc refererer til bolden oprindelige x -koordinat , initial y koordinat , startende vinkel , slutter vinkel og clockwise/anti- uret status.
7
Supplement den anden funktion med kode , der kontrollerer, om den oprindelige "x" og "y" variable har krydset over lærredet s grænsen , og ændrer den positive /negative tegn på x-og y flytte variabler . Følg det med kode , der øger den oprindelige "x" og "y" koordinerer variabler af flytningen variabler:
if ( init_x <0
