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

category Ordinateurs et logiciels / Programmation / Javascript

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é quand il quitte la toile.

 // partir wrap.htmlvar dessin-var con-var goofyPic-CANV_HEIGHT = 200 = 200 CANV_WIDTH-SPR_HEIGHT = 50 = 40 SPR_WIDTH-var x = 0-var y = 100 var dx = 10 var dy = 7- fonction init () {dessins = document.getElementById ("dessin") - con = drawing.getContext («2D») - goofyPic = document.getElementById ("goofyPic") - setInterval (tirage, 100) -} function draw () {// clair backgroundcon.clearRect (0, 0, 200, 200) - // déplacer le elementx + = dx-y + dy = - // vérifier boundarieswrap () - // attirer l'imagecon.drawImage (goofyPic, x , y, SPR_WIDTH, SPR_HEIGHT) - // dessiner un rectanglecon.strokeStyle = "red" -con.lineWidth = 5 con.strokeRect (0, 0, CANV_WIDTH, CANV_HEIGHT) -} // fin drawfunction wrap () {if ( x> CANV_WIDTH) {x = 0-} if (x lt; 0) {x = CANV_WIDTH-} if (y> CANV_HEIGHT) {y = 0-} // fin IFIF (y lt; 0) {y = CANV_HEIGHT-}} // fin enveloppement

La enrouler code est très similaire au programme de rotation. Il a quelques caractéristiques différentes. Voici ce qu'il fait:

  1. Assure le suivi de la position du sprite.




    La position du sprite va changer maintenant, de sorte que les variables importantes sont X et Y, utilisé pour suivre où le sprite est.

  2. Contient des variables pour le mouvement de l'image-objet.

    La dx supports variables pour différence de x, et il est utilisé pour montrer combien le X valeur change chaque trame. De même, dy est utilisé pour montrer combien le y les changements de valeur dans chaque trame. X, y, dx, et dy sont tous créés en dehors du contexte de fonction.

  3. Déplace les valeurs des éléments.

    Dans chaque image (dans le dessiner() fonction), ajouter dx à X et d'ajouter dy à y.

  4. Vérifie limites.

    Ici, une nouvelle fonction appelée envelopper () a été créé pour vérifier les conditions aux limites.

Le code est assez simple. Si le sprite de X valeur dépasse la largeur de la toile (ce qui signifie qu'il a déménagé à la bordure droite de la toile), réinitialiser le X La valeur de 0 (déplaçant vers la gauche). Utilisez un calcul similaire pour vérifier les autres frontières et de réinitialiser l'image de l'autre côté.

Articles Similaires

A propos Auteur
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 dessiner des formes sur la toile de javascript pour HTML5 et CSS3 programmation Comment dessiner des formes sur la toile de javascript pour HTML5 et CSS3 programmation

A quelques formes primitives peuvent être tirées directement sur le contexte graphique en javascript. Les formes les plus communes pour HTML5 et CSS3 programmation que la plupart des développeurs web utilisent sont des rectangles et…

Comment manipuler les pixels sur la toile de javascript pour HTML5 et CSS3 programmation Comment manipuler les pixels sur la toile de javascript pour HTML5 et CSS3 programmation

La tag en javascript a un truc de plus incroyable dans sa manche pour HTML5 et CSS3 programmeurs. Vous pouvez extraire les données d'un marquer dans les données de pixels sous-jacents. Si vous savez comment manipuler ces données, vous…

Comment lire le clavier sur les toiles de javascript pour HTML5 et CSS3 programmation Comment lire le clavier sur les toiles de javascript pour HTML5 et CSS3 programmation

Le clavier est une technologie d'entrée principale pour les programmeurs HTML5, en particulier pour les machines de bureau. La méthode standard pour lire le clavier dans la toile de javascript est de mettre en place des fonctions spéciales…

Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation Comment mettre en place les toiles javascript pour HTML5 et CSS3 programmation

Pour utiliser le tag en javascript, construire une page web HTML5 et CSS3 avec un élément dans ce commencer. Typiquement vous fournissez largeur, hauteur, et id parameters: Votre navigateur ne supporte pas la balise canvas ...À…

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

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…

Dessinez un rectangle de base avec la balise canvas HTML5 Dessinez un rectangle de base avec la balise canvas HTML5

Pour utiliser le toile tag disponible en HTML5, construire une page Web avec un toile élément en elle. Typiquement, vous fournissez largeur, hauteur, et id paramètres pour indiquer la taille de la cnavas est, comme ceci:Votre navigateur ne…

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 dessiner des rectangles et le texte avec la toile de html5 Comment dessiner des rectangles et le texte avec la toile de html5

Quelques formes primitives peuvent être tirées directement sur le contexte graphique de la toile élément de HTML5. Les formes les plus courantes sont des rectangles et du texte, qui peuvent aussi avoir des ombres. Voici comment vous créez…

Comment inclure des images sur votre page web avec toile HTML5 Comment inclure des images sur votre page web avec toile HTML5

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

Comment manipuler les pixels avec la balise canvas HTML5 Comment manipuler les pixels avec la balise canvas HTML5

Avec HTML5, vous pouvez extraire les données d'un toile marquer dans les données de pixels sous-jacents. Manipulation de ces données, vous offre un grand contrôle de votre image en temps réel. Vous pouvez utiliser ces données pour…

Comment utiliser un modèle comme un remplissage ou un AVC avec la balise canvas HTML5 Comment utiliser un modèle comme un remplissage ou un AVC avec la balise canvas HTML5

Presque chaque opération en HTML5 de toile fonction implémente un style de remplissage ou d'un AVC. Pour tirer le meilleur parti de la toile, vous avez besoin de comprendre comment ils fonctionnent. Les trois principaux types de styles que vous…

Changez votre page web avec les méthodes du modèle objet de document javascript Changez votre page web avec les méthodes du modèle objet de document javascript

Les méthodes Object Model de documents indiqués dans la liste suivante vous offrent un excellent moyen pour accéder et modifier vos pages Web grâce à votre code javascript.monElement = document.getElementById ("nom") -: Obtient un…

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