Vidéo: Faire des animations en JavaScript 2025
Si le canevas définit l'espace dans un jeu HTML5, une boucle d'animation définit l'heure. La plupart des jeux JavaScript utilisent un mécanisme appelé setInterval () pour provoquer un comportement répété. Cette fonction prend deux paramètres: un nom de fonction et une valeur de délai.
Voici un code qui compte simplement dix fois par seconde:
en comptant. html var counter = 0; sortie var; Fonction init () {output = document. getElementById ("sortie"); setInterval (count, 100);} function count () {compteur ++; sortie. innerHTML = counter;} rien encore ici
Le processus est simple, et vous pouvez l'utiliser quand vous voulez que quelque chose se passe à intervalles réguliers:
-
Crée une fonction qui sera répétée.
Dans cet exemple simpliste, la fonction count () sera appelée dix fois par seconde.
-
Dans votre code d'initialisation, appelez setInterval ().
Ceci configurera l'appel répété à la fonction.
-
Indique la fonction qui va répéter.
Le premier paramètre est le nom de la fonction qui sera répétée. Notez que parce que vous traitez la fonction comme une variable, vous n'incluez pas avec des parenthèses avec le nom de la fonction.
-
Indique le délai.
Le deuxième paramètre est une valeur de délai en millisecondes (une milliseconde est 1/1000 e d'une seconde). Cet exemple s'exécute avec un délai de 100 millisecondes, soit 10 images par seconde. La bibliothèque simpleGame s'exécute à 20 images par seconde.
Dans SimpleGame, lorsque vous créez une classe Scène, en plus de la mise en place d'un canevas, vous créez également, via la classe Scène, un intervalle qui appelle à plusieurs reprises la méthode update () de votre jeu. C'est pourquoi vous devez avoir une méthode update ().
