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 appelées événements-gestionnaires
Sommaire
keyDemo.html Appuyez sur une touche pour voir son code
Gestion de la saisie au clavier de base
Cet exemple particulier démontre clavier vérification de base ainsi que la technique plus sophistiqué utilisé dans simpleGame. Voici comment fonctionne la version de base:
Assigne une fonction à onkeydown.
La document.onkeydown attribut est une propriété particulière. Si vous affectez une fonction à cette propriété, cette fonction sera appelée automatiquement chaque fois que le système d'exploitation reconnaît une touche. Cet exemple affecte la fonction updateKeys.
Crée la fonction, y compris un paramètre d'événement.
La updateKeys () la fonction sera automatiquement donné un objet événement (normalement appelé e).
Détermine quelle touche a été enfoncée.
La e.keyCode propriété renvoie un code numérique indiquant quelle touche a été pressé. Dans le keyDemo programme (ainsi que simpleGame), la currentKey variable contient cette valeur numérique.
Compare la clé de l'une des constantes de clavier.
Il est difficile de se rappeler quelles touches sont associées à quelles valeurs numériques, de sorte keyDemo et simpleGame fournir une liste des constantes de clavier. Ils sont faciles à retenir: K_A est le UN clé, et K_SPACE est la barre d'espace. Bien sûr, vous pouvez ajouter d'autres clés si il ya une certaine touche que vous souhaitez utiliser ce ne sont pas disponibles.
Comment déplacer une image avec le clavier
Vous pouvez obtenir un formulaire d'interactivité en ayant un mouvement d'image en réponse au mouvement de clavier.
Se déplace essentiellement une image implique de combiner des idées clés de keyDemo.html (pour l'entrée clavier) et wrap.html (à mettre en place la toile et faire le déplacement de l'objet sous le contrôle de minuterie.) Voici le code:
mouvement de clavier Clavier Mouvement
Utilisez les touches fléchées pour déplacer l'image, barre d'espace pour arrêter le mouvement.
Ce programme est essentiellement wrap.html avec les modifications suivantes:
Met en place updateKeys () comme un gestionnaire d'événement.
Parce que ce programme lit le clavier en temps réel, vous devez affecter un gestionnaire d'événement.
Détermine quelle touche a été enfoncée.
Rangez la dernière touche enfoncée dans une variable appelée currentKey.
Compare currentKey avec des constantes de clavier.
Utilisez les constantes de comparer currentKey avec tout ce que les touches qui vous intéresse - pour l'instant, les touches fléchées et la barre d'espace.
Changements dx et dy sur la base de la valeur clé actuelle.
Quand vous savez ce qui touche est enfoncée, utiliser ces informations pour modifier le dx et dy valeurs, qui détermine comment l'image se déplace.
La dessiner() fonction fait toujours le dessin.
La dessiner() fonction est appelée sur un intervalle régulier. Il est commun de séparer entrée (keyPressed) À partir animation (dessiner).
-
Chromebook: touches du clavier reconfigure -
La base disposition du clavier de pc -
La disposition du clavier générale sur un ordinateur portable -
Les touches de verrouillage de clavier de votre PC -
Comment utiliser le raccourci clavier de votre mac commune -
Comment utiliser les touches de fonction de votre Mac
Comment donner des ordres avec des touches de fonction mac Un clavier Mac dispose de touches de fonction, tout comme un clavier Windows, mais les touches susceptibles d'émettre des commandes différentes dans Mac OS X que dans Windows. Sur un Mac, les commandes affectées aux touches de fonction varient…
Préférences du clavier de votre MacBook Sur votre MacBook, les préférences de clavier volet de la section Matériel de la fenêtre Préférences système comporte deux onglets: clavier et des raccourcis clavier. Ces deux onglets vous permettent de régler la vitesse à laquelle une…
Comment ajouter des boutons à votre jeu de HTML5 pour l'accès mobile La simpleGame bibliothèque possède une fonction pratique appelée GameButton pour ajouter un bouton à l'écran d'un appareil mobile pour votre jeu HTML5. Le clavier est un des moyens les plus faciles à obtenir l'entrée dans un navigateur…
Comment ajouter des méthodes à des classes dans votre jeu de html5 Les propriétés décrivent les caractéristiques d'un objet dans votre HTML 5 jeu, et méthodes décrire le comportement. Une méthode est une fonction associée à un objet. Vous construisez des méthodes très semblable à la création d'un…
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…
Comment utiliser la balise canvas dans votre jeu de html5 La simpleGame moteur de Scène objet utilise l'une des nouvelles fonctionnalités les plus excitantes de HTML5 - la balise canvas. Cette balise passionnant vous permet de dessiner des images et d'autres éléments directement sur une partie du…
Comment utiliser la souris et du clavier événements les objets javascript pour programmer avec le langage HTML La Souris et Clavier les objets d'événements en javascript sont essentiellement les mêmes. Ils offrent les mêmes propriétés et méthodes. La seule différence est que vous utilisez l'un avec une souris et l'autre avec le clavier. La…
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é…
Flash raccourcis clavier professionnel Bien que vous pouvez accomplir toutes les tâches dans Flash Professional en utilisant la souris et la barre de menu de l'application, en utilisant des raccourcis clavier peut vous aider à travailler plus vite. Voici quelques-uns des raccourcis…
Quelques touches de clavier pc utile Votre clavier d'ordinateur est un terrain de jeu virtuel de boutons - quelques fameuses clés, certaines touches familières, et certaines touches mystérieuses. Voici une liste de certains des touches les plus importantes du clavier (au-delà des…
Comment utiliser la touche fn sur votre ordinateur portable Pour compenser le manque de touches, les premiers ordinateurs portables sont venus avec une touche de fonction spéciale, la touche Fn. Il a été utilisé en combinaison avec d'autres touches, comme une touche Maj, en donnant les clés à des fins…
Vos clés de fn de clavier d'ordinateur portable Vous ordinateur portable a beaucoup de combinaisons de touches Fn spéciales. Recherchez sur le clavier de votre ordinateur portable pour correspondre à la touche Fn avec ses diverses fonctions. Ces autres touches sont de couleur avec la touche Fn.…
Fonction de lancement rapide pour les applications Android Phone Si votre téléphone Android dispose d'un clavier physique, vous êtes dans un vrai régal: Vous pouvez assigner des raccourcis vers les app 36 touches sur ce clavier. Voilà un raccourci clavier par lettre, de A à Z, plus 10 pour les numéros 1 à…
Comment utiliser clavier à l'écran de l'iPad L'iPad possède un clavier intégré qui apparaît chaque fois que vous êtes dans un endroit de saisie de texte, comme un champ de recherche ou e-mail. Suivez ces étapes pour pratiquer en utilisant le clavier à l'écran de l'iPad:Appuyez sur…