Comment utiliser la boucle d'animation sur la toile de javascript pour HTML5 et CSS3 programmation

category Ordinateurs et logiciels / Programmation / Javascript

Une animation en javascript nécessite généralement une organisation spéciale appelée boucle d'animation. La structure de base de la boucle de l'animation dans HTML5 et CSS3 programmation fonctionne de la même dans toutes les langues:

  1. Initialisation.

    Créer les actifs, y compris l'arrière-plan et l'un des objets que vous utiliserez. Les objets qui seront manipulés en temps réel sont normalement appelés sprites. En général, cela se fait lorsque le programme est exécuté en premier, pour gagner du temps lors de l'exécution principale. Vous pouvez également définir des constantes pour taille de l'image, de la taille d'affichage, taux d'armature, et d'autres valeurs qui ne changeront pas pendant l'exécution du jeu.

  2. La détermination d'un taux de trame.

    Animations et jeux fonctionnent en appelant une fonction de façon répétée à un taux prescrit. En général, vous aurez une sorte de fonction qui est appelée à plusieurs reprises. En javascript, vous utilisez généralement la setInterval () fonction pour spécifier une fonction qui sera appelée à plusieurs reprises.




    Le taux de trame indique combien de fois la fonction spécifiée sera appelé. Jeux et animations typiquement fonctionnent à des taux de trame entre 10 et 30 images par seconde. Un taux de trame plus rapide est plus lisse, mais peut-être pas maintenable avec certains matériels.

  3. L'évaluation de l'état actuel.

    Chaque sprite est vraiment un élément de données. Au cours de chaque trame, de déterminer si quelque chose d'important est arrivé: l'utilisateur at appuyez sur une touche? Est un élément censé se déplacer? Un sprite ne quittent l'écran? Ont deux sprites pif dans l'autre?

  4. Modification des données de sprite.

    Chaque sprite a généralement la position ou des données de rotation qui peut être modifiée au cours de chaque trame. Habituellement, cela se fait à travers des transformations (translation, rotation, et l'échelle), bien que parfois vous pouvez basculer entre les images à la place.

  5. Effacement de l'arrière-plan.

    Une animation est vraiment une série d'images tirées rapidement dans le même endroit. Habituellement, vous devez effacer l'arrière-plan au début de chaque trame pour effacer l'image de la dernière image.

  6. Redessiner tous les sprites.

    Chaque sprite est re-dessinée en utilisant ses nouvelles données. Les sprites semblent se déplacer parce qu'ils sont attirés dans un nouvel emplacement ou l'orientation.

Articles Similaires

A propos Auteur
Comment construire une animation multi-états dans votre jeu de html5 Comment construire une animation multi-états dans votre jeu de html5

Avec toute cette motion passe dans votre jeu HTML5, vous êtes sûr de vouloir multiples animations sophistiquées. Vous pouvez utiliser le ChangeImage () ou setImage () fonction (ils sont deux noms différents pour la même chose) pour changer…

Comment construire des objets de sprite pour votre jeu de html5 Comment construire des objets de sprite pour votre jeu de html5

Pour faire très puissants jeux HTML5, vous aurez envie d'être en mesure de construire vos propres sprites que ce que vous voulez qu'ils fassent exactement. Après avoir effectué un objet, vous pouvez lui donner les caractéristiques et le…

Comment créer une boucle d'animation dans votre jeu de html5 Comment créer une boucle d'animation dans votre jeu de html5

Si la toile définit l'espace dans un jeu HTML5, une boucle d'animation définit le temps. La plupart des jeux utilisent javascript un mécanisme appelé setInterval () à provoquer un comportement répété. Cette fonction prend deux…

Comment créer une interaction de l'utilisateur dans votre jeu de html5 Comment créer une interaction de l'utilisateur dans votre jeu de html5

La plus grande différence entre un jeu HTML5 et une animation est l'interaction de l'utilisateur. Si vous voulez faire un jeu, vous avez besoin à l'utilisateur d'y participer. Et voici comment faire.Voici le code:car.htmlConduire la…

Html5 développement de jeux pour les nuls Html5 développement de jeux pour les nuls

L'élément principal de toute simpleGame jeu est le Scene objet. Ne pas modifier directement les propriétés de la scène. Au lieu de cela, utilisez la méthode appropriée pour gérer la scène.touchableIndique si la scène est en cours…

Garder votre jeu se déplaçant avec l'objet de sprite Garder votre jeu se déplaçant avec l'objet de sprite

En tant que développeur de jeu, rappeler que le Sprix à l ' objet est la base pour déplacer des éléments de jeu. Ne pas modifier les propriétés directement, mais utiliser la méthode appropriée pour manipuler le sprite comme suit:spriteName…

Comment utiliser des animations CSS3 Comment utiliser des animations CSS3

La transformer comportement est assez cool, mais CSS3 promet une forme encore plus excitant de l'animation appelé (wait for it) Animation mécanisme. Voici une animation d'une boîte déplacer autour de l'écran.Voici la stratégie de base pour la…

Comment construire une image transformée sur les toiles de javascript pour HTML5 et CSS3 programmation Comment construire une image transformée sur les toiles de javascript pour HTML5 et CSS3 programmation

Transformations sont des opérations mathématiques en javascript qui peuvent être appliquées à un dessin ou une image sur la page que vous HTML5 et CSS3 pour modifier l'apparence. Il existe trois grandes transformations:traduction:…

Comment dessiner des images sur la toile de javascript pour HTML5 et CSS3 programmation Comment dessiner des images sur la toile de javascript pour HTML5 et CSS3 programmation

Bien que HTML a longtemps eu un soutien pour les images, l'interface de toile de javascript ajoute une nouvelle vie à des images web. Les images peuvent être affichés à l'intérieur d'une toile, où ils peuvent être intégrés avec les…

Comment faire pour déplacer un élément sur la toile de javascript pour HTML5 et CSS3 programmation Comment faire pour déplacer un élément sur la toile de javascript pour HTML5 et CSS3 programmation

Souvent, vous préférez déplacer un élément sur la toile de javascript. Ce procédé est en fait très semblable au mécanisme de rotation pour la programmation HTML5. Voici un code qui se déplace une image et l'enveloppe de l'autre côté…

Comment ajouter plus de sprites en scratch sur la PI de framboise Comment ajouter plus de sprites en scratch sur la PI de framboise

Vous pouvez utiliser Scratch sur votre Raspberry Pi pour faire des jeux simples et raconter des histoires. Pour raconter une histoire, vous pouvez déplacer les sprites autour de la scène, mais vous avez probablement encore juste une sprite. Et…

Comment changer l'apparence de votre sprite avec zéro sur la PI de framboise Comment changer l'apparence de votre sprite avec zéro sur la PI de framboise

Ainsi que le déplacement de votre sprite autour de l'écran Raspberry Pi, Scratch, il est facile de changer l'apparence de votre sprite. Il rend votre jeu beaucoup plus amusant si tous vos personnages ne ressemblent pas exactement la même.Comment…

Comment créer une animation avec la balise canvas HTML5 Comment créer une animation avec la balise canvas HTML5

Bien que le HTML5 toile tag pourrait ne pas remplacer Flash comme un mécanisme pour la mise en œuvre des jeux et des animations dans le navigateur, il est relativement facile d'ajouter une animation à un toile image. La clé est d'utiliser les…

Comment créer des animations CSS3 avec Stylie Comment créer des animations CSS3 avec Stylie

Obtenir une animation CSS3 juste peut être difficile. Chaque développeur a des compétences différentes et des façons de tâches d'observation. Stylie est conçu pour les développeurs qui sont plus orientés visuellement. Vous choisissez un…

» » » » Comment utiliser la boucle d'animation sur la toile de javascript pour HTML5 et CSS3 programmation