Ce tutoriel utilise l’ancien moteur PytactX qui est aujourd’hui d\u00e9pr\u00e9ci\u00e9. Une nouvelle version sera bient\u00f4t disponible pour vous permettre de cr\u00e9er votre agent sur play.jusdeliens.com<\/a><\/p>\n\n\n\n
\u2699\ufe0f Pr\u00e9requis<\/h2>\n\n\n\n- Un ordinateur sous Windows 10 <\/li>
- Un navigateur web :
- Google Chrome : t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li>
- ou Mozilla Firefox : t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li><\/ul><\/li>
- Un \u00e9diteur de texte :
- Bloc-notes : l’\u00e9diteur install\u00e9 par d\u00e9faut pour ceux qui ne souhaitent ou ne peuvent rien installer<\/li>
- ou Notepad ++ : un \u00e9diteur l\u00e9ger mais puissant, t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li><\/ul><\/li>
- Quelques connaissances th\u00e9oriques sur le web<\/li>
- De la patience et une volont\u00e9 de fer pour vaincre vos ennemis ! <\/li><\/ul>\n\n\n\n
Voici quelques courtes vid\u00e9os de 5 minutes que nous vous recommandons pour comprendre :
Ce qu’est le web et comment il permet d’acc\u00e9der \u00e0 des sites web<\/a>
Le mod\u00e8le client-serveur<\/a>
Ce qu’il se passe quand vous tapez un url dans votre navigateur<\/a>
Comment une page web est structur\u00e9e en html<\/a>
Comment une page web est mise en forme en css<\/a><\/p>\n\n\n\nN\u2019h\u00e9sitez pas \u00e0 nous contacter ici<\/a> pour toutes questions sur les notions de Web. A votre disposition si vous souhaitez aussi des formations ou cours particuliers adapt\u00e9s \u00e0 vos besoins \ud83d\ude09 <\/p>\n\n\n\n\ud83e\udeaa R\u00e9cup\u00e9ration de vos identifiants de connexion \u00e0 une ar\u00e8ne de jeu<\/h2>\n\n\n\n
Si vous n’avez pas encore d’identifiants<\/strong>, pour jouer gratuitement rien de plus simple, rendez vous sur jusdeliens.com\/ideal-free\/<\/a> et renseignez votre Pr\u00e9nom, Nom et Email. Vous recevrez vos identifiants gratuitement sous 48h. Une fois re\u00e7us par mail, \u00e0 vos claviers et neurones, on commence en cr\u00e9ant votre manette ! <\/p>\n\n\n\nL’acc\u00e8s aux ar\u00e8nes publiques est enti\u00e8rement gratuit mais limit\u00e9. Elles sont ouvertes \u00e0 l’occasion d’affrontements ou de formations jusdeliens dont les dates vous seront communiqu\u00e9es via la newsletter (\ud83d\udc49par ici pour vous abonner<\/a>).
Si vous souhaitez vous connecter \u00e0 une ar\u00e8ne priv\u00e9e, uniquement accessible \u00e0 ceux \u00e0 qui vous communiquerez son nom, vous pouvez cr\u00e9er votre propre ar\u00e8ne<\/a> ouverte 24h\/24, 7 jours sur 7 et accessible dans le monde entier avec IDEAL ARENA. <\/p>\n\n\n\n\ud83c\udfae Cr\u00e9ation de votre manette de jeu<\/h2>\n\n\n\n
Notre objectif est de cr\u00e9er une page web, sur laquelle nous pourrons visualiser l’ar\u00e8ne de jeu TactX et notre agent, ainsi qu’une manette de jeu pour le contr\u00f4ler.<\/p>\n\n\n\n
Une page web est avant tout compos\u00e9e d’\u00e9l\u00e9ments graphiques permettant \u00e0 un utilisateur d\u2019interagir avec. Il peut s’agir par exemple de boutons, de texte, d’images ou de liens cliquables.<\/p>\n\n\n\n
Dans un premier temps, nous allons placer ces \u00e9l\u00e9ments graphiques sur notre page web, en d\u00e9crivant leur placement dans un fichier que nous allons \u00e9diter.<\/p>\n\n\n\n
R\u00e9cup\u00e9ration des fichiers sources de votre page<\/h3>\n\n\n\n![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/jusdeliens-T%C3%A9l%C3%A9chargementDuProjetManettePytactX.gif\")
<\/figure><\/div>\n\n\n\nCommen\u00e7ons par cr\u00e9er notre dossier de travail, constitu\u00e9 de tous les fichiers n\u00e9cessaires pour cr\u00e9er notre page web. Pour cela, r\u00e9cup\u00e9rer le dossier compress\u00e9 du projet en remplissant le formulaire ci-dessous, puis cliquer sur le bouton “T\u00e9l\u00e9charger” :<\/p>\n\n\n
[wpforms id=”131″ title=”false” description=”false”]<\/p>\n\n\n\n
Une fois t\u00e9l\u00e9charg\u00e9, dans votre dossier “t\u00e9l\u00e9chargements”, faites un clic droit pour extraire les fichiers du dossier compress\u00e9, puis double clic dans le dossier jusqu’\u00e0 apercevoir les fichiers du projet : <\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-6.png\")
<\/figure><\/div>\n\n\n\n- index.html<\/strong> : d\u00e9finit les \u00e9l\u00e9ments graphiques de votre page web et leurs emplacements. Par exemple, si on veut ajouter un bouton, c’est ici qu’on le fera.<\/em><\/li>
- style.css<\/strong> : contient la description de la mise en forme des \u00e9l\u00e9ments de la page. Par exemple, si un texte doit appara\u00eetre en rouge sur la page, c’est ici qu’on le d\u00e9finira.<\/em><\/li>
- script.js<\/strong> : contient les variables et fonctions \u00e0 ex\u00e9cuter pour effectuer des actions dynamiques sur la page. Par exemple, si on veut afficher un message quand on clique sur un bouton, c’est ici qu’on \u00e9crira le programme correspondant.<\/em><\/li>
- pytactx.js<\/strong> : ce fichier contient les variables et les fonctions pour vous permettre de cr\u00e9er et d’interagir avec votre agent dans l’ar\u00e8ne de jeu TactX. Nous en aurons besoin pour relier votre manette au jeu.<\/li><\/ul>\n\n\n\n
Maintenant que nous avons les fichiers, ouvrons le fichier index.html<\/strong> avec notre navigateur web en double cliquant dessus<\/strong>. La page suivante devrait s’afficher :<\/p>\n\n\n\n![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-1-1024x540.png\")
L’ouverture du fichier index.html dans un navigateur (ici Google Chrome) affiche la page suivante \u00e0 l’\u00e9cran. Les rectangles en couleur sont rajout\u00e9s ici pour bien distinguer les diff\u00e9rentes divisions de la page.<\/figcaption><\/figure><\/div>\n\n\n\nNous voyons apparaitre 3 \u00e9l\u00e9ments principaux :<\/p>\n\n\n\n
- En haut de l’\u00e9cran (encadr\u00e9 en bleu)<\/strong> : Il s’agit du titre de la page<\/li>
- En rouge et vert <\/strong>: Il s’agit du corps de la page. Ce corps est divis\u00e9 en 2 parties.
- A gauche (encadr\u00e9 en rouge) <\/strong>: c’est l’interface pour acc\u00e9der et voir l’ar\u00e8ne du jeu. <\/li>
- A droite (encadr\u00e9 en vert) <\/strong>: cette partie est vide, c’est ici que nous rajouterons le code pour afficher notre manette de jeu.<\/li><\/ul><\/li><\/ul>\n\n\n\n
Ajout des boutons pour interagir<\/h3>\n\n\n\n
\u00c9ditons maintenant le fichier index.html pour comprendre comment la page est structur\u00e9e en html, et comment pouvons-nous la modifier. Pour cela 2 possibilit\u00e9s :<\/p>\n\n\n\n
- Pour ouvrir avec Bloc-Notes : faites clic droit sur le fichier index.html puis s\u00e9lectionner “Ouvrir avec”, puis “Choisir une autre application”, “Autres applications”, et enfin s\u00e9lectionner Bloc-Notes dans la liste<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/jusdeliens-ProjetManettePytactX-Editer-blocnotes-1.gif\")
<\/figure><\/div>\n\n\n\n- Si vous avez install\u00e9 notepad++ (voir pr\u00e9requis), faites clic droit sur le fichier index.html puis s\u00e9lectionner “Editer avec Notepad++”<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-16.png\")
<\/figure>\n\n\n\nStructure du fichier index.html<\/h4>\n\n\n\n
Comme expliqu\u00e9 dans les vid\u00e9os en pr\u00e9requis, l’html est un langage descriptif qui permet par du texte d\u00e9limit\u00e9 par des balises, de d\u00e9crire la structure graphique d’une page.<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-2-1024x388.png\")
Contenu du fichier index.html ouvert avec notepad++<\/figcaption><\/figure><\/div>\n\n\n\nComme tout fichier html, le code du fichier index.html est compris entre une balise ouvrante <html> et son homologue fermante <\/html>. Entre celles-ci, nous retrouvons l’ent\u00eate<\/strong> de la page (“head” en anglais) entre les balises <head> et <\/head>, puis le corps <\/strong>de la page (“body” en anglais) entre les balises <body> et <\/body>.<\/p>\n\n\n\nL’ent\u00eate comprends classiquement plusieurs balises, g\u00e9n\u00e9ralement non visibles par l’internaute:<\/p>\n\n\n\n
- title <\/strong>: d\u00e9finit le titre de la page visible dans la barre en haut dans le navigateur<\/li>
- meta <\/strong>: permet d’ajouter diff\u00e9rentes informations, comme l’encodage des caract\u00e8res de la page pour permettre les accents et caract\u00e8res sp\u00e9ciaux, les mots cl\u00e9s pour permettre aux moteurs de recherche de classer votre page, etc …<\/li>
- link <\/strong>: permet d’inclure d’autres d\u00e9pendances, comme des fichiers .css contenant la mise en page des \u00e9l\u00e9ments du fichier <\/li>
- script <\/strong>: permet d’inclure des fichiers javascripts utilis\u00e9s dans la page<\/li><\/ul>\n\n\n\n
Le body contient lui tous les \u00e9l\u00e9ments qui seront visibles par l’internaute dans son navigateur.<\/p>\n\n\n\n
A quoi servent les \u00e9l\u00e9ments en vert commen\u00e7ant par <!– ?<\/p><\/blockquote>\n\n\n\n
Ce sont des blocs de commentaires. Ils commencent par <!– et se termine par –>. Ces blocs ne sont pas affich\u00e9s par le navigateur mais permettent au d\u00e9veloppeur de placer des indications dans un fichier html.<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/html5.png\")
<\/figure><\/div>\n\n\n\nL’html n’est pas \u00e0 proprement parl\u00e9 un langage de programmation car il ne permet pas d’impl\u00e9menter des instructions, ni de variables, ni conditions, ni boucles qui sont les ingr\u00e9dients de base d’un programme. <\/p>\n\n\n\n
Ah bon ? Ce n’est pas possible de faire un programme sur une page web ? <\/p><\/blockquote>\n\n\n\n
Ce n’est effectivement pas possible en html seul. <\/p>\n\n\n\n
Alors comment faire pour cr\u00e9er mon agent et le d\u00e9placer si j’appuie sur un bouton ?<\/p><\/blockquote>\n\n\n\n
Pour cela nous avons besoin d’un autre langage, le javascript !<\/p>\n\n\n\n
![\"Enregistrer](\"https:\/\/www.softfluent.fr\/wp-content\/uploads\/2019\/10\/javascript.png\")
<\/figure><\/div>\n\n\n\nEuh ok, mais comment on relie tous ces langages entres-eux ?<\/p><\/blockquote>\n\n\n\n
Dans notre fichier index.html. Voyons cela sans plus attendre.<\/p>\n\n\n\n
Placement du bouton sur la page en html<\/h4>\n\n\n\n
Dans le fichier index.html, ne devons d\u00e9crire en html o\u00f9 se placera un bouton “Cr\u00e9er agent” \u00e0 l’\u00e9cran. Pour faire cela, ajoutons une balise “button” pour d\u00e9crire le bouton. <\/p>\n\n\n\n
Comme nous voulons rajoutez les \u00e9l\u00e9ments de notre manette \u00e0 droite de l’\u00e9cran, ins\u00e9rons la ligne suivante dans la division “manette” (le rectangle en vert) de notre page, entre <div id=”manette”><\/em> et <\/div><\/em> :<\/p>\n\n\n\n<button onclick=\"\">Cr\u00e9er agent<\/button><\/code><\/pre>\n\n\n\nEnregistrons le fichier (avec le raccourci CTRL+S), puis rechargeons notre page dans le navigateur (raccourci CTRL+R).<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-8-1024x546.png\")
Le bouton “Cr\u00e9er agent” appara\u00eet dans la partie de droite de la page, centr\u00e9 en hauteur et en largeur. <\/figcaption><\/figure><\/div>\n\n\n\nRien ne se passe quand je clique sur “Cr\u00e9er agent”, c’est normal ?<\/p><\/blockquote>\n\n\n\n
Absolument ! La ligne que nous avons rajouter dans le html ne fait qu’afficher le bouton. Pour d\u00e9clencher une action au clic souris, il nous faut associer l’\u00e9v\u00e8nement clic (attribut onclick du bouton) \u00e0 un programme. Voyons comment faire.<\/p>\n\n\n\n
Programmer l’action du bouton en javascript<\/h4>\n\n\n\n
Si l’utilisateur appuie sur le bouton, alors nous devons ex\u00e9cuter des instructions \u00e9crites dans un autre langage, le javascript.<\/p>\n\n\n\n
En html, une balise peut contenir de nombreux attributs selon son type. Pour le bouton, l’attribut “onclick” permet d\u2019ex\u00e9cuter des instructions javascript quand le bouton est cliqu\u00e9. <\/p>\n\n\n\n
Nous pouvons alors appeler des fonctions du fichier pytactx.js pour nous permettre de cr\u00e9er notre agent et le connecter \u00e0 l’ar\u00e8ne. Pour cela, modifions la balise button de la mani\u00e8re suivante :<\/p>\n\n\n\n
<button onclick=\"pytactx_connecter()\">Cr\u00e9er agent<\/button><\/code><\/pre>\n\n\n\nEnregistrez les modifications (CTRL+S) puis rechargez la page dans le navigateur (CTRL+R). <\/p>\n\n\n\n
Connectez-vous \u00e0 l’ar\u00e8ne dans l’interface de gauche, puis cliquez sur le bouton “Cr\u00e9er agent”. Une fen\u00eatre appara\u00eet. Rentrez-y le nom souhait\u00e9 de votre agent, puis le nom de l’ar\u00e8ne, l’identifiant et le mot de passe pour y acc\u00e9der. Vous devriez voir votre agent appara\u00eetre dans l’interface de gauche !<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/jusdeliens-ProjetManettePytactX-Boutons.gif\")
Ouvre la page index.html avec votre navigateur. Connectez vous \u00e0 l’ar\u00e8ne dans l’interface de gauche, puis cliquez sur le bouton “Cr\u00e9er agent” et renseignez vos identifiants. il devrait appara\u00eetre dans l’ar\u00e8ne ! Les autres boutons sont \u00e0 rajouter !<\/figcaption><\/figure><\/div>\n\n\n\nPour donner plus de fonctionnalit\u00e9s \u00e0 votre manette, voici toutes les autres fonctions disponibles (accessibles dans le fichier pytactx.js)<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-13.png\")
Les fonctions en javascript permettant de faire agir l’agent dans l’ar\u00e8ne <\/figcaption><\/figure><\/div>\n\n\n\n- pytactx_deplacer(dx, dy)<\/strong> : pour d\u00e9placer l’agent. dx et dy repr\u00e9sente le nombre de case de d\u00e9placement \u00e0 remplacer par un nombre. Si dx < 0, l’agent ira \u00e0 gauche, si dx > 0 il ira \u00e0 droite. Si dy < 0, l’agent ira en haut, si dy > 0 il ira en bas.
Exemple : pytactx_deplacer(-1, 0) d\u00e9placera l’agent d’une case vers la gauche et de 0 case en vertical.<\/em><\/li>- pytactx_orienter(direction)<\/strong> : pour orienter l’agent dans la direction sp\u00e9cifi\u00e9e. Remplacer direction par 0 pour regarder \u00e0 droite, 1 pour regarder en haut, 2 pour regarder \u00e0 gauche, 3 pour regarder en bas.
Exemple : apr\u00e8s pytactx_orienter(3), l’agent regarder vers le bas de l’ar\u00e8ne.<\/em><\/li>- pytactx_tirer (activer)<\/strong> : pour activer ou d\u00e9sactiver le tir en rafale en rempla\u00e7ant activer par un bool\u00e9en (soit true<\/strong>, soit false<\/strong>). Si activer \u00e9gale false<\/strong>, l’agent arr\u00eatera de tirer, sinon, l’agent tirera en rafale.
Exemple : apr\u00e8s un pytactx_tirer(true), l’agent tira en rafale plusieurs fois par seconde jusqu’\u00e0 ne plus avoir de munition ou jusqu’\u00e0 un pytactx_tirer(false) <\/em><\/li><\/ul>\n\n\n\nComme en Python, les fonctions en javascript sont des sous-programmes pouvant prendre des param\u00e8tres en entr\u00e9e et pouvant renvoyer des param\u00e8tres en sortie. Dans tous les cas, pour appeler une fonction, il faut toujours rajouter les parenth\u00e8ses ouvrantes et fermantes apr\u00e8s le nom de la fonction.
Exemple : pytactx_connecter() ne prends ici aucun param\u00e8tre, il n’y a aucune variable entre les parenth\u00e8ses<\/em><\/p>\n\n\n\nIl ne vous reste plus qu’\u00e0 rajouter d’autres boutons dans votre fichier html en appelant les fonctions d’actions correspondantes !<\/p>\n\n\n\n
- des boutons “Gauche”, “Droite”, “Haut”, “Bas”<\/strong> : pour d\u00e9placer votre agent. Chacun de ces boutons doit appeler la fonction pytactx_deplacer(dx,dy) avec les dx,dy correspondant au d\u00e9placements correspondants.<\/li>
- Un bouton “Tirer”<\/strong> : pour activer le tir en rafale. L’\u00e9v\u00e8nement “onclick” doit appeler la fonction “pytactx_tirer(true)”<\/li>
- Un bouton “Stop”<\/strong> : pour arr\u00eater de tirer, en appelant la fonction “pytactx_tirer(false)”<\/li><\/ul>\n\n\n\n
Voici \u00e0 quoi devrait ressembler votre page une fois enregistr\u00e9e et recharg\u00e9e dans le navigateur :<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/2020-05-11-1024x624.png\")
Les boutons ajouter dans la div s’affichent de haut en bas automatiquement<\/figcaption><\/figure><\/div>\n\n\n\nEuh, comment je fais pour ajouter d’autres boutons ? <\/p><\/blockquote>\n\n\n\n
La ligne que nous avons ajout\u00e9e dans index.html, nous a permis de cr\u00e9er notre bouton “Cr\u00e9er agent”. Pour cr\u00e9er d’autres boutons, il suffit d’ajouter d’autres lignes <button … <\/button><\/em> en changeant le texte du bouton et son comportement onclick.<\/p>\n\n\n\nMaintenant que nous avons vu comment d\u00e9placer notre agent avec notre manette web, voyons comment modifier notre page web quand notre agent change.<\/p>\n\n\n\n
Mettre \u00e0 jour des \u00e9l\u00e9ments html quand l’\u00e9tat de l’agent change<\/h3>\n\n\n\n
Ajoutons un nouvel \u00e9l\u00e9ment dans le fichier index.html pour afficher l’orientation de l’agent. Comme l’orientation est une variable num\u00e9rique pouvant aller de 0 \u00e0 3, ajoutons un label dans notre manette avec la balise “label”.<\/p>\n\n\n\n
<label id=\"orientation\">Orientation = 0<\/label><\/code><\/pre>\n\n\n\nLe texte contenu entre la balise ouvrante <label> et fermante <\/label> sera le texte affich\u00e9 sur la page web par notre navigateur. <\/p>\n\n\n\n
A quoi sert id=”orientation” ?<\/p><\/blockquote>\n\n\n\n
L’attribut id va nous permettre d’identifier notre label pour pouvoir le modifier avec un code javascript. “orientation” c’est un peu la carte d’identit\u00e9 de notre label, il faut donc s\u2019assurer qu’il est unique dans la page sinon on risque de modifier malencontreusement plusieurs \u00e9l\u00e9ments.<\/p>\n\n\n\n
Modifier le label orientation ? Pour faire quoi ?<\/p><\/blockquote>\n\n\n\n
Quand l’utilisateur jouera avec la manette, l’agent se d\u00e9placera dans l’ar\u00e8ne, son orientation changera donc. L’id\u00e9e est d’actualiser le texte du label, d\u00e8s qu’il aura une nouvelle orientation, et \u00e7a, seul un langage de programmation peut le faire !<\/p>\n\n\n\n
Ok, et comment on fait \u00e7a ? En javascript ?<\/p><\/blockquote>\n\n\n\n
Bingo ! Pour cela, rendez vous dans le fichier script.js. Un script est un programme que le navigateur ex\u00e9cutera ligne par ligne, instruction apr\u00e8s instruction.<\/p>\n\n\n\n
Premi\u00e8re chose \u00e0 faire, cr\u00e9er un sous-programme qui sera appel\u00e9 quand l’\u00e9tat de votre agent change. Comme en Python et d’autres langages de programmation, d\u00e9finissons une fonction pour r\u00e9cup\u00e9rer l’\u00e9tat de l’agent quand il changera :<\/p>\n\n\n\n
function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)\n{\n \/\/ On rajoutera entre ces accolades le code \u00e0 ex\u00e9cuter\n}<\/code><\/pre>\n\n\n\nEn javascript, pour d\u00e9finir une fonction on utilise le mot cl\u00e9 function<\/strong>, (\u00e9quivalent au mot cl\u00e9 def <\/strong>en Python). Pour cela, la fonction doit est constitu\u00e9e de 2 blocs indissociables :
– son ent\u00eate<\/strong> (on dit aussi signature ou encore prototype), constitu\u00e9 du nom de la fonction, suivi obligatoirement par des parenth\u00e8ses ouvrantes et fermantes. Entre ses parenth\u00e8ses, la fonction peut aussi d\u00e9finir des variables d’entr\u00e9es (s\u00e9par\u00e9es par des virgules), qu’il faudra renseigner pour ex\u00e9cuter la fonction. Ici l’ent\u00eate de la fonction est :
quandEtatAgentChange(x,y,orientation,vie,distance,munitions)<\/em>
Quand elle sera appel\u00e9e par le serveur du jeu, les variables x,y,orientation,vie,distance,munitions contiendront les nouvelles valeurs de l’\u00e9tat de l’agent.
– son corps<\/strong>, d\u00e9limit\u00e9 par des accolades ouvrantes et fermantes. C’est entre ces accolades que nous pouvons rajouter les instructions de notre sous-programme, ligne par ligne. En javascript (comme en langage C et C++), il est coutume de mettre un caract\u00e8re point-virgule \u00e0 la fin de chaque ligne d’instruction ‘;’ <\/p>\n\n\n\nTu as dis le navigateur ex\u00e9cute ligne apr\u00e8s ligne le fichier script.js. Mais comment il fait \u00e7a ? Je dois ouvrir le fichier script.js avec le navigateur ?<\/p><\/blockquote>\n\n\n\n
Que nenni ! Ouvrez uniquement le fichier index.html avec votre navigateur. Gr\u00e2ce \u00e0 la ligne 15 <script src=”script.js”><\/script> de ce fichier, le navigateur ex\u00e9cutera tout seul les instructions de votre script ligne apr\u00e8s ligne.<\/p>\n\n\n\n
Ok, et quand est-ce que les lignes de ma fonction quandEtatAgentChange<\/em> seront ex\u00e9cut\u00e9es ? Une seule fois quand j’ouvrerai la page ?<\/p><\/blockquote>\n\n\n\nHeureusement non ! Pour que les lignes entre les accolades de quandEtatAgentChange<\/em> soient ex\u00e9cut\u00e9es, il faut appeler cette fonction. Pour le moment, nous avons uniquement d\u00e9fini la fonction, ce qui n\u2019ex\u00e9cute rien.<\/p>\n\n\n\nPour indiquer au serveur de jeu d’appeler cette fonction quand l’agent changera au cours du jeu, rajoutons la ligne suivante \u00e0 la fin du fichier script.js :<\/p>\n\n\n\n
pytactx_executerQuandEtatAgentChange(quandEtatAgentChange)<\/code><\/pre>\n\n\n\nQuand l’agent se d\u00e9placera, le serveur de jeu appellera la fonction quandEtatAgentChange <\/strong>en passant en param\u00e8tre les nouvelles valeurs des variables d’\u00e9tat de l’agent. <\/p>\n\n\n\nJe colle cette ligne entre les accolades ?<\/p><\/blockquote>\n\n\n\n
Surtout pas ! On la rajoutera sur une nouvelle ligne \u00e0 la fin du script apr\u00e8s l’accolade fermante. De cette mani\u00e8re, quand le navigateur lira le fichier script.js de la premi\u00e8re ligne \u00e0 la derni\u00e8re ligne \u00e0 l’ouverture du fichier index.html, il fera dans l’ordre :
1.<\/strong> D\u00e9finition de la fonction quandEtatAgentChange<\/em> en m\u00e9moire sans l’ex\u00e9cuter
2.<\/strong> Ex\u00e9cution de la fonction pytactx_executerQuandEtatAgentChange<\/em> (d\u00e9finie dans le fichier pytactx.js) en passant en param\u00e8tre un lien vers la fonction quandEtatAgentChange<\/em>.
Par la suite,
3.<\/strong> Quand vous cliquerez sur le bouton “Cr\u00e9er agent”, la fonction pytactx_connecter()<\/em> dans pytactx.js sera ex\u00e9cut\u00e9e et se connectera au serveur de jeu.
4.<\/strong> Quand votre agent changera dans le jeu (ex: s’il se fait tirer dessus, ou si vous le d\u00e9placez), alors le serveur du jeu notifiera le script pytactx.js qui appelera votre fonction quandEtatAgentChange<\/em> <\/p>\n\n\n\nPour informations, voici \u00e0 quoi correspond les variables de l’agent :<\/p>\n\n\n\n![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-12.png\")
Les variables de votre agent permettant de conna\u00eetre son \u00e9tat en javascript <\/figcaption><\/figure>\n\n\n\nC’est donc dans cette fonction que nous devons rajouter le code javascript pour actualiser notre label “orientation” ! Pour cela, nous aurons besoin de la fonction document.getElementById(id)<\/strong> qui permet de r\u00e9cup\u00e9rer notre label pour modifier ses propri\u00e9t\u00e9s. <\/p>\n\n\n\nLa fonction document.getElementById(id)<\/strong> permet de r\u00e9cup\u00e9rer n’importe quel \u00e9l\u00e9ment HTML via son attribut id.
Par exemple, on peut modifier la couleur d’un bouton et rendre son fond bleu en faisant :
document.getElementById(“idDuBouton”).style.background = “blue”;<\/strong>
De mani\u00e8re g\u00e9n\u00e9ral, pour modifier une propri\u00e9t\u00e9 de la page dynamiquement, il faut simplement conna\u00eetre le l’id de l’\u00e9l\u00e9ment, puis le nom de sa propri\u00e9t\u00e9 \u00e0 modifier. Pour ce dernier point, Google est votre ami !<\/p>\n\n\n\nQuand il s’agit d’un label, pour acc\u00e9der\/modifier son contenu (le texte qui s’affichera dans le navigateur), on peut rajouter .innerHTML<\/strong>, ce qui donnera en javascript :<\/p>\n\n\n\ndocument.getElementById(\"IdDuLabelDansLeFichierHtml\").innerHTML<\/code><\/pre>\n\n\n\nDans notre fonction, on souhaite modifier le contenu du label et y mettre la nouvelle valeur d’orientation de l’agent. Nous utiliserons donc l’op\u00e9rateur d’affectation (le signe ‘=’), pour mettre l’expression \u00e0 droite du ‘=’ dans le contenu du label.<\/p>\n\n\n\n
function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)\n{\n document.getElementById(\"orientation\").innerHTML = \"Orientation: \" + orientation;\n}<\/code><\/pre>\n\n\n\nA quoi sert l’instruction “Orientation: ” + orientation; ?<\/p><\/blockquote>\n\n\n\n
Elle sert \u00e0 concat\u00e9ner, c’est \u00e0 dire mettre dans le label HTML le texte “orientation: ” suivi du nombre contenu dans la variable orientation <\/strong>de l’agent. Le point virgule “;” \u00e0 la fin indique la fin de l’instruction (pour ne pas concat\u00e9ner aussi la ligne suivante dans le programme).<\/p>\n\n\n\nPour plus de clart\u00e9 pour l’utilisateur, vous pouvez \u00e0 la place d’un nombre orientation afficher un texte. Par exemple, si orientation \u00e9gale \u00e0 0 alors afficher “Orientation droite”, etc …<\/p>\n\n\n\n
function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)\n{\n if ( orientation == 0 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: droite\";\n else if ( orientation == 1 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: haut\";\n else if ( orientation == 2 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: gauche\";\n else if ( orientation == 3 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: bas\";\n}<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/jusdeliens-ProjetManettePytactX-Labels.gif\")
Une fois votre script.js enregistr\u00e9 et le navigateur actualis\u00e9, cr\u00e9ez votre agent et utilisez les boutons de d\u00e9placement. Vous devriez voir le label “orientation” se mettre \u00e0 jour ! Les autres labels sont \u00e0 rajouter !<\/figcaption><\/figure><\/div>\n\n\n\nTout \u00e7a pour afficher l’orientation ? Le joueur n’a qu’\u00e0 regarder son agent dans l’ar\u00e8ne ? <\/p><\/blockquote>\n\n\n\n
C’est vrai ce n’est pas la variable d’\u00e9tat la plus int\u00e9ressante de l’agent. Mais la d\u00e9marche est la m\u00eame si vous souhaitez afficher les vies restantes, les munitions, ou plus g\u00e9n\u00e9ralement modifier votre manette si une variable de l’agent change ! On pourrait imaginer faire vibrer virtuellement votre manette quand votre agent se fait tirer dessus et que sa vie diminue par exemple !<\/p>\n\n\n\n
Pour vous amusez, vous pouvez rajouter d’autres labels pour afficher toutes les variables de l’agent. Et si vous voulez allez plus loin, Google est encore votre ami ! Tapez par exemple : “changer couleur bouton javascript” et voyez les r\u00e9sultats sur les forums !<\/p>\n\n\n\n
Il existe aussi de nombreux autres \u00e9l\u00e9ments pour interagir avec une page web : <\/p>\n\n\n\n
- l’\u00e9l\u00e9ment <\/a>meter<\/a> <\/strong>: pour afficher une jauge graphique. Id\u00e9al pour indiquer une ressource \u00e9puisable dans un jeu (comme la vie ou les munitions…)<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-14.png\")
<\/figure><\/div>\n\n\n\n- l’\u00e9l\u00e9ment <\/a>canvas<\/a> <\/strong>: pour dessiner et animer n’importe quelles figures g\u00e9om\u00e9triques dans une zone rectangulaire. C’est l’\u00e9l\u00e9ment phare pour r\u00e9aliser un jeu vid\u00e9o en 2D.<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/image-15.png\")
<\/figure><\/div>\n\n\n\nEt bien d’autres encore<\/a> …<\/p>\n\n\n\nAvez tous ces \u00e9l\u00e9ments, voici th\u00e9oriquement \u00e0 quoi pourrait ressembler votre manette ! A vos neurones et claviers pour la r\u00e9aliser !<\/p>\n\n\n\n
![\"\"](\"https:\/\/tutos.jusdeliens.com\/wp-content\/uploads\/2020\/05\/PorjetManettePytactx-manette.png\")
<\/figure><\/div>\n\n\n\n\ud83c\udf89 Conclusion<\/h2>\n\n\n\n
Nous avons vu comment le langage html permet de structurer l’affichage d’une page web. <\/p>\n\n\n\n
Pour effectuer des actions dynamiques, comme communiquer avec le serveur de jeu PytactX pour faire agir un agent, nous avons utilis\u00e9 des fonctions en javascript reli\u00e9es aux \u00e9v\u00e8nements des boutons en html.<\/p>\n\n\n\n
Nous avons aussi appris \u00e0 changer dynamiquement des \u00e9l\u00e9ments de la page web quand les variables d’\u00e9tat de notre agent changent, que ce soit changer le texte d’un label ou bien la couleur d’un bouton. <\/p>\n\n\n\n
Dans le prochain tutoriel, nous verrons comment personnaliser l’affichage des boutons pour donner un autre look \u00e0 notre manette en utilisant la magie du CSS !<\/p>\n\n\n\n
\ud83d\ude80 Pour aller plus loin<\/h2>\n\n\n\n
En attendant la seconde partie de ce tutoriel, si vous souhaitez approfondir vos connaissances pour am\u00e9liorer votre page web, je vous conseille l’excellent tuto de Mathieu Nebra sur openclassroom en cliquant ici<\/a>.<\/p>\n\n\n\n\ud83d\udee3\ufe0f Et apr\u00e8s ?<\/h2>\n\n\n\n
Vous avez aim\u00e9 ce tutoriel et vous en voulez d’autres ? <\/p>\n\n\n\n
Faites le nous savoir en \ud83d\udc49<\/strong> donnant vos avis et vos envies<\/a> et nous nous empresserons de vous en r\u00e9digez d’autres \ud83d\ude09<\/p>\n\n\n\n
- Google Chrome : t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li>
- ou Mozilla Firefox : t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li><\/ul><\/li>
- Un \u00e9diteur de texte :
- Bloc-notes : l’\u00e9diteur install\u00e9 par d\u00e9faut pour ceux qui ne souhaitent ou ne peuvent rien installer<\/li>
- ou Notepad ++ : un \u00e9diteur l\u00e9ger mais puissant, t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li><\/ul><\/li>
- Quelques connaissances th\u00e9oriques sur le web<\/li>
- De la patience et une volont\u00e9 de fer pour vaincre vos ennemis ! <\/li><\/ul>\n\n\n\n
Voici quelques courtes vid\u00e9os de 5 minutes que nous vous recommandons pour comprendre :
Ce qu’est le web et comment il permet d’acc\u00e9der \u00e0 des sites web<\/a>
Le mod\u00e8le client-serveur<\/a>
Ce qu’il se passe quand vous tapez un url dans votre navigateur<\/a>
Comment une page web est structur\u00e9e en html<\/a>
Comment une page web est mise en forme en css<\/a><\/p>\n\n\n\nN\u2019h\u00e9sitez pas \u00e0 nous contacter ici<\/a> pour toutes questions sur les notions de Web. A votre disposition si vous souhaitez aussi des formations ou cours particuliers adapt\u00e9s \u00e0 vos besoins \ud83d\ude09 <\/p>\n\n\n\n
\ud83e\udeaa R\u00e9cup\u00e9ration de vos identifiants de connexion \u00e0 une ar\u00e8ne de jeu<\/h2>\n\n\n\n
Si vous n’avez pas encore d’identifiants<\/strong>, pour jouer gratuitement rien de plus simple, rendez vous sur jusdeliens.com\/ideal-free\/<\/a> et renseignez votre Pr\u00e9nom, Nom et Email. Vous recevrez vos identifiants gratuitement sous 48h. Une fois re\u00e7us par mail, \u00e0 vos claviers et neurones, on commence en cr\u00e9ant votre manette ! <\/p>\n\n\n\n
L’acc\u00e8s aux ar\u00e8nes publiques est enti\u00e8rement gratuit mais limit\u00e9. Elles sont ouvertes \u00e0 l’occasion d’affrontements ou de formations jusdeliens dont les dates vous seront communiqu\u00e9es via la newsletter (\ud83d\udc49par ici pour vous abonner<\/a>).
Si vous souhaitez vous connecter \u00e0 une ar\u00e8ne priv\u00e9e, uniquement accessible \u00e0 ceux \u00e0 qui vous communiquerez son nom, vous pouvez cr\u00e9er votre propre ar\u00e8ne<\/a> ouverte 24h\/24, 7 jours sur 7 et accessible dans le monde entier avec IDEAL ARENA. <\/p>\n\n\n\n\ud83c\udfae Cr\u00e9ation de votre manette de jeu<\/h2>\n\n\n\n
Notre objectif est de cr\u00e9er une page web, sur laquelle nous pourrons visualiser l’ar\u00e8ne de jeu TactX et notre agent, ainsi qu’une manette de jeu pour le contr\u00f4ler.<\/p>\n\n\n\n
Une page web est avant tout compos\u00e9e d’\u00e9l\u00e9ments graphiques permettant \u00e0 un utilisateur d\u2019interagir avec. Il peut s’agir par exemple de boutons, de texte, d’images ou de liens cliquables.<\/p>\n\n\n\n
Dans un premier temps, nous allons placer ces \u00e9l\u00e9ments graphiques sur notre page web, en d\u00e9crivant leur placement dans un fichier que nous allons \u00e9diter.<\/p>\n\n\n\n
R\u00e9cup\u00e9ration des fichiers sources de votre page<\/h3>\n\n\n\n
<\/figure><\/div>\n\n\n\nCommen\u00e7ons par cr\u00e9er notre dossier de travail, constitu\u00e9 de tous les fichiers n\u00e9cessaires pour cr\u00e9er notre page web. Pour cela, r\u00e9cup\u00e9rer le dossier compress\u00e9 du projet en remplissant le formulaire ci-dessous, puis cliquer sur le bouton “T\u00e9l\u00e9charger” :<\/p>\n\n\n
[wpforms id=”131″ title=”false” description=”false”]<\/p>\n\n\n\n
Une fois t\u00e9l\u00e9charg\u00e9, dans votre dossier “t\u00e9l\u00e9chargements”, faites un clic droit pour extraire les fichiers du dossier compress\u00e9, puis double clic dans le dossier jusqu’\u00e0 apercevoir les fichiers du projet : <\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n- index.html<\/strong> : d\u00e9finit les \u00e9l\u00e9ments graphiques de votre page web et leurs emplacements. Par exemple, si on veut ajouter un bouton, c’est ici qu’on le fera.<\/em><\/li>
- style.css<\/strong> : contient la description de la mise en forme des \u00e9l\u00e9ments de la page. Par exemple, si un texte doit appara\u00eetre en rouge sur la page, c’est ici qu’on le d\u00e9finira.<\/em><\/li>
- script.js<\/strong> : contient les variables et fonctions \u00e0 ex\u00e9cuter pour effectuer des actions dynamiques sur la page. Par exemple, si on veut afficher un message quand on clique sur un bouton, c’est ici qu’on \u00e9crira le programme correspondant.<\/em><\/li>
- pytactx.js<\/strong> : ce fichier contient les variables et les fonctions pour vous permettre de cr\u00e9er et d’interagir avec votre agent dans l’ar\u00e8ne de jeu TactX. Nous en aurons besoin pour relier votre manette au jeu.<\/li><\/ul>\n\n\n\n
Maintenant que nous avons les fichiers, ouvrons le fichier index.html<\/strong> avec notre navigateur web en double cliquant dessus<\/strong>. La page suivante devrait s’afficher :<\/p>\n\n\n\n
L’ouverture du fichier index.html dans un navigateur (ici Google Chrome) affiche la page suivante \u00e0 l’\u00e9cran. Les rectangles en couleur sont rajout\u00e9s ici pour bien distinguer les diff\u00e9rentes divisions de la page.<\/figcaption><\/figure><\/div>\n\n\n\n Nous voyons apparaitre 3 \u00e9l\u00e9ments principaux :<\/p>\n\n\n\n
- En haut de l’\u00e9cran (encadr\u00e9 en bleu)<\/strong> : Il s’agit du titre de la page<\/li>
- En rouge et vert <\/strong>: Il s’agit du corps de la page. Ce corps est divis\u00e9 en 2 parties.
- A gauche (encadr\u00e9 en rouge) <\/strong>: c’est l’interface pour acc\u00e9der et voir l’ar\u00e8ne du jeu. <\/li>
- A droite (encadr\u00e9 en vert) <\/strong>: cette partie est vide, c’est ici que nous rajouterons le code pour afficher notre manette de jeu.<\/li><\/ul><\/li><\/ul>\n\n\n\n
Ajout des boutons pour interagir<\/h3>\n\n\n\n
\u00c9ditons maintenant le fichier index.html pour comprendre comment la page est structur\u00e9e en html, et comment pouvons-nous la modifier. Pour cela 2 possibilit\u00e9s :<\/p>\n\n\n\n
- Pour ouvrir avec Bloc-Notes : faites clic droit sur le fichier index.html puis s\u00e9lectionner “Ouvrir avec”, puis “Choisir une autre application”, “Autres applications”, et enfin s\u00e9lectionner Bloc-Notes dans la liste<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n\n
- Si vous avez install\u00e9 notepad++ (voir pr\u00e9requis), faites clic droit sur le fichier index.html puis s\u00e9lectionner “Editer avec Notepad++”<\/li><\/ul>\n\n\n\n<\/figure>\n\n\n\n
Structure du fichier index.html<\/h4>\n\n\n\n
Comme expliqu\u00e9 dans les vid\u00e9os en pr\u00e9requis, l’html est un langage descriptif qui permet par du texte d\u00e9limit\u00e9 par des balises, de d\u00e9crire la structure graphique d’une page.<\/p>\n\n\n\n
Contenu du fichier index.html ouvert avec notepad++<\/figcaption><\/figure><\/div>\n\n\n\n Comme tout fichier html, le code du fichier index.html est compris entre une balise ouvrante <html> et son homologue fermante <\/html>. Entre celles-ci, nous retrouvons l’ent\u00eate<\/strong> de la page (“head” en anglais) entre les balises <head> et <\/head>, puis le corps <\/strong>de la page (“body” en anglais) entre les balises <body> et <\/body>.<\/p>\n\n\n\n
L’ent\u00eate comprends classiquement plusieurs balises, g\u00e9n\u00e9ralement non visibles par l’internaute:<\/p>\n\n\n\n
- title <\/strong>: d\u00e9finit le titre de la page visible dans la barre en haut dans le navigateur<\/li>
- meta <\/strong>: permet d’ajouter diff\u00e9rentes informations, comme l’encodage des caract\u00e8res de la page pour permettre les accents et caract\u00e8res sp\u00e9ciaux, les mots cl\u00e9s pour permettre aux moteurs de recherche de classer votre page, etc …<\/li>
- link <\/strong>: permet d’inclure d’autres d\u00e9pendances, comme des fichiers .css contenant la mise en page des \u00e9l\u00e9ments du fichier <\/li>
- script <\/strong>: permet d’inclure des fichiers javascripts utilis\u00e9s dans la page<\/li><\/ul>\n\n\n\n
Le body contient lui tous les \u00e9l\u00e9ments qui seront visibles par l’internaute dans son navigateur.<\/p>\n\n\n\n
A quoi servent les \u00e9l\u00e9ments en vert commen\u00e7ant par <!– ?<\/p><\/blockquote>\n\n\n\n
Ce sont des blocs de commentaires. Ils commencent par <!– et se termine par –>. Ces blocs ne sont pas affich\u00e9s par le navigateur mais permettent au d\u00e9veloppeur de placer des indications dans un fichier html.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nL’html n’est pas \u00e0 proprement parl\u00e9 un langage de programmation car il ne permet pas d’impl\u00e9menter des instructions, ni de variables, ni conditions, ni boucles qui sont les ingr\u00e9dients de base d’un programme. <\/p>\n\n\n\n
Ah bon ? Ce n’est pas possible de faire un programme sur une page web ? <\/p><\/blockquote>\n\n\n\n
Ce n’est effectivement pas possible en html seul. <\/p>\n\n\n\n
Alors comment faire pour cr\u00e9er mon agent et le d\u00e9placer si j’appuie sur un bouton ?<\/p><\/blockquote>\n\n\n\n
Pour cela nous avons besoin d’un autre langage, le javascript !<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nEuh ok, mais comment on relie tous ces langages entres-eux ?<\/p><\/blockquote>\n\n\n\n
Dans notre fichier index.html. Voyons cela sans plus attendre.<\/p>\n\n\n\n
Placement du bouton sur la page en html<\/h4>\n\n\n\n
Dans le fichier index.html, ne devons d\u00e9crire en html o\u00f9 se placera un bouton “Cr\u00e9er agent” \u00e0 l’\u00e9cran. Pour faire cela, ajoutons une balise “button” pour d\u00e9crire le bouton. <\/p>\n\n\n\n
Comme nous voulons rajoutez les \u00e9l\u00e9ments de notre manette \u00e0 droite de l’\u00e9cran, ins\u00e9rons la ligne suivante dans la division “manette” (le rectangle en vert) de notre page, entre <div id=”manette”><\/em> et <\/div><\/em> :<\/p>\n\n\n\n
<button onclick=\"\">Cr\u00e9er agent<\/button><\/code><\/pre>\n\n\n\nEnregistrons le fichier (avec le raccourci CTRL+S), puis rechargeons notre page dans le navigateur (raccourci CTRL+R).<\/p>\n\n\n\n
Le bouton “Cr\u00e9er agent” appara\u00eet dans la partie de droite de la page, centr\u00e9 en hauteur et en largeur. <\/figcaption><\/figure><\/div>\n\n\n\n Rien ne se passe quand je clique sur “Cr\u00e9er agent”, c’est normal ?<\/p><\/blockquote>\n\n\n\n
Absolument ! La ligne que nous avons rajouter dans le html ne fait qu’afficher le bouton. Pour d\u00e9clencher une action au clic souris, il nous faut associer l’\u00e9v\u00e8nement clic (attribut onclick du bouton) \u00e0 un programme. Voyons comment faire.<\/p>\n\n\n\n
Programmer l’action du bouton en javascript<\/h4>\n\n\n\n
Si l’utilisateur appuie sur le bouton, alors nous devons ex\u00e9cuter des instructions \u00e9crites dans un autre langage, le javascript.<\/p>\n\n\n\n
En html, une balise peut contenir de nombreux attributs selon son type. Pour le bouton, l’attribut “onclick” permet d\u2019ex\u00e9cuter des instructions javascript quand le bouton est cliqu\u00e9. <\/p>\n\n\n\n
Nous pouvons alors appeler des fonctions du fichier pytactx.js pour nous permettre de cr\u00e9er notre agent et le connecter \u00e0 l’ar\u00e8ne. Pour cela, modifions la balise button de la mani\u00e8re suivante :<\/p>\n\n\n\n
<button onclick=\"pytactx_connecter()\">Cr\u00e9er agent<\/button><\/code><\/pre>\n\n\n\nEnregistrez les modifications (CTRL+S) puis rechargez la page dans le navigateur (CTRL+R). <\/p>\n\n\n\n
Connectez-vous \u00e0 l’ar\u00e8ne dans l’interface de gauche, puis cliquez sur le bouton “Cr\u00e9er agent”. Une fen\u00eatre appara\u00eet. Rentrez-y le nom souhait\u00e9 de votre agent, puis le nom de l’ar\u00e8ne, l’identifiant et le mot de passe pour y acc\u00e9der. Vous devriez voir votre agent appara\u00eetre dans l’interface de gauche !<\/p>\n\n\n\n
Ouvre la page index.html avec votre navigateur. Connectez vous \u00e0 l’ar\u00e8ne dans l’interface de gauche, puis cliquez sur le bouton “Cr\u00e9er agent” et renseignez vos identifiants. il devrait appara\u00eetre dans l’ar\u00e8ne ! Les autres boutons sont \u00e0 rajouter !<\/figcaption><\/figure><\/div>\n\n\n\n Pour donner plus de fonctionnalit\u00e9s \u00e0 votre manette, voici toutes les autres fonctions disponibles (accessibles dans le fichier pytactx.js)<\/p>\n\n\n\n
Les fonctions en javascript permettant de faire agir l’agent dans l’ar\u00e8ne <\/figcaption><\/figure><\/div>\n\n\n\n - pytactx_deplacer(dx, dy)<\/strong> : pour d\u00e9placer l’agent. dx et dy repr\u00e9sente le nombre de case de d\u00e9placement \u00e0 remplacer par un nombre. Si dx < 0, l’agent ira \u00e0 gauche, si dx > 0 il ira \u00e0 droite. Si dy < 0, l’agent ira en haut, si dy > 0 il ira en bas.
Exemple : pytactx_deplacer(-1, 0) d\u00e9placera l’agent d’une case vers la gauche et de 0 case en vertical.<\/em><\/li>- pytactx_orienter(direction)<\/strong> : pour orienter l’agent dans la direction sp\u00e9cifi\u00e9e. Remplacer direction par 0 pour regarder \u00e0 droite, 1 pour regarder en haut, 2 pour regarder \u00e0 gauche, 3 pour regarder en bas.
Exemple : apr\u00e8s pytactx_orienter(3), l’agent regarder vers le bas de l’ar\u00e8ne.<\/em><\/li>- pytactx_tirer (activer)<\/strong> : pour activer ou d\u00e9sactiver le tir en rafale en rempla\u00e7ant activer par un bool\u00e9en (soit true<\/strong>, soit false<\/strong>). Si activer \u00e9gale false<\/strong>, l’agent arr\u00eatera de tirer, sinon, l’agent tirera en rafale.
Exemple : apr\u00e8s un pytactx_tirer(true), l’agent tira en rafale plusieurs fois par seconde jusqu’\u00e0 ne plus avoir de munition ou jusqu’\u00e0 un pytactx_tirer(false) <\/em><\/li><\/ul>\n\n\n\nComme en Python, les fonctions en javascript sont des sous-programmes pouvant prendre des param\u00e8tres en entr\u00e9e et pouvant renvoyer des param\u00e8tres en sortie. Dans tous les cas, pour appeler une fonction, il faut toujours rajouter les parenth\u00e8ses ouvrantes et fermantes apr\u00e8s le nom de la fonction.
Exemple : pytactx_connecter() ne prends ici aucun param\u00e8tre, il n’y a aucune variable entre les parenth\u00e8ses<\/em><\/p>\n\n\n\nIl ne vous reste plus qu’\u00e0 rajouter d’autres boutons dans votre fichier html en appelant les fonctions d’actions correspondantes !<\/p>\n\n\n\n
- des boutons “Gauche”, “Droite”, “Haut”, “Bas”<\/strong> : pour d\u00e9placer votre agent. Chacun de ces boutons doit appeler la fonction pytactx_deplacer(dx,dy) avec les dx,dy correspondant au d\u00e9placements correspondants.<\/li>
- Un bouton “Tirer”<\/strong> : pour activer le tir en rafale. L’\u00e9v\u00e8nement “onclick” doit appeler la fonction “pytactx_tirer(true)”<\/li>
- Un bouton “Stop”<\/strong> : pour arr\u00eater de tirer, en appelant la fonction “pytactx_tirer(false)”<\/li><\/ul>\n\n\n\n
Voici \u00e0 quoi devrait ressembler votre page une fois enregistr\u00e9e et recharg\u00e9e dans le navigateur :<\/p>\n\n\n\n
Les boutons ajouter dans la div s’affichent de haut en bas automatiquement<\/figcaption><\/figure><\/div>\n\n\n\n Euh, comment je fais pour ajouter d’autres boutons ? <\/p><\/blockquote>\n\n\n\n
La ligne que nous avons ajout\u00e9e dans index.html, nous a permis de cr\u00e9er notre bouton “Cr\u00e9er agent”. Pour cr\u00e9er d’autres boutons, il suffit d’ajouter d’autres lignes <button … <\/button><\/em> en changeant le texte du bouton et son comportement onclick.<\/p>\n\n\n\n
Maintenant que nous avons vu comment d\u00e9placer notre agent avec notre manette web, voyons comment modifier notre page web quand notre agent change.<\/p>\n\n\n\n
Mettre \u00e0 jour des \u00e9l\u00e9ments html quand l’\u00e9tat de l’agent change<\/h3>\n\n\n\n
Ajoutons un nouvel \u00e9l\u00e9ment dans le fichier index.html pour afficher l’orientation de l’agent. Comme l’orientation est une variable num\u00e9rique pouvant aller de 0 \u00e0 3, ajoutons un label dans notre manette avec la balise “label”.<\/p>\n\n\n\n
<label id=\"orientation\">Orientation = 0<\/label><\/code><\/pre>\n\n\n\nLe texte contenu entre la balise ouvrante <label> et fermante <\/label> sera le texte affich\u00e9 sur la page web par notre navigateur. <\/p>\n\n\n\n
A quoi sert id=”orientation” ?<\/p><\/blockquote>\n\n\n\n
L’attribut id va nous permettre d’identifier notre label pour pouvoir le modifier avec un code javascript. “orientation” c’est un peu la carte d’identit\u00e9 de notre label, il faut donc s\u2019assurer qu’il est unique dans la page sinon on risque de modifier malencontreusement plusieurs \u00e9l\u00e9ments.<\/p>\n\n\n\n
Modifier le label orientation ? Pour faire quoi ?<\/p><\/blockquote>\n\n\n\n
Quand l’utilisateur jouera avec la manette, l’agent se d\u00e9placera dans l’ar\u00e8ne, son orientation changera donc. L’id\u00e9e est d’actualiser le texte du label, d\u00e8s qu’il aura une nouvelle orientation, et \u00e7a, seul un langage de programmation peut le faire !<\/p>\n\n\n\n
Ok, et comment on fait \u00e7a ? En javascript ?<\/p><\/blockquote>\n\n\n\n
Bingo ! Pour cela, rendez vous dans le fichier script.js. Un script est un programme que le navigateur ex\u00e9cutera ligne par ligne, instruction apr\u00e8s instruction.<\/p>\n\n\n\n
Premi\u00e8re chose \u00e0 faire, cr\u00e9er un sous-programme qui sera appel\u00e9 quand l’\u00e9tat de votre agent change. Comme en Python et d’autres langages de programmation, d\u00e9finissons une fonction pour r\u00e9cup\u00e9rer l’\u00e9tat de l’agent quand il changera :<\/p>\n\n\n\n
function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)\n{\n \/\/ On rajoutera entre ces accolades le code \u00e0 ex\u00e9cuter\n}<\/code><\/pre>\n\n\n\nEn javascript, pour d\u00e9finir une fonction on utilise le mot cl\u00e9 function<\/strong>, (\u00e9quivalent au mot cl\u00e9 def <\/strong>en Python). Pour cela, la fonction doit est constitu\u00e9e de 2 blocs indissociables :
– son ent\u00eate<\/strong> (on dit aussi signature ou encore prototype), constitu\u00e9 du nom de la fonction, suivi obligatoirement par des parenth\u00e8ses ouvrantes et fermantes. Entre ses parenth\u00e8ses, la fonction peut aussi d\u00e9finir des variables d’entr\u00e9es (s\u00e9par\u00e9es par des virgules), qu’il faudra renseigner pour ex\u00e9cuter la fonction. Ici l’ent\u00eate de la fonction est :
quandEtatAgentChange(x,y,orientation,vie,distance,munitions)<\/em>
Quand elle sera appel\u00e9e par le serveur du jeu, les variables x,y,orientation,vie,distance,munitions contiendront les nouvelles valeurs de l’\u00e9tat de l’agent.
– son corps<\/strong>, d\u00e9limit\u00e9 par des accolades ouvrantes et fermantes. C’est entre ces accolades que nous pouvons rajouter les instructions de notre sous-programme, ligne par ligne. En javascript (comme en langage C et C++), il est coutume de mettre un caract\u00e8re point-virgule \u00e0 la fin de chaque ligne d’instruction ‘;’ <\/p>\n\n\n\nTu as dis le navigateur ex\u00e9cute ligne apr\u00e8s ligne le fichier script.js. Mais comment il fait \u00e7a ? Je dois ouvrir le fichier script.js avec le navigateur ?<\/p><\/blockquote>\n\n\n\n
Que nenni ! Ouvrez uniquement le fichier index.html avec votre navigateur. Gr\u00e2ce \u00e0 la ligne 15 <script src=”script.js”><\/script> de ce fichier, le navigateur ex\u00e9cutera tout seul les instructions de votre script ligne apr\u00e8s ligne.<\/p>\n\n\n\n
Ok, et quand est-ce que les lignes de ma fonction quandEtatAgentChange<\/em> seront ex\u00e9cut\u00e9es ? Une seule fois quand j’ouvrerai la page ?<\/p><\/blockquote>\n\n\n\n
Heureusement non ! Pour que les lignes entre les accolades de quandEtatAgentChange<\/em> soient ex\u00e9cut\u00e9es, il faut appeler cette fonction. Pour le moment, nous avons uniquement d\u00e9fini la fonction, ce qui n\u2019ex\u00e9cute rien.<\/p>\n\n\n\n
Pour indiquer au serveur de jeu d’appeler cette fonction quand l’agent changera au cours du jeu, rajoutons la ligne suivante \u00e0 la fin du fichier script.js :<\/p>\n\n\n\n
pytactx_executerQuandEtatAgentChange(quandEtatAgentChange)<\/code><\/pre>\n\n\n\nQuand l’agent se d\u00e9placera, le serveur de jeu appellera la fonction quandEtatAgentChange <\/strong>en passant en param\u00e8tre les nouvelles valeurs des variables d’\u00e9tat de l’agent. <\/p>\n\n\n\n
Je colle cette ligne entre les accolades ?<\/p><\/blockquote>\n\n\n\n
Surtout pas ! On la rajoutera sur une nouvelle ligne \u00e0 la fin du script apr\u00e8s l’accolade fermante. De cette mani\u00e8re, quand le navigateur lira le fichier script.js de la premi\u00e8re ligne \u00e0 la derni\u00e8re ligne \u00e0 l’ouverture du fichier index.html, il fera dans l’ordre :
1.<\/strong> D\u00e9finition de la fonction quandEtatAgentChange<\/em> en m\u00e9moire sans l’ex\u00e9cuter
2.<\/strong> Ex\u00e9cution de la fonction pytactx_executerQuandEtatAgentChange<\/em> (d\u00e9finie dans le fichier pytactx.js) en passant en param\u00e8tre un lien vers la fonction quandEtatAgentChange<\/em>.
Par la suite,
3.<\/strong> Quand vous cliquerez sur le bouton “Cr\u00e9er agent”, la fonction pytactx_connecter()<\/em> dans pytactx.js sera ex\u00e9cut\u00e9e et se connectera au serveur de jeu.
4.<\/strong> Quand votre agent changera dans le jeu (ex: s’il se fait tirer dessus, ou si vous le d\u00e9placez), alors le serveur du jeu notifiera le script pytactx.js qui appelera votre fonction quandEtatAgentChange<\/em> <\/p>\n\n\n\nPour informations, voici \u00e0 quoi correspond les variables de l’agent :<\/p>\n\n\n\n
Les variables de votre agent permettant de conna\u00eetre son \u00e9tat en javascript <\/figcaption><\/figure>\n\n\n\n C’est donc dans cette fonction que nous devons rajouter le code javascript pour actualiser notre label “orientation” ! Pour cela, nous aurons besoin de la fonction document.getElementById(id)<\/strong> qui permet de r\u00e9cup\u00e9rer notre label pour modifier ses propri\u00e9t\u00e9s. <\/p>\n\n\n\n
La fonction document.getElementById(id)<\/strong> permet de r\u00e9cup\u00e9rer n’importe quel \u00e9l\u00e9ment HTML via son attribut id.
Par exemple, on peut modifier la couleur d’un bouton et rendre son fond bleu en faisant :
document.getElementById(“idDuBouton”).style.background = “blue”;<\/strong>
De mani\u00e8re g\u00e9n\u00e9ral, pour modifier une propri\u00e9t\u00e9 de la page dynamiquement, il faut simplement conna\u00eetre le l’id de l’\u00e9l\u00e9ment, puis le nom de sa propri\u00e9t\u00e9 \u00e0 modifier. Pour ce dernier point, Google est votre ami !<\/p>\n\n\n\nQuand il s’agit d’un label, pour acc\u00e9der\/modifier son contenu (le texte qui s’affichera dans le navigateur), on peut rajouter .innerHTML<\/strong>, ce qui donnera en javascript :<\/p>\n\n\n\n
document.getElementById(\"IdDuLabelDansLeFichierHtml\").innerHTML<\/code><\/pre>\n\n\n\nDans notre fonction, on souhaite modifier le contenu du label et y mettre la nouvelle valeur d’orientation de l’agent. Nous utiliserons donc l’op\u00e9rateur d’affectation (le signe ‘=’), pour mettre l’expression \u00e0 droite du ‘=’ dans le contenu du label.<\/p>\n\n\n\n
function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)\n{\n document.getElementById(\"orientation\").innerHTML = \"Orientation: \" + orientation;\n}<\/code><\/pre>\n\n\n\nA quoi sert l’instruction “Orientation: ” + orientation; ?<\/p><\/blockquote>\n\n\n\n
Elle sert \u00e0 concat\u00e9ner, c’est \u00e0 dire mettre dans le label HTML le texte “orientation: ” suivi du nombre contenu dans la variable orientation <\/strong>de l’agent. Le point virgule “;” \u00e0 la fin indique la fin de l’instruction (pour ne pas concat\u00e9ner aussi la ligne suivante dans le programme).<\/p>\n\n\n\n
Pour plus de clart\u00e9 pour l’utilisateur, vous pouvez \u00e0 la place d’un nombre orientation afficher un texte. Par exemple, si orientation \u00e9gale \u00e0 0 alors afficher “Orientation droite”, etc …<\/p>\n\n\n\n
function quandEtatAgentChange(x,y,orientation,vie,distance,munitions)\n{\n if ( orientation == 0 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: droite\";\n else if ( orientation == 1 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: haut\";\n else if ( orientation == 2 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: gauche\";\n else if ( orientation == 3 )\n document.getElementById(\"orientation\").innerHTML = \"Orientation: bas\";\n}<\/code><\/pre>\n\n\n\nUne fois votre script.js enregistr\u00e9 et le navigateur actualis\u00e9, cr\u00e9ez votre agent et utilisez les boutons de d\u00e9placement. Vous devriez voir le label “orientation” se mettre \u00e0 jour ! Les autres labels sont \u00e0 rajouter !<\/figcaption><\/figure><\/div>\n\n\n\n Tout \u00e7a pour afficher l’orientation ? Le joueur n’a qu’\u00e0 regarder son agent dans l’ar\u00e8ne ? <\/p><\/blockquote>\n\n\n\n
C’est vrai ce n’est pas la variable d’\u00e9tat la plus int\u00e9ressante de l’agent. Mais la d\u00e9marche est la m\u00eame si vous souhaitez afficher les vies restantes, les munitions, ou plus g\u00e9n\u00e9ralement modifier votre manette si une variable de l’agent change ! On pourrait imaginer faire vibrer virtuellement votre manette quand votre agent se fait tirer dessus et que sa vie diminue par exemple !<\/p>\n\n\n\n
Pour vous amusez, vous pouvez rajouter d’autres labels pour afficher toutes les variables de l’agent. Et si vous voulez allez plus loin, Google est encore votre ami ! Tapez par exemple : “changer couleur bouton javascript” et voyez les r\u00e9sultats sur les forums !<\/p>\n\n\n\n
Il existe aussi de nombreux autres \u00e9l\u00e9ments pour interagir avec une page web : <\/p>\n\n\n\n
- l’\u00e9l\u00e9ment <\/a>meter<\/a> <\/strong>: pour afficher une jauge graphique. Id\u00e9al pour indiquer une ressource \u00e9puisable dans un jeu (comme la vie ou les munitions…)<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n\n
- l’\u00e9l\u00e9ment <\/a>canvas<\/a> <\/strong>: pour dessiner et animer n’importe quelles figures g\u00e9om\u00e9triques dans une zone rectangulaire. C’est l’\u00e9l\u00e9ment phare pour r\u00e9aliser un jeu vid\u00e9o en 2D.<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n\n
Et bien d’autres encore<\/a> …<\/p>\n\n\n\n
Avez tous ces \u00e9l\u00e9ments, voici th\u00e9oriquement \u00e0 quoi pourrait ressembler votre manette ! A vos neurones et claviers pour la r\u00e9aliser !<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n\ud83c\udf89 Conclusion<\/h2>\n\n\n\n
Nous avons vu comment le langage html permet de structurer l’affichage d’une page web. <\/p>\n\n\n\n
Pour effectuer des actions dynamiques, comme communiquer avec le serveur de jeu PytactX pour faire agir un agent, nous avons utilis\u00e9 des fonctions en javascript reli\u00e9es aux \u00e9v\u00e8nements des boutons en html.<\/p>\n\n\n\n
Nous avons aussi appris \u00e0 changer dynamiquement des \u00e9l\u00e9ments de la page web quand les variables d’\u00e9tat de notre agent changent, que ce soit changer le texte d’un label ou bien la couleur d’un bouton. <\/p>\n\n\n\n
Dans le prochain tutoriel, nous verrons comment personnaliser l’affichage des boutons pour donner un autre look \u00e0 notre manette en utilisant la magie du CSS !<\/p>\n\n\n\n
\ud83d\ude80 Pour aller plus loin<\/h2>\n\n\n\n
En attendant la seconde partie de ce tutoriel, si vous souhaitez approfondir vos connaissances pour am\u00e9liorer votre page web, je vous conseille l’excellent tuto de Mathieu Nebra sur openclassroom en cliquant ici<\/a>.<\/p>\n\n\n\n
\ud83d\udee3\ufe0f Et apr\u00e8s ?<\/h2>\n\n\n\n
Vous avez aim\u00e9 ce tutoriel et vous en voulez d’autres ? <\/p>\n\n\n\n
Faites le nous savoir en \ud83d\udc49<\/strong> donnant vos avis et vos envies<\/a> et nous nous empresserons de vous en r\u00e9digez d’autres \ud83d\ude09<\/p>\n\n\n\n
- l’\u00e9l\u00e9ment <\/a>canvas<\/a> <\/strong>: pour dessiner et animer n’importe quelles figures g\u00e9om\u00e9triques dans une zone rectangulaire. C’est l’\u00e9l\u00e9ment phare pour r\u00e9aliser un jeu vid\u00e9o en 2D.<\/li><\/ul>\n\n\n\n
- Un bouton “Tirer”<\/strong> : pour activer le tir en rafale. L’\u00e9v\u00e8nement “onclick” doit appeler la fonction “pytactx_tirer(true)”<\/li>
- pytactx_orienter(direction)<\/strong> : pour orienter l’agent dans la direction sp\u00e9cifi\u00e9e. Remplacer direction par 0 pour regarder \u00e0 droite, 1 pour regarder en haut, 2 pour regarder \u00e0 gauche, 3 pour regarder en bas.
- meta <\/strong>: permet d’ajouter diff\u00e9rentes informations, comme l’encodage des caract\u00e8res de la page pour permettre les accents et caract\u00e8res sp\u00e9ciaux, les mots cl\u00e9s pour permettre aux moteurs de recherche de classer votre page, etc …<\/li>
- title <\/strong>: d\u00e9finit le titre de la page visible dans la barre en haut dans le navigateur<\/li>
- Si vous avez install\u00e9 notepad++ (voir pr\u00e9requis), faites clic droit sur le fichier index.html puis s\u00e9lectionner “Editer avec Notepad++”<\/li><\/ul>\n\n\n\n
- A droite (encadr\u00e9 en vert) <\/strong>: cette partie est vide, c’est ici que nous rajouterons le code pour afficher notre manette de jeu.<\/li><\/ul><\/li><\/ul>\n\n\n\n
- En rouge et vert <\/strong>: Il s’agit du corps de la page. Ce corps est divis\u00e9 en 2 parties.
- style.css<\/strong> : contient la description de la mise en forme des \u00e9l\u00e9ments de la page. Par exemple, si un texte doit appara\u00eetre en rouge sur la page, c’est ici qu’on le d\u00e9finira.<\/em><\/li>
- ou Mozilla Firefox : t\u00e9l\u00e9chargeable en cliquant ici<\/a><\/li><\/ul><\/li>
![\"\"](\"http:\/\/jusdeliens.com\/wp-content\/uploads\/2019\/01\/R2D2.gif\")
<\/figure>\n\n\n\n