Dans ce tutoriel, vous apprendrez à rédiger une classe d'objets en Javascript afin de récupérer les états d'enfoncement ou de relâchement des touches du clavier que vous souhaitez utiliser... et ne plus réécrire ce code! En effet, étant donné que cette procédure est répétitive, une classe d'objets est idéale pour créer votre propre instruction et ne plus vous soucier de la rédaction de ce code.

A titre d'exemple, nous utiliserons cette classe pour déplacer une image d'hélicoptère dans la page, mais vous pourrez également l'utiliser pour piloter un diaporama au clavier, ou pour un jeu. Vous aborderez donc :

  • la POO (programmation orientée objet) en Javascript
  • l'instanciation d'une classe
  • les différences entre variables privées et publiques
  • la création d'une méthode privée (fonction interne à la classe)

Cette classe sera donc réutilisée lors de futurs tutos sur le développement de jeux en HTML5/Javascript via la balise canvas.

Jetez un oeil à ces autres tuto JavaScript 1.6

Créer une application autour de moi en HTML5Créer une application autour…
Dans ce tuto HTML5 en vidéo, nous allons voir comment créer…

Les fondamentaux de la programmationLes fondamentaux de la programmation…
Tuto Programmation : Les concepts théoriques de base pour bien…

Créer un jeu de type Portal 2D en Javascript/HTML5Créer un jeu de type Portal…
Ce tuto HTML5/JS vous permettra de découvrir comment réaliser…

DEBUTER EN HTML5 - CSS3 - JavaScript - Tome 3DEBUTER EN HTML5 - CSS3 -…
Ce pack vidéo fait partie d'une série sur la programmation…

La formation complète sur JavaScriptLa formation complète sur…
Voici une formation Javascript complète, d'une durée de près…

Débuter en HTML5 - CSS3 - Javascript - Tome 1Débuter en HTML5 - CSS3 -…
Cette formation fait partie d'une série sur la programmation…

Débuter en HTML5 - CSS3 - Javascript - Tome 2Débuter en HTML5 - CSS3 -…
Cette formation vidéo fait partie d'une série sur la programmation…

Introduction à l’API Google Maps JavaScript v3Introduction à l’API Google…
Dans ce tutoriel vidéo Introduction à l'API GoogleMaps Javascript…

Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto JavaScript 1.6 de 39 minutes est proposée dans une résolution plus grande que l’extrait suivant :

Partagez cet extrait

Lien vers cet extrait : Embed code :

JeanBambi , Formateur



Toutes les formations de JeanBambi


 

Notes attribuées par les utilisateurs (5 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (10)

par JeanBambi
(auteur de ce tuto - 16 juin 2014)

" Bonjour
En effet, avec le keyDown tu détectes l'enfoncement de la touche, il faut donc surveiller son relâchent avec un keyUp. Désolé pour cette réponse sommaire : je suis en plein déménagement ! "

par graphoeila voté :
(a acheté ce tuto - 16 juin 2014)

" Très bon Tuto, très clair. J'ai essayé de modifier l'écouteur d'événement par un document.addEventListener('keydown',function()... et j'obtiens un bug, la touche enfoncée est bien détectée mais son relachement ne l'est pas (l'hélico continu d'avancer tout seul...). Il doit y avoir une astuce je suppose. "

par JeanBambi
(auteur de ce tuto - 30 décembre 2012)

" Merci Shade146, c'est le type de commentaire qui me réjouit ! "

par Shade146a voté :
(a acheté ce tuto - 24 décembre 2012)

" Super tuto, c'est ma première initiation au JavaScript orienté Objet et j'ai tout compris.
Merci à toi pour cette formation ;) "

par JeanBambi
(auteur de ce tuto - 19 décembre 2012)

" Bonjour
Pour utiliser cette classe afin de diriger une voiture vue de haut, il faudra avoir recours à de la trigo simple reposant juste sur les cosinus et sinus.
Ça peut faire l'objet de la suite qu'évoque CybreWarrior !
En ce cas j'aurai recours à la balise <canvas>, qui se prête parfaitement au jeu. "

par cyberwarriora voté :
(a acheté ce tuto - 18 décembre 2012)

" Tuto bien réalisé.

Le tuto m'avait semblé trop cher avant l'achat. Mais ce dernier est bien réalisé, et les crédits se justifient. Effectivement abousidibe , la fin est un peu rapide et sommaire. Vivement la suite !
"

par zenpca voté :
(a acheté ce tuto - 18 décembre 2012)

" très bon tuto
souhiate avoir des fonction pour un jeux de voiture exemple faire tourner l'image et autre
sinon grand merci à toi "

par JeanBambi
(auteur de ce tuto - 18 décembre 2012)

" Bonjour
Dans le cadre du développement d'une application Javascript comme un jeu, il me semble plus judicieux de rédiger cette classe en JS.
Il faut surtout voir à travers ce tuto la rédaction d'une "instruction personnalisée" qui permet de ne plus s'occuper de la partie code pour une tâche répétitive (ici l'observation des touches du clavier), comme si on étendait Javascript. "

par Hakkerman
(n'a pas acheté ce tuto - 17 décembre 2012)

" une petite question, pourquoi ne pas faire cette classe objet en php plutôt qu'en javascript ? "

par abousidibea voté :
(a acheté ce tuto - 15 décembre 2012)

" intéressant exemple même si la fin du tuto est un peu sommaire "

 

Donnez votre avis ou posez une question au formateur.

Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous

Ce tuto en résumé ...

Ce tuto JavaScript 1.6 d’une durée de 39 minutes a été acheté 47 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 11 décembre 2012 par JeanBambi, contributeur, ayant reçu une note moyenne de 4,6/5 pour l’ensemble de ses vidéos.

Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.

Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.

Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

N'hésitez pas à nous contacter si vous avez la moindre question !