diff options
Diffstat (limited to 'source/index.ts.html')
| -rw-r--r-- | source/index.ts.html | 665 |
1 files changed, 0 insertions, 665 deletions
diff --git a/source/index.ts.html b/source/index.ts.html deleted file mode 100644 index 5138d07..0000000 --- a/source/index.ts.html +++ /dev/null @@ -1,665 +0,0 @@ -<html> -<head> -<title>index.ts</title> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> -<style type="text/css"> -.s0 { color: #808080;} -.s1 { color: #a9b7c6;} -.s2 { color: #629755; font-style: italic;} -.s3 { color: #629755; font-weight: bold; font-style: italic;} -.s4 { color: #cc7832;} -.s5 { color: #6897bb;} -.s6 { color: #6a8759;} -.ln { color: #606366; font-weight: normal; font-style: normal; } -</style> -</head> -<body bgcolor="#2b2b2b"> -<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" > -<tr><td><center> -<font face="Arial, Helvetica" color="#000000"> -index.ts</font> -</center></td></tr></table> -<pre><a name="l1"><span class="ln">1 </span></a><span class="s0">/* -<a name="l2"><span class="ln">2 </span></a> ____ ___ _____ _ _____ ___ ____ ___ ____ _ _ ___ -<a name="l3"><span class="ln">3 </span></a> | _ \ / _ \_ _|/ \|_ _/ _ \ / ___|/ _ \ / ___| | | |_ _| -<a name="l4"><span class="ln">4 </span></a> | |_) | | | || | / _ \ | || | | | | _| | | | | | |_| || | -<a name="l5"><span class="ln">5 </span></a> | __/| |_| || |/ ___ \| || |_| | |_| | |_| | |___| _ || | -<a name="l6"><span class="ln">6 </span></a> |_| \___/ |_/_/ \_\_| \___/ \____|\___/ \____|_| |_|___| -<a name="l7"><span class="ln">7 </span></a> -<a name="l8"><span class="ln">8 </span></a> == Un projet de NSI == -<a name="l9"><span class="ln">9 </span></a> -<a name="l10"><span class="ln">10 </span></a> Date de début : 18 novembre 2022 -<a name="l11"><span class="ln">11 </span></a> Date de fin : 20 novembre 2022 -<a name="l12"><span class="ln">12 </span></a> Durée de réalisation : 2 jours -<a name="l13"><span class="ln">13 </span></a> Navigateur de test : Firefox 108.0b3 -<a name="l14"><span class="ln">14 </span></a> -<a name="l15"><span class="ln">15 </span></a> LICENCE -<a name="l16"><span class="ln">16 </span></a> ======= -<a name="l17"><span class="ln">17 </span></a> -<a name="l18"><span class="ln">18 </span></a> © 2022 Equestria.dev, Tous droits réservés. -<a name="l19"><span class="ln">19 </span></a> -<a name="l20"><span class="ln">20 </span></a> Ce contenu est fourni à des fins éducatives uniquement. Il -<a name="l21"><span class="ln">21 </span></a> ne peut être reproduit, publié ou modifié sans l'autorisa- -<a name="l22"><span class="ln">22 </span></a> tion des auteurs originaux. -<a name="l23"><span class="ln">23 </span></a> -<a name="l24"><span class="ln">24 </span></a> STATISTIQUES -<a name="l25"><span class="ln">25 </span></a> ============ -<a name="l26"><span class="ln">26 </span></a> -<a name="l27"><span class="ln">27 </span></a> ╔══════════════════════╗ -<a name="l28"><span class="ln">28 </span></a> ║ 852 LIGNES DE CODE ║ -<a name="l29"><span class="ln">29 </span></a> ╚══════════════════════╝ -<a name="l30"><span class="ln">30 </span></a> -<a name="l31"><span class="ln">31 </span></a> ┌──────┬──────┬──────┬───────────┐ -<a name="l32"><span class="ln">32 </span></a> │ HTML │ CSS │ TS │ TOTAL │ -<a name="l33"><span class="ln">33 </span></a> ┌──────────────────────────┼──────┼──────┼──────┼───────────┤ -<a name="l34"><span class="ln">34 </span></a> │ Lignes de code uniques │ 25 │ 57 │ 199 │ 281 │ -<a name="l35"><span class="ln">35 </span></a> ├──────────────────────────┼──────┼──────┼──────┼───────────┤ -<a name="l36"><span class="ln">36 </span></a> │ Lignes de commentaire │ 15 │ 43 │ 360 │ 418 │ -<a name="l37"><span class="ln">37 </span></a> ├──────────────────────────┼──────┼──────┼──────┼───────────┤ -<a name="l38"><span class="ln">38 </span></a> │ Lignes vides │ 20 │ 51 │ 82 │ 153 │ -<a name="l39"><span class="ln">39 </span></a> ├──────────────────────────┼──────┼──────┼──────┼───────────┤ -<a name="l40"><span class="ln">40 </span></a> │ Total des lignes │ 60 │ 151 │ 641 │ 852 │ -<a name="l41"><span class="ln">41 </span></a> └──────────────────────────┴──────┴──────┴──────┴───────────┘ -<a name="l42"><span class="ln">42 </span></a> -<a name="l43"><span class="ln">43 </span></a> Nombre de types : 8 -<a name="l44"><span class="ln">44 </span></a> Nombre de méthodes : 12 -<a name="l45"><span class="ln">45 </span></a> Nombre de propriétés : 9 -<a name="l46"><span class="ln">46 </span></a> Nombre de bro hoof : 101 -<a name="l47"><span class="ln">47 </span></a> -<a name="l48"><span class="ln">48 </span></a> · ^c^ · -<a name="l49"><span class="ln">49 </span></a>*/</span> -<a name="l50"><span class="ln">50 </span></a> -<a name="l51"><span class="ln">51 </span></a><span class="s2">/**</span> -<a name="l52"><span class="ln">52 </span></a> <span class="s2">* Un couple de valeurs représentant des coordonnées</span> -<a name="l53"><span class="ln">53 </span></a> <span class="s2">* dans un repère en 2 dimensions. /)</span> -<a name="l54"><span class="ln">54 </span></a> <span class="s2">*</span> -<a name="l55"><span class="ln">55 </span></a> <span class="s2">* </span><span class="s3">@property </span><span class="s2">x - La position en abscisse</span> -<a name="l56"><span class="ln">56 </span></a> <span class="s2">* </span><span class="s3">@property </span><span class="s2">y - La position en ordonnée</span> -<a name="l57"><span class="ln">57 </span></a> <span class="s2">*/</span> -<a name="l58"><span class="ln">58 </span></a><span class="s4">interface </span><span class="s1">Coordinates {</span> -<a name="l59"><span class="ln">59 </span></a> <span class="s1">x: number</span><span class="s4">;</span> -<a name="l60"><span class="ln">60 </span></a> <span class="s1">y: number</span><span class="s4">;</span> -<a name="l61"><span class="ln">61 </span></a><span class="s1">}</span> -<a name="l62"><span class="ln">62 </span></a> -<a name="l63"><span class="ln">63 </span></a><span class="s2">/**</span> -<a name="l64"><span class="ln">64 </span></a> <span class="s2">* Comme Coordinates, mais explicitement pour une boîte</span> -<a name="l65"><span class="ln">65 </span></a> <span class="s2">* de collisions. /)</span> -<a name="l66"><span class="ln">66 </span></a> <span class="s2">*</span> -<a name="l67"><span class="ln">67 </span></a> <span class="s2">* </span><span class="s3">@extends </span><span class="s2">Coordinates</span> -<a name="l68"><span class="ln">68 </span></a> <span class="s2">*/</span> -<a name="l69"><span class="ln">69 </span></a><span class="s4">interface </span><span class="s1">ColliderCoordinates </span><span class="s4">extends </span><span class="s1">Coordinates {}</span> -<a name="l70"><span class="ln">70 </span></a> -<a name="l71"><span class="ln">71 </span></a><span class="s2">/**</span> -<a name="l72"><span class="ln">72 </span></a> <span class="s2">* La direction verticale d'une instance Direction.</span> -<a name="l73"><span class="ln">73 </span></a> <span class="s2">* - None : pas de movement vertical</span> -<a name="l74"><span class="ln">74 </span></a> <span class="s2">* - Top : mouvement vers le haut</span> -<a name="l75"><span class="ln">75 </span></a> <span class="s2">* - Bottom : mouvement vers le bas</span> -<a name="l76"><span class="ln">76 </span></a> <span class="s2">* /)</span> -<a name="l77"><span class="ln">77 </span></a> <span class="s2">*</span> -<a name="l78"><span class="ln">78 </span></a> <span class="s2">* </span><span class="s3">@enum </span><span class="s2">{number}</span> -<a name="l79"><span class="ln">79 </span></a> <span class="s2">* </span><span class="s3">@requires </span><span class="s2">Direction</span> -<a name="l80"><span class="ln">80 </span></a> <span class="s2">*/</span> -<a name="l81"><span class="ln">81 </span></a><span class="s4">enum </span><span class="s1">VDirection {</span> -<a name="l82"><span class="ln">82 </span></a> <span class="s1">None</span><span class="s4">,</span> -<a name="l83"><span class="ln">83 </span></a> <span class="s1">Top</span><span class="s4">,</span> -<a name="l84"><span class="ln">84 </span></a> <span class="s1">Bottom</span> -<a name="l85"><span class="ln">85 </span></a><span class="s1">}</span> -<a name="l86"><span class="ln">86 </span></a> -<a name="l87"><span class="ln">87 </span></a><span class="s2">/**</span> -<a name="l88"><span class="ln">88 </span></a> <span class="s2">* La direction horizontale d'une instance Direction.</span> -<a name="l89"><span class="ln">89 </span></a> <span class="s2">* - None : pas de movement horizontal</span> -<a name="l90"><span class="ln">90 </span></a> <span class="s2">* - Left : mouvement vers la gauche</span> -<a name="l91"><span class="ln">91 </span></a> <span class="s2">* - Right : mouvement vers la droite</span> -<a name="l92"><span class="ln">92 </span></a> <span class="s2">* /)</span> -<a name="l93"><span class="ln">93 </span></a> <span class="s2">*</span> -<a name="l94"><span class="ln">94 </span></a> <span class="s2">* </span><span class="s3">@enum </span><span class="s2">{number}</span> -<a name="l95"><span class="ln">95 </span></a> <span class="s2">* </span><span class="s3">@requires </span><span class="s2">Direction</span> -<a name="l96"><span class="ln">96 </span></a> <span class="s2">*/</span> -<a name="l97"><span class="ln">97 </span></a><span class="s4">enum </span><span class="s1">HDirection {</span> -<a name="l98"><span class="ln">98 </span></a> <span class="s1">None</span><span class="s4">,</span> -<a name="l99"><span class="ln">99 </span></a> <span class="s1">Left</span><span class="s4">,</span> -<a name="l100"><span class="ln">100 </span></a> <span class="s1">Right</span> -<a name="l101"><span class="ln">101 </span></a><span class="s1">}</span> -<a name="l102"><span class="ln">102 </span></a> -<a name="l103"><span class="ln">103 </span></a><span class="s2">/**</span> -<a name="l104"><span class="ln">104 </span></a> <span class="s2">* Un ensemble de directions à prendre, verticale</span> -<a name="l105"><span class="ln">105 </span></a> <span class="s2">* et horizontale. /)</span> -<a name="l106"><span class="ln">106 </span></a> <span class="s2">*</span> -<a name="l107"><span class="ln">107 </span></a> <span class="s2">* </span><span class="s3">@property </span><span class="s2">vertical - La direction verticale</span> -<a name="l108"><span class="ln">108 </span></a> <span class="s2">* </span><span class="s3">@property </span><span class="s2">horizontal - La direction horizontale</span> -<a name="l109"><span class="ln">109 </span></a> <span class="s2">*/</span> -<a name="l110"><span class="ln">110 </span></a><span class="s4">interface </span><span class="s1">Direction {</span> -<a name="l111"><span class="ln">111 </span></a> <span class="s1">vertical: VDirection</span><span class="s4">,</span> -<a name="l112"><span class="ln">112 </span></a> <span class="s1">horizontal: HDirection</span> -<a name="l113"><span class="ln">113 </span></a><span class="s1">}</span> -<a name="l114"><span class="ln">114 </span></a> -<a name="l115"><span class="ln">115 </span></a><span class="s2">/**</span> -<a name="l116"><span class="ln">116 </span></a> <span class="s2">* Un movement unique que l'objet doit effectuer. /)</span> -<a name="l117"><span class="ln">117 </span></a> <span class="s2">*</span> -<a name="l118"><span class="ln">118 </span></a> <span class="s2">* </span><span class="s3">@property </span><span class="s2">direction - Une Direction que l'objet doit prendre</span> -<a name="l119"><span class="ln">119 </span></a> <span class="s2">* </span><span class="s3">@property </span><span class="s2">amount - Le nombre de pixels dont l'objet doit se</span> -<a name="l120"><span class="ln">120 </span></a> <span class="s2">* déplacer dans toutes les directions</span> -<a name="l121"><span class="ln">121 </span></a> <span class="s2">*/</span> -<a name="l122"><span class="ln">122 </span></a><span class="s4">interface </span><span class="s1">Movement {</span> -<a name="l123"><span class="ln">123 </span></a> <span class="s1">direction: Direction</span><span class="s4">,</span> -<a name="l124"><span class="ln">124 </span></a> <span class="s1">amount: number</span> -<a name="l125"><span class="ln">125 </span></a><span class="s1">}</span> -<a name="l126"><span class="ln">126 </span></a> -<a name="l127"><span class="ln">127 </span></a><span class="s2">/**</span> -<a name="l128"><span class="ln">128 </span></a> <span class="s2">* Le fichier de visage à afficher /)</span> -<a name="l129"><span class="ln">129 </span></a> <span class="s2">*</span> -<a name="l130"><span class="ln">130 </span></a> <span class="s2">* </span><span class="s3">@enum </span><span class="s2">{number}</span> -<a name="l131"><span class="ln">131 </span></a> <span class="s2">*/</span> -<a name="l132"><span class="ln">132 </span></a><span class="s4">enum </span><span class="s1">Face {</span> -<a name="l133"><span class="ln">133 </span></a> <span class="s1">MouthHappyEyesClosed</span><span class="s4">,</span> -<a name="l134"><span class="ln">134 </span></a> <span class="s1">MouthHappyEyesOpen</span><span class="s4">,</span> -<a name="l135"><span class="ln">135 </span></a> <span class="s1">MouthOpenEyesClosed</span><span class="s4">,</span> -<a name="l136"><span class="ln">136 </span></a> <span class="s1">MouthOpenEyesOpen</span><span class="s4">,</span> -<a name="l137"><span class="ln">137 </span></a> <span class="s1">MouthSadEyesClosed</span><span class="s4">,</span> -<a name="l138"><span class="ln">138 </span></a> <span class="s1">MouthSadEyesOpen</span> -<a name="l139"><span class="ln">139 </span></a><span class="s1">}</span> -<a name="l140"><span class="ln">140 </span></a> -<a name="l141"><span class="ln">141 </span></a><span class="s2">/**</span> -<a name="l142"><span class="ln">142 </span></a> <span class="s2">* Une instance du jeu Potatogochi /)</span> -<a name="l143"><span class="ln">143 </span></a> <span class="s2">*/</span> -<a name="l144"><span class="ln">144 </span></a><span class="s4">class </span><span class="s1">PotatogochiInstance {</span> -<a name="l145"><span class="ln">145 </span></a> <span class="s2">/**</span> -<a name="l146"><span class="ln">146 </span></a> <span class="s2">* L'élément DOM de la pomme de terre /)</span> -<a name="l147"><span class="ln">147 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l148"><span class="ln">148 </span></a> <span class="s2">*/</span> -<a name="l149"><span class="ln">149 </span></a> <span class="s4">private </span><span class="s1">readonly potatoElement: HTMLImageElement</span><span class="s4">;</span> -<a name="l150"><span class="ln">150 </span></a> -<a name="l151"><span class="ln">151 </span></a> <span class="s2">/**</span> -<a name="l152"><span class="ln">152 </span></a> <span class="s2">* L'élément DOM du visage de la pomme de terre /)</span> -<a name="l153"><span class="ln">153 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l154"><span class="ln">154 </span></a> <span class="s2">*/</span> -<a name="l155"><span class="ln">155 </span></a> <span class="s4">private </span><span class="s1">readonly potatoFaceElement: HTMLImageElement</span><span class="s4">;</span> -<a name="l156"><span class="ln">156 </span></a> -<a name="l157"><span class="ln">157 </span></a> <span class="s2">/**</span> -<a name="l158"><span class="ln">158 </span></a> <span class="s2">* L'élément DOM de la boite de collision du jeu /)</span> -<a name="l159"><span class="ln">159 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l160"><span class="ln">160 </span></a> <span class="s2">*/</span> -<a name="l161"><span class="ln">161 </span></a> <span class="s4">private </span><span class="s1">readonly potatoColliderElement: HTMLDivElement</span><span class="s4">;</span> -<a name="l162"><span class="ln">162 </span></a> -<a name="l163"><span class="ln">163 </span></a> <span class="s2">/**</span> -<a name="l164"><span class="ln">164 </span></a> <span class="s2">* La largeur de l'écran (moins la moitié de la pomme de terre) /)</span> -<a name="l165"><span class="ln">165 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l166"><span class="ln">166 </span></a> <span class="s2">*/</span> -<a name="l167"><span class="ln">167 </span></a> <span class="s4">private </span><span class="s1">readonly width: number = window.innerWidth - </span><span class="s5">128</span><span class="s4">;</span> -<a name="l168"><span class="ln">168 </span></a> -<a name="l169"><span class="ln">169 </span></a> <span class="s2">/**</span> -<a name="l170"><span class="ln">170 </span></a> <span class="s2">* La longueur de l'écran (moins la moitié de la pomme de terre) /)</span> -<a name="l171"><span class="ln">171 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l172"><span class="ln">172 </span></a> <span class="s2">*/</span> -<a name="l173"><span class="ln">173 </span></a> <span class="s4">private </span><span class="s1">readonly height: number = window.innerHeight - </span><span class="s5">128</span><span class="s4">;</span> -<a name="l174"><span class="ln">174 </span></a> -<a name="l175"><span class="ln">175 </span></a> <span class="s2">/**</span> -<a name="l176"><span class="ln">176 </span></a> <span class="s2">* Si la souris est présente ou non dans la fenêtre /)</span> -<a name="l177"><span class="ln">177 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l178"><span class="ln">178 </span></a> <span class="s2">*/</span> -<a name="l179"><span class="ln">179 </span></a> <span class="s4">private </span><span class="s1">mouse: boolean = </span><span class="s4">true;</span> -<a name="l180"><span class="ln">180 </span></a> -<a name="l181"><span class="ln">181 </span></a> <span class="s2">/**</span> -<a name="l182"><span class="ln">182 </span></a> <span class="s2">* Les coordonnées de la boîte de collision par rapport à</span> -<a name="l183"><span class="ln">183 </span></a> <span class="s2">* la fenêtre, utilisées pour calculer l'angle /)</span> -<a name="l184"><span class="ln">184 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l185"><span class="ln">185 </span></a> <span class="s2">*/</span> -<a name="l186"><span class="ln">186 </span></a> <span class="s4">private </span><span class="s1">angleCoordinates: ColliderCoordinates</span><span class="s4">;</span> -<a name="l187"><span class="ln">187 </span></a> -<a name="l188"><span class="ln">188 </span></a> <span class="s2">/**</span> -<a name="l189"><span class="ln">189 </span></a> <span class="s2">* Les coordonnées de la boîte de collision /)</span> -<a name="l190"><span class="ln">190 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l191"><span class="ln">191 </span></a> <span class="s2">*/</span> -<a name="l192"><span class="ln">192 </span></a> <span class="s4">private </span><span class="s1">colliderCoordinates: ColliderCoordinates</span><span class="s4">;</span> -<a name="l193"><span class="ln">193 </span></a> -<a name="l194"><span class="ln">194 </span></a> <span class="s2">/**</span> -<a name="l195"><span class="ln">195 </span></a> <span class="s2">* La direction du mouvement actuel /)</span> -<a name="l196"><span class="ln">196 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l197"><span class="ln">197 </span></a> <span class="s2">*/</span> -<a name="l198"><span class="ln">198 </span></a> <span class="s4">private </span><span class="s1">movementDirection: Direction = {</span> -<a name="l199"><span class="ln">199 </span></a> <span class="s1">horizontal: HDirection.None</span><span class="s4">,</span> -<a name="l200"><span class="ln">200 </span></a> <span class="s1">vertical: VDirection.None</span> -<a name="l201"><span class="ln">201 </span></a> <span class="s1">}</span> -<a name="l202"><span class="ln">202 </span></a> -<a name="l203"><span class="ln">203 </span></a> <span class="s2">/**</span> -<a name="l204"><span class="ln">204 </span></a> <span class="s2">* Construit une nouvelle instance de Potatogochi à partir</span> -<a name="l205"><span class="ln">205 </span></a> <span class="s2">* des éléments DOM passés en paramètre. /)</span> -<a name="l206"><span class="ln">206 </span></a> <span class="s2">*</span> -<a name="l207"><span class="ln">207 </span></a> <span class="s2">* </span><span class="s3">@constructor</span> -<a name="l208"><span class="ln">208 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">element - L'élément DOM de la pomme de terre</span> -<a name="l209"><span class="ln">209 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">faceElement - L'élément DOM du visage de la pomme de terre</span> -<a name="l210"><span class="ln">210 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">colliderElement - L'élément DOM de la boîte de collision du jeu</span> -<a name="l211"><span class="ln">211 </span></a> <span class="s2">*/</span> -<a name="l212"><span class="ln">212 </span></a> <span class="s1">constructor(element: HTMLImageElement</span><span class="s4">, </span><span class="s1">faceElement: HTMLImageElement</span><span class="s4">, </span><span class="s1">colliderElement: HTMLDivElement) {</span> -<a name="l213"><span class="ln">213 </span></a> <span class="s0">// On associe les 3 éléments passés en paramètres aux propriétés</span> -<a name="l214"><span class="ln">214 </span></a> <span class="s0">// correspondantes. /)</span> -<a name="l215"><span class="ln">215 </span></a> <span class="s4">this</span><span class="s1">.potatoElement = element</span><span class="s4">;</span> -<a name="l216"><span class="ln">216 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement = faceElement</span><span class="s4">;</span> -<a name="l217"><span class="ln">217 </span></a> <span class="s4">this</span><span class="s1">.potatoColliderElement = colliderElement</span><span class="s4">;</span> -<a name="l218"><span class="ln">218 </span></a> -<a name="l219"><span class="ln">219 </span></a> <span class="s0">// Définit colliderCoordinates sur les coordinates actuelles</span> -<a name="l220"><span class="ln">220 </span></a> <span class="s0">// de la boîte de collision (coordonnées de départ). /)</span> -<a name="l221"><span class="ln">221 </span></a> <span class="s4">this</span><span class="s1">.colliderCoordinates = {</span> -<a name="l222"><span class="ln">222 </span></a> <span class="s0">// offsetLeft donne le nombre de pixels entre la gauche</span> -<a name="l223"><span class="ln">223 </span></a> <span class="s0">// de la boîte de collision et la gauche de l'écran. /)</span> -<a name="l224"><span class="ln">224 </span></a> <span class="s1">x: </span><span class="s4">this</span><span class="s1">.potatoColliderElement.offsetLeft</span><span class="s4">,</span> -<a name="l225"><span class="ln">225 </span></a> -<a name="l226"><span class="ln">226 </span></a> <span class="s0">// offsetTop donne le nombre de pixels entre le haut</span> -<a name="l227"><span class="ln">227 </span></a> <span class="s0">// de la boîte de collision et le haut de l'écran. /)</span> -<a name="l228"><span class="ln">228 </span></a> <span class="s1">y: </span><span class="s4">this</span><span class="s1">.potatoColliderElement.offsetTop</span> -<a name="l229"><span class="ln">229 </span></a> <span class="s1">}</span> -<a name="l230"><span class="ln">230 </span></a> -<a name="l231"><span class="ln">231 </span></a> <span class="s0">// Quand la souris entre en contact avec le visage (mouseenter),</span> -<a name="l232"><span class="ln">232 </span></a> <span class="s0">// on exécute la méthode faceMouseEnter de l'instance de Potatogochi. /)</span> -<a name="l233"><span class="ln">233 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.addEventListener(</span><span class="s6">"mouseenter"</span><span class="s4">, </span><span class="s1">() => </span><span class="s4">this</span><span class="s1">.faceMouseEnter())</span><span class="s4">;</span> -<a name="l234"><span class="ln">234 </span></a> -<a name="l235"><span class="ln">235 </span></a> <span class="s0">// Quand la souris sort du visage (mouseleave), on exécute la</span> -<a name="l236"><span class="ln">236 </span></a> <span class="s0">// méthode faceMouseLeave de l'instance de Potatogochi. /)</span> -<a name="l237"><span class="ln">237 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.addEventListener(</span><span class="s6">"mouseleave"</span><span class="s4">, </span><span class="s1">() => </span><span class="s4">this</span><span class="s1">.faceMouseLeave())</span><span class="s4">;</span> -<a name="l238"><span class="ln">238 </span></a> -<a name="l239"><span class="ln">239 </span></a> <span class="s0">// Quand la souris clique sur le visage (click), on exécute la</span> -<a name="l240"><span class="ln">240 </span></a> <span class="s0">// méthode faceClick de l'instance de Potatogochi. /)</span> -<a name="l241"><span class="ln">241 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.addEventListener(</span><span class="s6">"click"</span><span class="s4">, </span><span class="s1">() => </span><span class="s4">this</span><span class="s1">.faceClick())</span><span class="s4">;</span> -<a name="l242"><span class="ln">242 </span></a> <span class="s1">}</span> -<a name="l243"><span class="ln">243 </span></a> -<a name="l244"><span class="ln">244 </span></a> <span class="s2">/**</span> -<a name="l245"><span class="ln">245 </span></a> <span class="s2">* Change le visage de la pomme de terre lorsque la souris</span> -<a name="l246"><span class="ln">246 </span></a> <span class="s2">* entre en contact avec le visage. /)</span> -<a name="l247"><span class="ln">247 </span></a> <span class="s2">*</span> -<a name="l248"><span class="ln">248 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l249"><span class="ln">249 </span></a> <span class="s2">*/</span> -<a name="l250"><span class="ln">250 </span></a> <span class="s4">private </span><span class="s1">faceMouseEnter(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l251"><span class="ln">251 </span></a> <span class="s0">// La pomme de terre ouvre la bouche et les yeux lorsque le</span> -<a name="l252"><span class="ln">252 </span></a> <span class="s0">// curseur entre en contact avec le visage. /)</span> -<a name="l253"><span class="ln">253 </span></a> <span class="s4">this</span><span class="s1">.setFace(Face.MouthOpenEyesOpen)</span><span class="s4">;</span> -<a name="l254"><span class="ln">254 </span></a> <span class="s1">}</span> -<a name="l255"><span class="ln">255 </span></a> -<a name="l256"><span class="ln">256 </span></a> <span class="s2">/**</span> -<a name="l257"><span class="ln">257 </span></a> <span class="s2">* Change le visage de la pomme de terre lorsque la souris</span> -<a name="l258"><span class="ln">258 </span></a> <span class="s2">* entre en contact avec le visage. /)</span> -<a name="l259"><span class="ln">259 </span></a> <span class="s2">*</span> -<a name="l260"><span class="ln">260 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l261"><span class="ln">261 </span></a> <span class="s2">*/</span> -<a name="l262"><span class="ln">262 </span></a> <span class="s4">private </span><span class="s1">faceMouseLeave(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l263"><span class="ln">263 </span></a> <span class="s0">// La pomme de terre ferme la bouche et ouvre les yeux lorsque</span> -<a name="l264"><span class="ln">264 </span></a> <span class="s0">// le curseur n'est plus en contact avec le visage. /)</span> -<a name="l265"><span class="ln">265 </span></a> <span class="s4">this</span><span class="s1">.setFace(Face.MouthHappyEyesOpen)</span><span class="s4">;</span> -<a name="l266"><span class="ln">266 </span></a> <span class="s1">}</span> -<a name="l267"><span class="ln">267 </span></a> -<a name="l268"><span class="ln">268 </span></a> <span class="s2">/**</span> -<a name="l269"><span class="ln">269 </span></a> <span class="s2">* Change le visage de la pomme de terre lorsque la souris</span> -<a name="l270"><span class="ln">270 </span></a> <span class="s2">* clique sur le visage. /)</span> -<a name="l271"><span class="ln">271 </span></a> <span class="s2">*</span> -<a name="l272"><span class="ln">272 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l273"><span class="ln">273 </span></a> <span class="s2">*/</span> -<a name="l274"><span class="ln">274 </span></a> <span class="s4">private </span><span class="s1">faceClick(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l275"><span class="ln">275 </span></a> <span class="s0">// La pomme de terre ouvre la bouche et ferme les yeux</span> -<a name="l276"><span class="ln">276 </span></a> <span class="s0">// lorsque le curseur clique sur le visage. /)</span> -<a name="l277"><span class="ln">277 </span></a> <span class="s4">this</span><span class="s1">.setFace(Face.MouthOpenEyesClosed)</span><span class="s4">;</span> -<a name="l278"><span class="ln">278 </span></a> <span class="s1">}</span> -<a name="l279"><span class="ln">279 </span></a> -<a name="l280"><span class="ln">280 </span></a> <span class="s2">/**</span> -<a name="l281"><span class="ln">281 </span></a> <span class="s2">* Change l'orientation de la pomme de terre pour</span> -<a name="l282"><span class="ln">282 </span></a> <span class="s2">* la faire pointer vers le curseur de la souris. /)</span> -<a name="l283"><span class="ln">283 </span></a> <span class="s2">*</span> -<a name="l284"><span class="ln">284 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l285"><span class="ln">285 </span></a> <span class="s2">*/</span> -<a name="l286"><span class="ln">286 </span></a> <span class="s4">private </span><span class="s1">setAngle(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l287"><span class="ln">287 </span></a> <span class="s0">// Crée une variable angle de type nombre /)</span> -<a name="l288"><span class="ln">288 </span></a> <span class="s4">let </span><span class="s1">angle: number</span><span class="s4">;</span> -<a name="l289"><span class="ln">289 </span></a> -<a name="l290"><span class="ln">290 </span></a> <span class="s0">// Si la souris est dans l'écran et qu'on a</span> -<a name="l291"><span class="ln">291 </span></a> <span class="s0">// préalablement calculé les coordonnées pour</span> -<a name="l292"><span class="ln">292 </span></a> <span class="s0">// calculer l'angle. /)</span> -<a name="l293"><span class="ln">293 </span></a> <span class="s4">if </span><span class="s1">(</span><span class="s4">this</span><span class="s1">.mouse && </span><span class="s4">this</span><span class="s1">.angleCoordinates) {</span> -<a name="l294"><span class="ln">294 </span></a> <span class="s0">// On récupère des informations sur la taille et la</span> -<a name="l295"><span class="ln">295 </span></a> <span class="s0">// position de la boîte de collision par rapport à la</span> -<a name="l296"><span class="ln">296 </span></a> <span class="s0">// page. /)</span> -<a name="l297"><span class="ln">297 </span></a> <span class="s4">let </span><span class="s1">boxBoundingRect: DOMRect = </span><span class="s4">this</span><span class="s1">.potatoColliderElement.getBoundingClientRect()</span><span class="s4">;</span> -<a name="l298"><span class="ln">298 </span></a> -<a name="l299"><span class="ln">299 </span></a> <span class="s0">// On calcule les coordonnées du centre de la boîte de</span> -<a name="l300"><span class="ln">300 </span></a> <span class="s0">// collision. /)</span> -<a name="l301"><span class="ln">301 </span></a> <span class="s4">let </span><span class="s1">boxCenter: Coordinates = {</span> -<a name="l302"><span class="ln">302 </span></a> <span class="s1">x: boxBoundingRect.left + boxBoundingRect.width / </span><span class="s5">2</span><span class="s4">,</span> -<a name="l303"><span class="ln">303 </span></a> <span class="s1">y: boxBoundingRect.top + boxBoundingRect.height / </span><span class="s5">2</span> -<a name="l304"><span class="ln">304 </span></a> <span class="s1">}</span> -<a name="l305"><span class="ln">305 </span></a> -<a name="l306"><span class="ln">306 </span></a> <span class="s0">// On calcule l'angle à partir des coordonnées calculées</span> -<a name="l307"><span class="ln">307 </span></a> <span class="s0">// précédemment. /)</span> -<a name="l308"><span class="ln">308 </span></a> <span class="s1">angle = Math.atan2(</span><span class="s4">this</span><span class="s1">.angleCoordinates.x - boxCenter.x</span><span class="s4">, </span><span class="s1">- (</span><span class="s4">this</span><span class="s1">.angleCoordinates.y - boxCenter.y)) * (</span><span class="s5">180 </span><span class="s1">/ Math.PI)</span><span class="s4">;</span> -<a name="l309"><span class="ln">309 </span></a> <span class="s1">} </span><span class="s4">else </span><span class="s1">{</span> -<a name="l310"><span class="ln">310 </span></a> <span class="s1">angle = </span><span class="s5">0</span><span class="s4">;</span> -<a name="l311"><span class="ln">311 </span></a> <span class="s1">}</span> -<a name="l312"><span class="ln">312 </span></a> -<a name="l313"><span class="ln">313 </span></a> <span class="s0">// On change la rotation du jeu pour correspondre à l'angle</span> -<a name="l314"><span class="ln">314 </span></a> <span class="s0">// que l'on vient de calculer. /)</span> -<a name="l315"><span class="ln">315 </span></a> <span class="s4">this</span><span class="s1">.potatoElement.style.transform = </span><span class="s6">"rotate(" </span><span class="s1">+ angle + </span><span class="s6">"deg)"</span><span class="s4">;</span> -<a name="l316"><span class="ln">316 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.style.transform = </span><span class="s6">"rotate(" </span><span class="s1">+ angle + </span><span class="s6">"deg)"</span><span class="s4">;</span> -<a name="l317"><span class="ln">317 </span></a> <span class="s4">this</span><span class="s1">.potatoColliderElement.style.transform = </span><span class="s6">"rotate(" </span><span class="s1">+ angle + </span><span class="s6">"deg)"</span><span class="s4">;</span> -<a name="l318"><span class="ln">318 </span></a> <span class="s1">}</span> -<a name="l319"><span class="ln">319 </span></a> -<a name="l320"><span class="ln">320 </span></a> <span class="s2">/**</span> -<a name="l321"><span class="ln">321 </span></a> <span class="s2">* Exécute du code lorsque le curseur de la souris est</span> -<a name="l322"><span class="ln">322 </span></a> <span class="s2">* déplacé. /)</span> -<a name="l323"><span class="ln">323 </span></a> <span class="s2">*</span> -<a name="l324"><span class="ln">324 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">event - L'événement du movement de la souris</span> -<a name="l325"><span class="ln">325 </span></a> <span class="s2">*/</span> -<a name="l326"><span class="ln">326 </span></a> <span class="s4">public </span><span class="s1">mouseMove(event: MouseEvent): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l327"><span class="ln">327 </span></a> <span class="s0">// Si le curseur ne se situe pas sur la boîte de collision /)</span> -<a name="l328"><span class="ln">328 </span></a> <span class="s4">if </span><span class="s1">(event.target !== </span><span class="s4">this</span><span class="s1">.potatoColliderElement) {</span> -<a name="l329"><span class="ln">329 </span></a> <span class="s0">// On redéfinit les coordonnées nous permettant par la</span> -<a name="l330"><span class="ln">330 </span></a> <span class="s0">// suite de calculer l'angle ... /)</span> -<a name="l331"><span class="ln">331 </span></a> <span class="s4">this</span><span class="s1">.angleCoordinates = {</span> -<a name="l332"><span class="ln">332 </span></a> <span class="s1">x: event.pageX</span><span class="s4">,</span> -<a name="l333"><span class="ln">333 </span></a> <span class="s1">y: event.pageY</span> -<a name="l334"><span class="ln">334 </span></a> <span class="s1">}</span> -<a name="l335"><span class="ln">335 </span></a> -<a name="l336"><span class="ln">336 </span></a> <span class="s0">// ... et on recalcule l'angle. /)</span> -<a name="l337"><span class="ln">337 </span></a> <span class="s4">this</span><span class="s1">.setAngle()</span><span class="s4">;</span> -<a name="l338"><span class="ln">338 </span></a> -<a name="l339"><span class="ln">339 </span></a> <span class="s0">// On ne change pas la direction de la pomme de terre</span> -<a name="l340"><span class="ln">340 </span></a> <span class="s0">// lorsque la souris n'est pas sur la boîte de collision. /)</span> -<a name="l341"><span class="ln">341 </span></a> <span class="s4">return;</span> -<a name="l342"><span class="ln">342 </span></a> <span class="s1">}</span> -<a name="l343"><span class="ln">343 </span></a> -<a name="l344"><span class="ln">344 </span></a> <span class="s0">// On calcule les coordonnées du curseur de la souris par</span> -<a name="l345"><span class="ln">345 </span></a> <span class="s0">// rapport à la boîte de collision. /)</span> -<a name="l346"><span class="ln">346 </span></a> <span class="s4">let </span><span class="s1">mouseCoordinates: Coordinates = {</span> -<a name="l347"><span class="ln">347 </span></a> <span class="s1">x: event.clientX - </span><span class="s4">this</span><span class="s1">.colliderCoordinates.x</span><span class="s4">,</span> -<a name="l348"><span class="ln">348 </span></a> <span class="s1">y: event.clientY - </span><span class="s4">this</span><span class="s1">.colliderCoordinates.y</span> -<a name="l349"><span class="ln">349 </span></a> <span class="s1">}</span> -<a name="l350"><span class="ln">350 </span></a> -<a name="l351"><span class="ln">351 </span></a> <span class="s0">// Par défaut, aucun mouvement ne sera effectué. /)</span> -<a name="l352"><span class="ln">352 </span></a> <span class="s4">this</span><span class="s1">.movementDirection = {</span> -<a name="l353"><span class="ln">353 </span></a> <span class="s1">horizontal: HDirection.None</span><span class="s4">,</span> -<a name="l354"><span class="ln">354 </span></a> <span class="s1">vertical: VDirection.None</span> -<a name="l355"><span class="ln">355 </span></a> <span class="s1">}</span> -<a name="l356"><span class="ln">356 </span></a> -<a name="l357"><span class="ln">357 </span></a> <span class="s0">// Si les coordonnées en abscisse sont >250 (droite de la</span> -<a name="l358"><span class="ln">358 </span></a> <span class="s0">// boîte de collision), on va à droite. /)</span> -<a name="l359"><span class="ln">359 </span></a> <span class="s4">if </span><span class="s1">(mouseCoordinates.x > </span><span class="s5">250</span><span class="s1">) </span><span class="s4">this</span><span class="s1">.movementDirection.horizontal = HDirection.Right</span><span class="s4">;</span> -<a name="l360"><span class="ln">360 </span></a> -<a name="l361"><span class="ln">361 </span></a> <span class="s0">// Si les coordonnées en abscisse sont <150 (gauche de la</span> -<a name="l362"><span class="ln">362 </span></a> <span class="s0">// boîte de collision), on va à gauche. /)</span> -<a name="l363"><span class="ln">363 </span></a> <span class="s4">if </span><span class="s1">(mouseCoordinates.x < </span><span class="s5">150</span><span class="s1">) </span><span class="s4">this</span><span class="s1">.movementDirection.horizontal = HDirection.Left</span><span class="s4">;</span> -<a name="l364"><span class="ln">364 </span></a> -<a name="l365"><span class="ln">365 </span></a> <span class="s0">// Si les coordonnées en ordonnée sont >250 (bas de la</span> -<a name="l366"><span class="ln">366 </span></a> <span class="s0">// boîte de collision), on va en bas. /)</span> -<a name="l367"><span class="ln">367 </span></a> <span class="s4">if </span><span class="s1">(mouseCoordinates.y > </span><span class="s5">250</span><span class="s1">) </span><span class="s4">this</span><span class="s1">.movementDirection.vertical = VDirection.Bottom</span><span class="s4">;</span> -<a name="l368"><span class="ln">368 </span></a> -<a name="l369"><span class="ln">369 </span></a> <span class="s0">// Si les coordonnées en ordonnée sont <150 (haut de la</span> -<a name="l370"><span class="ln">370 </span></a> <span class="s0">// boîte de collision), on va en haut. /)</span> -<a name="l371"><span class="ln">371 </span></a> <span class="s4">if </span><span class="s1">(mouseCoordinates.y < </span><span class="s5">150</span><span class="s1">) </span><span class="s4">this</span><span class="s1">.movementDirection.vertical = VDirection.Top</span><span class="s4">;</span> -<a name="l372"><span class="ln">372 </span></a> -<a name="l373"><span class="ln">373 </span></a> <span class="s0">// On redéfinit les coordonnées nous permettant par la</span> -<a name="l374"><span class="ln">374 </span></a> <span class="s0">// suite de calculer l'angle ... /)</span> -<a name="l375"><span class="ln">375 </span></a> <span class="s4">this</span><span class="s1">.angleCoordinates = {</span> -<a name="l376"><span class="ln">376 </span></a> <span class="s1">x: event.pageX</span><span class="s4">,</span> -<a name="l377"><span class="ln">377 </span></a> <span class="s1">y: event.pageY</span> -<a name="l378"><span class="ln">378 </span></a> <span class="s1">}</span> -<a name="l379"><span class="ln">379 </span></a> -<a name="l380"><span class="ln">380 </span></a> <span class="s0">// ... et on recalcule l'angle. /)</span> -<a name="l381"><span class="ln">381 </span></a> <span class="s4">this</span><span class="s1">.setAngle()</span><span class="s4">;</span> -<a name="l382"><span class="ln">382 </span></a> <span class="s1">}</span> -<a name="l383"><span class="ln">383 </span></a> -<a name="l384"><span class="ln">384 </span></a> <span class="s2">/**</span> -<a name="l385"><span class="ln">385 </span></a> <span class="s2">* Change le visage de la pomme de terre lorsque</span> -<a name="l386"><span class="ln">386 </span></a> <span class="s2">* le curseur de la souris entre la fenêtre.</span> -<a name="l387"><span class="ln">387 </span></a> <span class="s2">* Aussi, change la propriété `mouse` pour indiquer</span> -<a name="l388"><span class="ln">388 </span></a> <span class="s2">* que la souris est dans la fenêtre. /)</span> -<a name="l389"><span class="ln">389 </span></a> <span class="s2">*/</span> -<a name="l390"><span class="ln">390 </span></a> <span class="s4">public </span><span class="s1">mouseEnter(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l391"><span class="ln">391 </span></a> <span class="s0">// La pomme de terre est contente et ouvre les yeux lorsque</span> -<a name="l392"><span class="ln">392 </span></a> <span class="s0">// le curseur entre dans la fenêtre. /)</span> -<a name="l393"><span class="ln">393 </span></a> <span class="s4">this</span><span class="s1">.setFace(Face.MouthHappyEyesOpen)</span><span class="s4">;</span> -<a name="l394"><span class="ln">394 </span></a> -<a name="l395"><span class="ln">395 </span></a> <span class="s0">// On indique à l'instance de Potatogochi que la souris est</span> -<a name="l396"><span class="ln">396 </span></a> <span class="s0">// désormais dans la fenêtre. /)</span> -<a name="l397"><span class="ln">397 </span></a> <span class="s4">this</span><span class="s1">.mouse = </span><span class="s4">true;</span> -<a name="l398"><span class="ln">398 </span></a> <span class="s1">}</span> -<a name="l399"><span class="ln">399 </span></a> -<a name="l400"><span class="ln">400 </span></a> <span class="s2">/**</span> -<a name="l401"><span class="ln">401 </span></a> <span class="s2">* Change le visage de la pomme de terre lorsque</span> -<a name="l402"><span class="ln">402 </span></a> <span class="s2">* le curseur de la souris quitte la fenêtre.</span> -<a name="l403"><span class="ln">403 </span></a> <span class="s2">* Aussi, change la propriété `mouse` pour indiquer</span> -<a name="l404"><span class="ln">404 </span></a> <span class="s2">* que la souris n'est plus dans la fenêtre. /)</span> -<a name="l405"><span class="ln">405 </span></a> <span class="s2">*/</span> -<a name="l406"><span class="ln">406 </span></a> <span class="s4">public </span><span class="s1">mouseLeave(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l407"><span class="ln">407 </span></a> <span class="s0">// La pomme de terre est triste et ouvre les yeux lorsque</span> -<a name="l408"><span class="ln">408 </span></a> <span class="s0">// le curseur n'est plus dans la fenêtre. /)</span> -<a name="l409"><span class="ln">409 </span></a> <span class="s4">this</span><span class="s1">.setFace(Face.MouthSadEyesOpen)</span><span class="s4">;</span> -<a name="l410"><span class="ln">410 </span></a> -<a name="l411"><span class="ln">411 </span></a> <span class="s0">// On indique à l'instance de Potatogochi que la souris n'est</span> -<a name="l412"><span class="ln">412 </span></a> <span class="s0">// désormais plus dans la fenêtre. /)</span> -<a name="l413"><span class="ln">413 </span></a> <span class="s4">this</span><span class="s1">.mouse = </span><span class="s4">false;</span> -<a name="l414"><span class="ln">414 </span></a> <span class="s1">}</span> -<a name="l415"><span class="ln">415 </span></a> -<a name="l416"><span class="ln">416 </span></a> <span class="s2">/**</span> -<a name="l417"><span class="ln">417 </span></a> <span class="s2">* Associe un item de Face à un fichier image sur</span> -<a name="l418"><span class="ln">418 </span></a> <span class="s2">* le serveur, ou, si impossible, à l'image par</span> -<a name="l419"><span class="ln">419 </span></a> <span class="s2">* défaut. /)</span> -<a name="l420"><span class="ln">420 </span></a> <span class="s2">*</span> -<a name="l421"><span class="ln">421 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">face - Un item de Face</span> -<a name="l422"><span class="ln">422 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l423"><span class="ln">423 </span></a> <span class="s2">*/</span> -<a name="l424"><span class="ln">424 </span></a> <span class="s4">private </span><span class="s1">getFaceFile(face: Face): string {</span> -<a name="l425"><span class="ln">425 </span></a> <span class="s0">// Selon la valeur de 'face'... /)</span> -<a name="l426"><span class="ln">426 </span></a> <span class="s4">switch </span><span class="s1">(face) {</span> -<a name="l427"><span class="ln">427 </span></a> <span class="s4">case </span><span class="s1">Face.MouthHappyEyesClosed: </span><span class="s0">// = 0</span> -<a name="l428"><span class="ln">428 </span></a> <span class="s4">return </span><span class="s6">"/assets/face-happy-closed.png"</span><span class="s4">;</span> -<a name="l429"><span class="ln">429 </span></a> <span class="s4">case </span><span class="s1">Face.MouthHappyEyesOpen: </span><span class="s0">// = 1</span> -<a name="l430"><span class="ln">430 </span></a> <span class="s4">return </span><span class="s6">"/assets/face-happy-open.png"</span><span class="s4">;</span> -<a name="l431"><span class="ln">431 </span></a> <span class="s4">case </span><span class="s1">Face.MouthOpenEyesClosed: </span><span class="s0">// = 2</span> -<a name="l432"><span class="ln">432 </span></a> <span class="s4">return </span><span class="s6">"/assets/face-open-closed.png"</span><span class="s4">;</span> -<a name="l433"><span class="ln">433 </span></a> <span class="s4">case </span><span class="s1">Face.MouthOpenEyesOpen: </span><span class="s0">// = 3</span> -<a name="l434"><span class="ln">434 </span></a> <span class="s4">return </span><span class="s6">"/assets/face-open-open.png"</span><span class="s4">;</span> -<a name="l435"><span class="ln">435 </span></a> <span class="s4">case </span><span class="s1">Face.MouthSadEyesClosed: </span><span class="s0">// = 4</span> -<a name="l436"><span class="ln">436 </span></a> <span class="s4">return </span><span class="s6">"/assets/face-sad-closed.png"</span><span class="s4">;</span> -<a name="l437"><span class="ln">437 </span></a> <span class="s4">case </span><span class="s1">Face.MouthSadEyesOpen: </span><span class="s0">// = 5</span> -<a name="l438"><span class="ln">438 </span></a> <span class="s4">return </span><span class="s6">"/assets/face-sad-open.png"</span><span class="s4">;</span> -<a name="l439"><span class="ln">439 </span></a> <span class="s4">default</span><span class="s1">: </span><span class="s0">// < 0 ou > 5</span> -<a name="l440"><span class="ln">440 </span></a> <span class="s4">return </span><span class="s6">"/assets/potato.png"</span><span class="s4">;</span> -<a name="l441"><span class="ln">441 </span></a> <span class="s1">}</span> -<a name="l442"><span class="ln">442 </span></a> <span class="s1">}</span> -<a name="l443"><span class="ln">443 </span></a> -<a name="l444"><span class="ln">444 </span></a> <span class="s2">/**</span> -<a name="l445"><span class="ln">445 </span></a> <span class="s2">* Change le visage de la pomme de terre à partir</span> -<a name="l446"><span class="ln">446 </span></a> <span class="s2">* d'un item de Face. /)</span> -<a name="l447"><span class="ln">447 </span></a> <span class="s2">*</span> -<a name="l448"><span class="ln">448 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">face - Face</span> -<a name="l449"><span class="ln">449 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l450"><span class="ln">450 </span></a> <span class="s2">*/</span> -<a name="l451"><span class="ln">451 </span></a> <span class="s4">private </span><span class="s1">setFace(face: Face): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l452"><span class="ln">452 </span></a> <span class="s0">// On change l'URL du fichier que va afficher</span> -<a name="l453"><span class="ln">453 </span></a> <span class="s0">// potatoFaceElement pour le fichier récupéré par</span> -<a name="l454"><span class="ln">454 </span></a> <span class="s0">// la méthode getFaceFile. /)</span> -<a name="l455"><span class="ln">455 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.src = </span><span class="s4">this</span><span class="s1">.getFaceFile(face)</span><span class="s4">;</span> -<a name="l456"><span class="ln">456 </span></a> <span class="s1">}</span> -<a name="l457"><span class="ln">457 </span></a> -<a name="l458"><span class="ln">458 </span></a> <span class="s2">/**</span> -<a name="l459"><span class="ln">459 </span></a> <span class="s2">* Code exécuté à intervalles réguliers pour faire</span> -<a name="l460"><span class="ln">460 </span></a> <span class="s2">* se déplacer la pomme de terre même sans interaction</span> -<a name="l461"><span class="ln">461 </span></a> <span class="s2">* de la part de l'utilisateur. /)</span> -<a name="l462"><span class="ln">462 </span></a> <span class="s2">*/</span> -<a name="l463"><span class="ln">463 </span></a> <span class="s4">public </span><span class="s1">movementEvent(): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l464"><span class="ln">464 </span></a> <span class="s0">// Si la souris ne se trouve pas dans l'écran, la</span> -<a name="l465"><span class="ln">465 </span></a> <span class="s0">// pomme de terre ne doit pas se déplacer. /)</span> -<a name="l466"><span class="ln">466 </span></a> <span class="s4">if </span><span class="s1">(!</span><span class="s4">this</span><span class="s1">.mouse) </span><span class="s4">return;</span> -<a name="l467"><span class="ln">467 </span></a> -<a name="l468"><span class="ln">468 </span></a> <span class="s0">// On déplace la pomme de terre en conservant la</span> -<a name="l469"><span class="ln">469 </span></a> <span class="s0">// même direction et en se déplaçant de 10 pixels. /)</span> -<a name="l470"><span class="ln">470 </span></a> <span class="s4">this</span><span class="s1">.movePotato({</span> -<a name="l471"><span class="ln">471 </span></a> <span class="s1">direction: </span><span class="s4">this</span><span class="s1">.movementDirection</span><span class="s4">,</span> -<a name="l472"><span class="ln">472 </span></a> <span class="s1">amount: </span><span class="s5">10</span> -<a name="l473"><span class="ln">473 </span></a> <span class="s1">})</span><span class="s4">;</span> -<a name="l474"><span class="ln">474 </span></a> <span class="s1">}</span> -<a name="l475"><span class="ln">475 </span></a> -<a name="l476"><span class="ln">476 </span></a> <span class="s2">/**</span> -<a name="l477"><span class="ln">477 </span></a> <span class="s2">* Déplace la pomme de terre d'un Movement particulier, une seule et</span> -<a name="l478"><span class="ln">478 </span></a> <span class="s2">* unique fois. /)</span> -<a name="l479"><span class="ln">479 </span></a> <span class="s2">*</span> -<a name="l480"><span class="ln">480 </span></a> <span class="s2">* </span><span class="s3">@param </span><span class="s2">movement - Le mouvement que doit effectuer la pomme de terre</span> -<a name="l481"><span class="ln">481 </span></a> <span class="s2">* </span><span class="s3">@private</span> -<a name="l482"><span class="ln">482 </span></a> <span class="s2">*/</span> -<a name="l483"><span class="ln">483 </span></a> <span class="s4">private </span><span class="s1">movePotato(movement: Movement): </span><span class="s4">void </span><span class="s1">{</span> -<a name="l484"><span class="ln">484 </span></a> <span class="s0">// Par défaut, les nouvelles coordonnées sont</span> -<a name="l485"><span class="ln">485 </span></a> <span class="s0">// les mêmes que les coordonnées actuelles. /)</span> -<a name="l486"><span class="ln">486 </span></a> <span class="s4">let </span><span class="s1">newCoordinates: Coordinates = {</span> -<a name="l487"><span class="ln">487 </span></a> <span class="s0">// newCoordinates x est donc la position en</span> -<a name="l488"><span class="ln">488 </span></a> <span class="s0">// abscisse actuelle de la pomme de terre. /)</span> -<a name="l489"><span class="ln">489 </span></a> <span class="s1">x: </span><span class="s4">this</span><span class="s1">.potatoElement.offsetLeft</span><span class="s4">,</span> -<a name="l490"><span class="ln">490 </span></a> -<a name="l491"><span class="ln">491 </span></a> <span class="s0">// newCoordinates y est donc la position en</span> -<a name="l492"><span class="ln">492 </span></a> <span class="s0">// ordonnée actuelle de la pomme de terre. /)</span> -<a name="l493"><span class="ln">493 </span></a> <span class="s1">y: </span><span class="s4">this</span><span class="s1">.potatoElement.offsetTop</span> -<a name="l494"><span class="ln">494 </span></a> -<a name="l495"><span class="ln">495 </span></a> <span class="s0">// Cela permet aussi de recentrer le visage</span> -<a name="l496"><span class="ln">496 </span></a> <span class="s0">// de la pomme de terre par rapport à la</span> -<a name="l497"><span class="ln">497 </span></a> <span class="s0">// pomme de terre elle-même. /)</span> -<a name="l498"><span class="ln">498 </span></a> <span class="s1">}</span> -<a name="l499"><span class="ln">499 </span></a> -<a name="l500"><span class="ln">500 </span></a> <span class="s0">// Pareil que pour newCoordinates, excepté qu'on</span> -<a name="l501"><span class="ln">501 </span></a> <span class="s0">// prend à la place les coordonnées du milieu de</span> -<a name="l502"><span class="ln">502 </span></a> <span class="s0">// la pomme de terre /)</span> -<a name="l503"><span class="ln">503 </span></a> <span class="s4">let </span><span class="s1">newColliderCoordinates: Coordinates = {</span> -<a name="l504"><span class="ln">504 </span></a> <span class="s1">x: </span><span class="s4">this</span><span class="s1">.potatoElement.offsetLeft - </span><span class="s5">128</span><span class="s4">,</span> -<a name="l505"><span class="ln">505 </span></a> <span class="s1">y: </span><span class="s4">this</span><span class="s1">.potatoElement.offsetTop - </span><span class="s5">128</span> -<a name="l506"><span class="ln">506 </span></a> -<a name="l507"><span class="ln">507 </span></a> <span class="s0">// Cela permet aussi de recentrer la boîte</span> -<a name="l508"><span class="ln">508 </span></a> <span class="s0">// de collision par rapport à la pomme de</span> -<a name="l509"><span class="ln">509 </span></a> <span class="s0">// terre. /)</span> -<a name="l510"><span class="ln">510 </span></a> <span class="s1">}</span> -<a name="l511"><span class="ln">511 </span></a> -<a name="l512"><span class="ln">512 </span></a> <span class="s0">// Si le mouvement vertical est vers le haut /)</span> -<a name="l513"><span class="ln">513 </span></a> <span class="s4">if </span><span class="s1">(movement.direction.vertical === VDirection.Top) {</span> -<a name="l514"><span class="ln">514 </span></a> <span class="s0">// On ajoute 'amount' aux coordonnées, ce qui va</span> -<a name="l515"><span class="ln">515 </span></a> <span class="s0">// déplacer la pomme de terre de 'amount' pixels</span> -<a name="l516"><span class="ln">516 </span></a> <span class="s0">// vers le haut. /)</span> -<a name="l517"><span class="ln">517 </span></a> <span class="s1">newCoordinates.y = </span><span class="s4">this</span><span class="s1">.potatoElement.offsetTop + movement.amount</span><span class="s4">;</span> -<a name="l518"><span class="ln">518 </span></a> -<a name="l519"><span class="ln">519 </span></a> <span class="s0">// Si le mouvement vertical est vers le bas /)</span> -<a name="l520"><span class="ln">520 </span></a> <span class="s1">} </span><span class="s4">else if </span><span class="s1">(movement.direction.vertical === VDirection.Bottom) {</span> -<a name="l521"><span class="ln">521 </span></a> <span class="s0">// On retire 'amount' aux coordonnées, ce qui va</span> -<a name="l522"><span class="ln">522 </span></a> <span class="s0">// déplacer la pomme de terre de 'amount' pixels</span> -<a name="l523"><span class="ln">523 </span></a> <span class="s0">// vers le bas. /)</span> -<a name="l524"><span class="ln">524 </span></a> <span class="s1">newCoordinates.y = </span><span class="s4">this</span><span class="s1">.potatoElement.offsetTop - movement.amount</span><span class="s4">;</span> -<a name="l525"><span class="ln">525 </span></a> <span class="s1">}</span> -<a name="l526"><span class="ln">526 </span></a> <span class="s0">// S'il n'y a pas de mouvement vertical, on ne fait rien /)</span> -<a name="l527"><span class="ln">527 </span></a> -<a name="l528"><span class="ln">528 </span></a> <span class="s0">// Si le mouvement horizontal est vers la droite /)</span> -<a name="l529"><span class="ln">529 </span></a> <span class="s4">if </span><span class="s1">(movement.direction.horizontal === HDirection.Left) {</span> -<a name="l530"><span class="ln">530 </span></a> <span class="s0">// On retire 'amount' aux coordonnées, ce qui va</span> -<a name="l531"><span class="ln">531 </span></a> <span class="s0">// déplacer la pomme de terre de 'amount' pixels</span> -<a name="l532"><span class="ln">532 </span></a> <span class="s0">// vers la gauche. /)</span> -<a name="l533"><span class="ln">533 </span></a> <span class="s1">newCoordinates.x = </span><span class="s4">this</span><span class="s1">.potatoElement.offsetLeft + movement.amount</span><span class="s4">;</span> -<a name="l534"><span class="ln">534 </span></a> -<a name="l535"><span class="ln">535 </span></a> <span class="s0">// Si le mouvement horizontal est vers la gauche /)</span> -<a name="l536"><span class="ln">536 </span></a> <span class="s1">} </span><span class="s4">else if </span><span class="s1">(movement.direction.horizontal === HDirection.Right) {</span> -<a name="l537"><span class="ln">537 </span></a> <span class="s0">// On retire 'amount' aux coordonnées, ce qui va</span> -<a name="l538"><span class="ln">538 </span></a> <span class="s0">// déplacer la pomme de terre de 'amount' pixels</span> -<a name="l539"><span class="ln">539 </span></a> <span class="s0">// vers la droite. /)</span> -<a name="l540"><span class="ln">540 </span></a> <span class="s1">newCoordinates.x = </span><span class="s4">this</span><span class="s1">.potatoElement.offsetLeft - movement.amount</span><span class="s4">;</span> -<a name="l541"><span class="ln">541 </span></a> <span class="s1">}</span> -<a name="l542"><span class="ln">542 </span></a> <span class="s0">// S'il n'y a pas de mouvement horizontal, on ne fait rien /)</span> -<a name="l543"><span class="ln">543 </span></a> -<a name="l544"><span class="ln">544 </span></a> <span class="s0">// Encore une fois, on prend le milieu de la pomme</span> -<a name="l545"><span class="ln">545 </span></a> <span class="s0">// de terre pour la boîte de collision. /)</span> -<a name="l546"><span class="ln">546 </span></a> <span class="s1">newColliderCoordinates.x = newCoordinates.x - </span><span class="s5">128</span><span class="s4">;</span> -<a name="l547"><span class="ln">547 </span></a> <span class="s1">newColliderCoordinates.y = newCoordinates.y - </span><span class="s5">128</span><span class="s4">;</span> -<a name="l548"><span class="ln">548 </span></a> -<a name="l549"><span class="ln">549 </span></a> <span class="s0">// Si les coordonnées sont plus grandes ou plus petites que</span> -<a name="l550"><span class="ln">550 </span></a> <span class="s0">// la taille de la fenêtre, on les redéfinit pour correspondre</span> -<a name="l551"><span class="ln">551 </span></a> <span class="s0">// à la taille de la fenêtre. /)</span> -<a name="l552"><span class="ln">552 </span></a> <span class="s4">if </span><span class="s1">(newCoordinates.x <= </span><span class="s5">0</span><span class="s1">) newCoordinates.x = </span><span class="s5">1</span><span class="s4">;</span> -<a name="l553"><span class="ln">553 </span></a> <span class="s4">if </span><span class="s1">(newCoordinates.x >= </span><span class="s4">this</span><span class="s1">.width) newCoordinates.x = </span><span class="s4">this</span><span class="s1">.width - </span><span class="s5">1</span><span class="s4">;</span> -<a name="l554"><span class="ln">554 </span></a> <span class="s4">if </span><span class="s1">(newCoordinates.y <= </span><span class="s5">0</span><span class="s1">) newCoordinates.y = </span><span class="s5">1</span><span class="s4">;</span> -<a name="l555"><span class="ln">555 </span></a> <span class="s4">if </span><span class="s1">(newCoordinates.y >= </span><span class="s4">this</span><span class="s1">.height) newCoordinates.y = </span><span class="s4">this</span><span class="s1">.height - </span><span class="s5">1</span><span class="s4">;</span> -<a name="l556"><span class="ln">556 </span></a> -<a name="l557"><span class="ln">557 </span></a> <span class="s0">// Pareil pour les coordonnées de la boîte de collision.</span> -<a name="l558"><span class="ln">558 </span></a> <span class="s0">// Cette fois-ci on ne prend pas les coordonnées du milieu</span> -<a name="l559"><span class="ln">559 </span></a> <span class="s0">// pour que la boîte de collision reste centrée par rapport</span> -<a name="l560"><span class="ln">560 </span></a> <span class="s0">// à la pomme de terre. /)</span> -<a name="l561"><span class="ln">561 </span></a> <span class="s4">if </span><span class="s1">(newColliderCoordinates.x <= </span><span class="s5">0</span><span class="s1">) newColliderCoordinates.x = </span><span class="s5">1</span><span class="s4">;</span> -<a name="l562"><span class="ln">562 </span></a> <span class="s4">if </span><span class="s1">(newColliderCoordinates.x >= </span><span class="s4">this</span><span class="s1">.width) newColliderCoordinates.x = </span><span class="s4">this</span><span class="s1">.width - </span><span class="s5">1</span><span class="s4">;</span> -<a name="l563"><span class="ln">563 </span></a> <span class="s4">if </span><span class="s1">(newColliderCoordinates.y <= </span><span class="s5">0</span><span class="s1">) newColliderCoordinates.y = </span><span class="s5">1</span><span class="s4">;</span> -<a name="l564"><span class="ln">564 </span></a> <span class="s4">if </span><span class="s1">(newColliderCoordinates.y >= </span><span class="s4">this</span><span class="s1">.height) newColliderCoordinates.y = </span><span class="s4">this</span><span class="s1">.height - </span><span class="s5">1</span><span class="s4">;</span> -<a name="l565"><span class="ln">565 </span></a> -<a name="l566"><span class="ln">566 </span></a> <span class="s0">// On change la position horizontale des éléments (plus</span> -<a name="l567"><span class="ln">567 </span></a> <span class="s0">// exactement le nombre de pixels entre la gauche de</span> -<a name="l568"><span class="ln">568 </span></a> <span class="s0">// l'élément et la gauche de l'écran) pour correspondre à</span> -<a name="l569"><span class="ln">569 </span></a> <span class="s0">// leurs valeurs respectives (de newCoordinates pour la</span> -<a name="l570"><span class="ln">570 </span></a> <span class="s0">// pomme de terre et le visage, et de newColliderCoordinates</span> -<a name="l571"><span class="ln">571 </span></a> <span class="s0">// pour la boîte de collision). /)</span> -<a name="l572"><span class="ln">572 </span></a> <span class="s4">this</span><span class="s1">.potatoElement.style.left = newCoordinates.x + </span><span class="s6">"px"</span><span class="s4">;</span> -<a name="l573"><span class="ln">573 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.style.left = newCoordinates.x + </span><span class="s6">"px"</span><span class="s4">;</span> -<a name="l574"><span class="ln">574 </span></a> <span class="s4">this</span><span class="s1">.potatoColliderElement.style.left = newColliderCoordinates.x + </span><span class="s6">"px"</span><span class="s4">;</span> -<a name="l575"><span class="ln">575 </span></a> -<a name="l576"><span class="ln">576 </span></a> <span class="s0">// De même, mais cette fois-ci pour la position verticale</span> -<a name="l577"><span class="ln">577 </span></a> <span class="s0">// (et donc pour le nombre de pixels entre le haut de l'élément</span> -<a name="l578"><span class="ln">578 </span></a> <span class="s0">// et le haut de l'écran). /)</span> -<a name="l579"><span class="ln">579 </span></a> <span class="s4">this</span><span class="s1">.potatoElement.style.top = newCoordinates.y + </span><span class="s6">"px"</span><span class="s4">;</span> -<a name="l580"><span class="ln">580 </span></a> <span class="s4">this</span><span class="s1">.potatoFaceElement.style.top = newCoordinates.y + </span><span class="s6">"px"</span><span class="s4">;</span> -<a name="l581"><span class="ln">581 </span></a> <span class="s4">this</span><span class="s1">.potatoColliderElement.style.top = newColliderCoordinates.y + </span><span class="s6">"px"</span><span class="s4">;</span> -<a name="l582"><span class="ln">582 </span></a> -<a name="l583"><span class="ln">583 </span></a> <span class="s0">// On redéfinit les coordonnées nous permettant par la</span> -<a name="l584"><span class="ln">584 </span></a> <span class="s0">// suite de calculer l'angle ... /)</span> -<a name="l585"><span class="ln">585 </span></a> <span class="s4">this</span><span class="s1">.angleCoordinates = {</span> -<a name="l586"><span class="ln">586 </span></a> <span class="s0">// Noter qu'on utilise les coordonnées de la</span> -<a name="l587"><span class="ln">587 </span></a> <span class="s0">// boîte de collision, car il n'y a pas eu de</span> -<a name="l588"><span class="ln">588 </span></a> <span class="s0">// mouvement du curseur de la souris. Nous ne</span> -<a name="l589"><span class="ln">589 </span></a> <span class="s0">// pouvons donc pas utiliser les coordonnées du</span> -<a name="l590"><span class="ln">590 </span></a> <span class="s0">// curseur /)</span> -<a name="l591"><span class="ln">591 </span></a> <span class="s1">x: </span><span class="s4">this</span><span class="s1">.potatoColliderElement.offsetLeft</span><span class="s4">,</span> -<a name="l592"><span class="ln">592 </span></a> <span class="s1">y: </span><span class="s4">this</span><span class="s1">.potatoColliderElement.offsetTop</span> -<a name="l593"><span class="ln">593 </span></a> <span class="s1">}</span> -<a name="l594"><span class="ln">594 </span></a> -<a name="l595"><span class="ln">595 </span></a> <span class="s0">// ... et on recalcule l'angle. /)</span> -<a name="l596"><span class="ln">596 </span></a> <span class="s4">this</span><span class="s1">.setAngle()</span><span class="s4">;</span> -<a name="l597"><span class="ln">597 </span></a> <span class="s1">}</span> -<a name="l598"><span class="ln">598 </span></a><span class="s1">}</span> -<a name="l599"><span class="ln">599 </span></a> -<a name="l600"><span class="ln">600 </span></a><span class="s2">/**</span> -<a name="l601"><span class="ln">601 </span></a> <span class="s2">* Au chargement de la page,</span> -<a name="l602"><span class="ln">602 </span></a> <span class="s2">* - créée une instance de Potatogochi</span> -<a name="l603"><span class="ln">603 </span></a> <span class="s2">* - associe les événements du curseur à leurs méthodes</span> -<a name="l604"><span class="ln">604 </span></a> <span class="s2">* - fait se déplacer la pomme de terre toutes les 100ms</span> -<a name="l605"><span class="ln">605 </span></a> <span class="s2">* /)</span> -<a name="l606"><span class="ln">606 </span></a> <span class="s2">*/</span> -<a name="l607"><span class="ln">607 </span></a><span class="s1">window.addEventListener(</span><span class="s6">"load"</span><span class="s4">, </span><span class="s1">() => {</span> -<a name="l608"><span class="ln">608 </span></a> <span class="s0">// On crée une nouvelle instance de Potatogochi en utilisant</span> -<a name="l609"><span class="ln">609 </span></a> <span class="s0">// les éléments d'ID "potato", "potato-face" et "potato-collider". /)</span> -<a name="l610"><span class="ln">610 </span></a> <span class="s4">const </span><span class="s1">Potatogochi: PotatogochiInstance = </span><span class="s4">new </span><span class="s1">PotatogochiInstance(</span> -<a name="l611"><span class="ln">611 </span></a> <span class="s0">// On utilise l'élément d'ID "potato" comme un HTMLImageElement</span> -<a name="l612"><span class="ln">612 </span></a> <span class="s0">// (c'est-à-dire un <img> dans le DOM) /)</span> -<a name="l613"><span class="ln">613 </span></a> <span class="s1">document.getElementById(</span><span class="s6">"potato"</span><span class="s1">) as HTMLImageElement</span><span class="s4">,</span> -<a name="l614"><span class="ln">614 </span></a> -<a name="l615"><span class="ln">615 </span></a> <span class="s0">// On utilise l'élément d'ID "potato-face" comme un HTMLImageElement</span> -<a name="l616"><span class="ln">616 </span></a> <span class="s0">// (c'est-à-dire un <img> dans le DOM) /)</span> -<a name="l617"><span class="ln">617 </span></a> <span class="s1">document.getElementById(</span><span class="s6">"potato-face"</span><span class="s1">) as HTMLImageElement</span><span class="s4">,</span> -<a name="l618"><span class="ln">618 </span></a> -<a name="l619"><span class="ln">619 </span></a> <span class="s0">// On utilise l'élément d'ID "potato-collider" comme un HTMLDivElement</span> -<a name="l620"><span class="ln">620 </span></a> <span class="s0">// (c'est-à-dire un <div>...</div> dans le DOM) /)</span> -<a name="l621"><span class="ln">621 </span></a> <span class="s1">document.getElementById(</span><span class="s6">"potato-collider"</span><span class="s1">) as HTMLDivElement</span> -<a name="l622"><span class="ln">622 </span></a> <span class="s1">)</span><span class="s4">;</span> -<a name="l623"><span class="ln">623 </span></a> -<a name="l624"><span class="ln">624 </span></a> <span class="s0">// Quand la souris se déplace sur l'écran (mousemove), on exécute la méthode</span> -<a name="l625"><span class="ln">625 </span></a> <span class="s0">// mouseMove de l'instance de Potatogochi. /)</span> -<a name="l626"><span class="ln">626 </span></a> <span class="s1">document.body.addEventListener(</span><span class="s6">"mousemove"</span><span class="s4">, </span><span class="s1">(event: MouseEvent) => { Potatogochi.mouseMove(event)</span><span class="s4">; </span><span class="s1">})</span><span class="s4">;</span> -<a name="l627"><span class="ln">627 </span></a> -<a name="l628"><span class="ln">628 </span></a> <span class="s0">// Quand la souris sort de l'écran (mouseleave), on exécute la méthode</span> -<a name="l629"><span class="ln">629 </span></a> <span class="s0">// mouseLeave de l'instance de Potatogochi. /)</span> -<a name="l630"><span class="ln">630 </span></a> <span class="s1">document.body.addEventListener(</span><span class="s6">"mouseleave"</span><span class="s4">, </span><span class="s1">() => { Potatogochi.mouseLeave()</span><span class="s4">; </span><span class="s1">})</span><span class="s4">;</span> -<a name="l631"><span class="ln">631 </span></a> -<a name="l632"><span class="ln">632 </span></a> <span class="s0">// Quand la souris entre dans l'écran (mouseenter), on exécute la méthode</span> -<a name="l633"><span class="ln">633 </span></a> <span class="s0">// mouseEnter de l'instance de Potatogochi. /)</span> -<a name="l634"><span class="ln">634 </span></a> <span class="s1">document.body.addEventListener(</span><span class="s6">"mouseenter"</span><span class="s4">, </span><span class="s1">() => { Potatogochi.mouseEnter()</span><span class="s4">; </span><span class="s1">})</span><span class="s4">;</span> -<a name="l635"><span class="ln">635 </span></a> -<a name="l636"><span class="ln">636 </span></a> <span class="s0">// Toutes les 100 millisecondes, on exécute la méthode movementEvent</span> -<a name="l637"><span class="ln">637 </span></a> <span class="s0">// de l'instance de Potatogochi. /)</span> -<a name="l638"><span class="ln">638 </span></a> <span class="s1">setInterval(() => {</span> -<a name="l639"><span class="ln">639 </span></a> <span class="s1">Potatogochi.movementEvent()</span><span class="s4">;</span> -<a name="l640"><span class="ln">640 </span></a> <span class="s1">}</span><span class="s4">, </span><span class="s5">100</span><span class="s1">)</span><span class="s4">;</span> -<a name="l641"><span class="ln">641 </span></a><span class="s1">})</span><span class="s4">;</span> -<a name="l642"><span class="ln">642 </span></a></pre> -</body> -</html>
\ No newline at end of file |