index.html

From 8aed8a5131d8cff4cfde29ad984c1dd6696ffa2c Mon Sep 17 00:00:00 2001 From: Minteck Date: Mon, 28 Nov 2022 17:40:31 +0100 Subject: Remove /sources --- .gitignore | 1 + source/index.html | 35 --- source/index.html.html | 83 ------ source/index.ts.html | 665 ------------------------------------------------- source/style.css.html | 175 ------------- 5 files changed, 1 insertion(+), 958 deletions(-) delete mode 100644 source/index.html delete mode 100644 source/index.html.html delete mode 100644 source/index.ts.html delete mode 100644 source/style.css.html diff --git a/.gitignore b/.gitignore index 1521c8b..5fc1e93 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ dist +source diff --git a/source/index.html b/source/index.html deleted file mode 100644 index befcb76..0000000 --- a/source/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - index.html - - - - - -

- - index.html -

-
- -

- - index.ts -

-
- -

- - style.css -

- - \ No newline at end of file diff --git a/source/index.html.html b/source/index.html.html deleted file mode 100644 index 1d0b5f2..0000000 --- a/source/index.html.html +++ /dev/null @@ -1,83 +0,0 @@ - - -index.html - - - - - -

- -index.html -

1    <!DOCTYPE html>
-2    <html lang="en">
-3    <head>
-4    
-5        <!-- Définit l'encodage sur UTF-8 /) -->
-6        <meta charset="UTF-8">
-7    
-8        <!-- Définit le titre de l'onglet comme étant "Potatogochi" /) -->
-9        <title>Potatogochi</title>
-10   
-11       <!-- Définit l'image de l'onglet comme étant /assets/favicon.png /) -->
-12       <link rel="shortcut icon" href="/assets/favicon.png" type="image/png">
-13   
-14       <!-- Charge le fichier CSS /assets/style.css /) -->
-15       <link rel="stylesheet" href="/assets/style.css">
-16   
-17       <!-- Charge le JS /dist/index.js compilé à partir de /src/index.ts /) -->
-18       <script src="/dist/index.js"></script>
-19   
-20   </head>
-21   <body>
-22   
-23       <!-- Le fond du jeu /) -->
-24       <div id="potatogochi-background"></div>
-25   
-26       <!-- Le jeu en lui-même /) -->
-27       <div id="potatogochi">
-28   
-29           <!-- La boite de collision du jeu, 2x la taille de la pomme de terre, par défaut au centre de la page /) -->
-30           <div id="potato-collider" style="left: calc(50vw - 256px); top: calc(50vh - 256px);"></div>
-31   
-32           <!-- L'image de la pomme de terre elle-même, par défaut au centre de la page /) -->
-33           <img alt="potato" id="potato" src="/assets/potato.png" style="left: calc(50vw - 128px); top: calc(50vh - 128px);">
-34   
-35           <!-- L'image du visage de la pomme de terre, par défaut au centre de la page /) -->
-36           <img alt="potato" id="potato-face" src="/assets/face-happy-open.png" style="left: calc(50vw - 128px); top: calc(50vh - 128px);">
-37   
-38       </div>
-39   
-40       <!-- Le titre et les crédits du jeu /) -->
-41       <div id="potatogochi-credits">
-42   
-43           <!-- Le logo du jeu, affiché en haut /) -->
-44           <img src="/assets/logo.png" alt="Potatogochi" id="potatogochi-logo">
-45   
-46           <!-- Le pied de page /) -->
-47           <div id="potatogochi-footer">
-48   
-49               <!-- Information de droits d'auteurs ; n'affiche pas le nom réel, car le site est public /) -->
-50               © 2022 Equestria.dev, All rights reserved<br>
-51   
-52               <!-- Le code est accessible à la page /source, et les icônes viennent du site icons8.com /) -->
-53               Code: /source · Icons: icons8.com
-54   
-55           </div>
-56   
-57       </div>
-58   
-59   </body>
-60   </html>

- - \ No newline at end of file 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 @@ - - -index.ts - - - - - -

- -index.ts -

1    /* 
-2         ____   ___ _____  _  _____ ___   ____  ___   ____ _   _ ___ 
-3        |  _ \ / _ \_   _|/ \|_   _/ _ \ / ___|/ _ \ / ___| | | |_ _| 
-4        | |_) | | | || | / _ \ | || | | | |  _| | | | |   | |_| || | 
-5        |  __/| |_| || |/ ___ \| || |_| | |_| | |_| | |___|  _  || | 
-6        |_|    \___/ |_/_/   \_\_| \___/ \____|\___/ \____|_| |_|___| 
-7     
-8                            == Un projet de NSI == 
-9     
-10       Date de début :        18 novembre 2022 
-11       Date de fin :          20 novembre 2022 
-12       Durée de réalisation : 2 jours 
-13       Navigateur de test :   Firefox 108.0b3 
-14    
-15       LICENCE 
-16       ======= 
-17    
-18       © 2022 Equestria.dev, Tous droits réservés. 
-19    
-20       Ce contenu est fourni à des fins éducatives uniquement. Il 
-21       ne peut être reproduit, publié ou modifié sans l'autorisa- 
-22       tion des auteurs originaux. 
-23    
-24       STATISTIQUES 
-25       ============ 
-26    
-27                       ╔══════════════════════╗ 
-28                       ║  852 LIGNES DE CODE  ║ 
-29                       ╚══════════════════════╝ 
-30    
-31                                  ┌──────┬──────┬──────┬───────────┐ 
-32                                  │ HTML │  CSS │  TS  │   TOTAL   │ 
-33       ┌──────────────────────────┼──────┼──────┼──────┼───────────┤ 
-34       │ Lignes de code uniques   │  25  │  57  │ 199  │    281    │ 
-35       ├──────────────────────────┼──────┼──────┼──────┼───────────┤ 
-36       │ Lignes de commentaire    │  15  │  43  │ 360  │    418    │ 
-37       ├──────────────────────────┼──────┼──────┼──────┼───────────┤ 
-38       │ Lignes vides             │  20  │  51  │  82  │    153    │ 
-39       ├──────────────────────────┼──────┼──────┼──────┼───────────┤ 
-40       │ Total des lignes         │  60  │ 151  │ 641  │    852    │ 
-41       └──────────────────────────┴──────┴──────┴──────┴───────────┘ 
-42    
-43       Nombre de types :      8 
-44       Nombre de méthodes :   12 
-45       Nombre de propriétés : 9 
-46       Nombre de bro hoof :   101 
-47    
-48                                  · ^c^ · 
-49   */
-50   
-51   /**
-52    * Un couple de valeurs représentant des coordonnées
-53    * dans un repère en 2 dimensions. /)
-54    *
-55    * @property x - La position en abscisse
-56    * @property y - La position en ordonnée
-57    */
-58   interface Coordinates {
-59       x: number;
-60       y: number;
-61   }
-62   
-63   /**
-64    * Comme Coordinates, mais explicitement pour une boîte
-65    * de collisions. /)
-66    *
-67    * @extends Coordinates
-68    */
-69   interface ColliderCoordinates extends Coordinates {}
-70   
-71   /**
-72    * La direction verticale d'une instance Direction.
-73    * - None : pas de movement vertical
-74    * - Top : mouvement vers le haut
-75    * - Bottom : mouvement vers le bas
-76    * /)
-77    *
-78    * @enum {number}
-79    * @requires Direction
-80    */
-81   enum VDirection {
-82       None,
-83       Top,
-84       Bottom
-85   }
-86   
-87   /**
-88    * La direction horizontale d'une instance Direction.
-89    * - None : pas de movement horizontal
-90    * - Left : mouvement vers la gauche
-91    * - Right : mouvement vers la droite
-92    * /)
-93    *
-94    * @enum {number}
-95    * @requires Direction
-96    */
-97   enum HDirection {
-98       None,
-99       Left,
-100      Right
-101  }
-102  
-103  /**
-104   * Un ensemble de directions à prendre, verticale
-105   * et horizontale. /)
-106   *
-107   * @property vertical - La direction verticale
-108   * @property horizontal - La direction horizontale
-109   */
-110  interface Direction {
-111      vertical: VDirection,
-112      horizontal: HDirection
-113  }
-114  
-115  /**
-116   * Un movement unique que l'objet doit effectuer. /)
-117   *
-118   * @property direction - Une Direction que l'objet doit prendre
-119   * @property amount - Le nombre de pixels dont l'objet doit se
-120   * déplacer dans toutes les directions
-121   */
-122  interface Movement {
-123      direction: Direction,
-124      amount: number
-125  }
-126  
-127  /**
-128   * Le fichier de visage à afficher /)
-129   *
-130   * @enum {number}
-131   */
-132  enum Face {
-133      MouthHappyEyesClosed,
-134      MouthHappyEyesOpen,
-135      MouthOpenEyesClosed,
-136      MouthOpenEyesOpen,
-137      MouthSadEyesClosed,
-138      MouthSadEyesOpen
-139  }
-140  
-141  /**
-142   * Une instance du jeu Potatogochi /)
-143   */
-144  class PotatogochiInstance {
-145      /**
-146       * L'élément DOM de la pomme de terre /)
-147       * @private
-148       */
-149      private readonly potatoElement: HTMLImageElement;
-150  
-151      /**
-152       * L'élément DOM du visage de la pomme de terre /)
-153       * @private
-154       */
-155      private readonly potatoFaceElement: HTMLImageElement;
-156  
-157      /**
-158       * L'élément DOM de la boite de collision du jeu /)
-159       * @private
-160       */
-161      private readonly potatoColliderElement: HTMLDivElement;
-162  
-163      /**
-164       * La largeur de l'écran (moins la moitié de la pomme de terre) /)
-165       * @private
-166       */
-167      private readonly width: number = window.innerWidth - 128;
-168  
-169      /**
-170       * La longueur de l'écran (moins la moitié de la pomme de terre) /)
-171       * @private
-172       */
-173      private readonly height: number = window.innerHeight - 128;
-174  
-175      /**
-176       * Si la souris est présente ou non dans la fenêtre /)
-177       * @private
-178       */
-179      private mouse: boolean = true;
-180  
-181      /**
-182       * Les coordonnées de la boîte de collision par rapport à
-183       * la fenêtre, utilisées pour calculer l'angle /)
-184       * @private
-185       */
-186      private angleCoordinates: ColliderCoordinates;
-187  
-188      /**
-189       * Les coordonnées de la boîte de collision /)
-190       * @private
-191       */
-192      private colliderCoordinates: ColliderCoordinates;
-193  
-194      /**
-195       * La direction du mouvement actuel /)
-196       * @private
-197       */
-198      private movementDirection: Direction = {
-199          horizontal: HDirection.None,
-200          vertical: VDirection.None
-201      }
-202  
-203      /**
-204       * Construit une nouvelle instance de Potatogochi à partir
-205       * des éléments DOM passés en paramètre. /)
-206       *
-207       * @constructor
-208       * @param element - L'élément DOM de la pomme de terre
-209       * @param faceElement - L'élément DOM du visage de la pomme de terre
-210       * @param colliderElement - L'élément DOM de la boîte de collision du jeu
-211       */
-212      constructor(element: HTMLImageElement, faceElement: HTMLImageElement, colliderElement: HTMLDivElement) {
-213          // On associe les 3 éléments passés en paramètres aux propriétés
-214          // correspondantes. /)
-215          this.potatoElement = element;
-216          this.potatoFaceElement = faceElement;
-217          this.potatoColliderElement = colliderElement;
-218  
-219          // Définit colliderCoordinates sur les coordinates actuelles
-220          // de la boîte de collision (coordonnées de départ). /)
-221          this.colliderCoordinates = {
-222              // offsetLeft donne le nombre de pixels entre la gauche
-223              // de la boîte de collision et la gauche de l'écran. /)
-224              x: this.potatoColliderElement.offsetLeft,
-225  
-226              // offsetTop donne le nombre de pixels entre le haut
-227              // de la boîte de collision et le haut de l'écran. /)
-228              y: this.potatoColliderElement.offsetTop
-229          }
-230  
-231          // Quand la souris entre en contact avec le visage (mouseenter),
-232          // on exécute la méthode faceMouseEnter de l'instance de Potatogochi. /)
-233          this.potatoFaceElement.addEventListener("mouseenter", () => this.faceMouseEnter());
-234  
-235          // Quand la souris sort du visage (mouseleave), on exécute la
-236          // méthode faceMouseLeave de l'instance de Potatogochi. /)
-237          this.potatoFaceElement.addEventListener("mouseleave", () => this.faceMouseLeave());
-238  
-239          // Quand la souris clique sur le visage (click), on exécute la
-240          // méthode faceClick de l'instance de Potatogochi. /)
-241          this.potatoFaceElement.addEventListener("click", () => this.faceClick());
-242      }
-243  
-244      /**
-245       * Change le visage de la pomme de terre lorsque la souris
-246       * entre en contact avec le visage. /)
-247       *
-248       * @private
-249       */
-250      private faceMouseEnter(): void {
-251          // La pomme de terre ouvre la bouche et les yeux lorsque le
-252          // curseur entre en contact avec le visage. /)
-253          this.setFace(Face.MouthOpenEyesOpen);
-254      }
-255  
-256      /**
-257       * Change le visage de la pomme de terre lorsque la souris
-258       * entre en contact avec le visage. /)
-259       *
-260       * @private
-261       */
-262      private faceMouseLeave(): void {
-263          // La pomme de terre ferme la bouche et ouvre les yeux lorsque
-264          // le curseur n'est plus en contact avec le visage. /)
-265          this.setFace(Face.MouthHappyEyesOpen);
-266      }
-267  
-268      /**
-269       * Change le visage de la pomme de terre lorsque la souris
-270       * clique sur le visage. /)
-271       *
-272       * @private
-273       */
-274      private faceClick(): void {
-275          // La pomme de terre ouvre la bouche et ferme les yeux
-276          // lorsque le curseur clique sur le visage. /)
-277          this.setFace(Face.MouthOpenEyesClosed);
-278      }
-279  
-280      /**
-281       * Change l'orientation de la pomme de terre pour
-282       * la faire pointer vers le curseur de la souris. /)
-283       *
-284       * @private
-285       */
-286      private setAngle(): void {
-287          // Crée une variable angle de type nombre /)
-288          let angle: number;
-289  
-290          // Si la souris est dans l'écran et qu'on a
-291          // préalablement calculé les coordonnées pour
-292          // calculer l'angle. /)
-293          if (this.mouse && this.angleCoordinates) {
-294              // On récupère des informations sur la taille et la
-295              // position de la boîte de collision par rapport à la
-296              // page. /)
-297              let boxBoundingRect: DOMRect = this.potatoColliderElement.getBoundingClientRect();
-298  
-299              // On calcule les coordonnées du centre de la boîte de
-300              // collision. /)
-301              let boxCenter: Coordinates = {
-302                  x: boxBoundingRect.left + boxBoundingRect.width / 2,
-303                  y: boxBoundingRect.top + boxBoundingRect.height / 2
-304              }
-305  
-306              // On calcule l'angle à partir des coordonnées calculées
-307              // précédemment. /)
-308              angle = Math.atan2(this.angleCoordinates.x - boxCenter.x, - (this.angleCoordinates.y - boxCenter.y)) * (180 / Math.PI);
-309          } else {
-310              angle = 0;
-311          }
-312  
-313          // On change la rotation du jeu pour correspondre à l'angle
-314          // que l'on vient de calculer. /)
-315          this.potatoElement.style.transform = "rotate(" + angle + "deg)";
-316          this.potatoFaceElement.style.transform = "rotate(" + angle + "deg)";
-317          this.potatoColliderElement.style.transform = "rotate(" + angle + "deg)";
-318      }
-319  
-320      /**
-321       * Exécute du code lorsque le curseur de la souris est
-322       * déplacé. /)
-323       *
-324       * @param event - L'événement du movement de la souris
-325       */
-326      public mouseMove(event: MouseEvent): void {
-327          // Si le curseur ne se situe pas sur la boîte de collision /)
-328          if (event.target !== this.potatoColliderElement) {
-329              // On redéfinit les coordonnées nous permettant par la
-330              // suite de calculer l'angle ... /)
-331              this.angleCoordinates = {
-332                  x: event.pageX,
-333                  y: event.pageY
-334              }
-335  
-336              // ... et on recalcule l'angle. /)
-337              this.setAngle();
-338  
-339              // On ne change pas la direction de la pomme de terre
-340              // lorsque la souris n'est pas sur la boîte de collision. /)
-341              return;
-342          }
-343  
-344          // On calcule les coordonnées du curseur de la souris par
-345          // rapport à la boîte de collision. /)
-346          let mouseCoordinates: Coordinates = {
-347              x: event.clientX - this.colliderCoordinates.x,
-348              y: event.clientY - this.colliderCoordinates.y
-349          }
-350  
-351          // Par défaut, aucun mouvement ne sera effectué. /)
-352          this.movementDirection = {
-353              horizontal: HDirection.None,
-354              vertical: VDirection.None
-355          }
-356  
-357          // Si les coordonnées en abscisse sont >250 (droite de la
-358          // boîte de collision), on va à droite. /)
-359          if (mouseCoordinates.x > 250) this.movementDirection.horizontal = HDirection.Right;
-360  
-361          // Si les coordonnées en abscisse sont <150 (gauche de la
-362          // boîte de collision), on va à gauche. /)
-363          if (mouseCoordinates.x < 150) this.movementDirection.horizontal = HDirection.Left;
-364  
-365          // Si les coordonnées en ordonnée sont >250 (bas de la
-366          // boîte de collision), on va en bas. /)
-367          if (mouseCoordinates.y > 250) this.movementDirection.vertical = VDirection.Bottom;
-368  
-369          // Si les coordonnées en ordonnée sont <150 (haut de la
-370          // boîte de collision), on va en haut. /)
-371          if (mouseCoordinates.y < 150) this.movementDirection.vertical = VDirection.Top;
-372  
-373          // On redéfinit les coordonnées nous permettant par la
-374          // suite de calculer l'angle ... /)
-375          this.angleCoordinates = {
-376              x: event.pageX,
-377              y: event.pageY
-378          }
-379  
-380          // ... et on recalcule l'angle. /)
-381          this.setAngle();
-382      }
-383  
-384      /**
-385       * Change le visage de la pomme de terre lorsque
-386       * le curseur de la souris entre la fenêtre.
-387       * Aussi, change la propriété `mouse` pour indiquer
-388       * que la souris est dans la fenêtre. /)
-389       */
-390      public mouseEnter(): void {
-391          // La pomme de terre est contente et ouvre les yeux lorsque
-392          // le curseur entre dans la fenêtre. /)
-393          this.setFace(Face.MouthHappyEyesOpen);
-394  
-395          // On indique à l'instance de Potatogochi que la souris est
-396          // désormais dans la fenêtre. /)
-397          this.mouse = true;
-398      }
-399  
-400      /**
-401       * Change le visage de la pomme de terre lorsque
-402       * le curseur de la souris quitte la fenêtre.
-403       * Aussi, change la propriété `mouse` pour indiquer
-404       * que la souris n'est plus dans la fenêtre. /)
-405       */
-406      public mouseLeave(): void {
-407          // La pomme de terre est triste et ouvre les yeux lorsque
-408          // le curseur n'est plus dans la fenêtre. /)
-409          this.setFace(Face.MouthSadEyesOpen);
-410  
-411          // On indique à l'instance de Potatogochi que la souris n'est
-412          // désormais plus dans la fenêtre. /)
-413          this.mouse = false;
-414      }
-415  
-416      /**
-417       * Associe un item de Face à un fichier image sur
-418       * le serveur, ou, si impossible, à l'image par
-419       * défaut. /)
-420       *
-421       * @param face - Un item de Face
-422       * @private
-423       */
-424      private getFaceFile(face: Face): string {
-425          // Selon la valeur de 'face'... /)
-426          switch (face) {
-427              case Face.MouthHappyEyesClosed: // = 0
-428                  return "/assets/face-happy-closed.png";
-429              case Face.MouthHappyEyesOpen: // = 1
-430                  return "/assets/face-happy-open.png";
-431              case Face.MouthOpenEyesClosed: // = 2
-432                  return "/assets/face-open-closed.png";
-433              case Face.MouthOpenEyesOpen: // = 3
-434                  return "/assets/face-open-open.png";
-435              case Face.MouthSadEyesClosed: // = 4
-436                  return "/assets/face-sad-closed.png";
-437              case Face.MouthSadEyesOpen: // = 5
-438                  return "/assets/face-sad-open.png";
-439              default: // < 0 ou > 5
-440                  return "/assets/potato.png";
-441          }
-442      }
-443  
-444      /**
-445       * Change le visage de la pomme de terre à partir
-446       * d'un item de Face. /)
-447       *
-448       * @param face - Face
-449       * @private
-450       */
-451      private setFace(face: Face): void {
-452          // On change l'URL du fichier que va afficher
-453          // potatoFaceElement pour le fichier récupéré par
-454          // la méthode getFaceFile. /)
-455          this.potatoFaceElement.src = this.getFaceFile(face);
-456      }
-457  
-458      /**
-459       * Code exécuté à intervalles réguliers pour faire
-460       * se déplacer la pomme de terre même sans interaction
-461       * de la part de l'utilisateur. /)
-462       */
-463      public movementEvent(): void {
-464          // Si la souris ne se trouve pas dans l'écran, la
-465          // pomme de terre ne doit pas se déplacer. /)
-466          if (!this.mouse) return;
-467  
-468          // On déplace la pomme de terre en conservant la
-469          // même direction et en se déplaçant de 10 pixels. /)
-470          this.movePotato({
-471              direction: this.movementDirection,
-472              amount: 10
-473          });
-474      }
-475  
-476      /**
-477       * Déplace la pomme de terre d'un Movement particulier, une seule et
-478       * unique fois. /)
-479       *
-480       * @param movement - Le mouvement que doit effectuer la pomme de terre
-481       * @private
-482       */
-483      private movePotato(movement: Movement): void {
-484          // Par défaut, les nouvelles coordonnées sont
-485          // les mêmes que les coordonnées actuelles. /)
-486          let newCoordinates: Coordinates = {
-487              // newCoordinates x est donc la position en
-488              // abscisse actuelle de la pomme de terre. /)
-489              x: this.potatoElement.offsetLeft,
-490  
-491              // newCoordinates y est donc la position en
-492              // ordonnée actuelle de la pomme de terre. /)
-493              y: this.potatoElement.offsetTop
-494  
-495              // Cela permet aussi de recentrer le visage
-496              // de la pomme de terre par rapport à la
-497              // pomme de terre elle-même. /)
-498          }
-499  
-500          // Pareil que pour newCoordinates, excepté qu'on
-501          // prend à la place les coordonnées du milieu de
-502          // la pomme de terre /)
-503          let newColliderCoordinates: Coordinates = {
-504              x: this.potatoElement.offsetLeft - 128,
-505              y: this.potatoElement.offsetTop - 128
-506  
-507              // Cela permet aussi de recentrer la boîte
-508              // de collision par rapport à la pomme de
-509              // terre. /)
-510          }
-511  
-512          // Si le mouvement vertical est vers le haut /)
-513          if (movement.direction.vertical === VDirection.Top) {
-514              // On ajoute 'amount' aux coordonnées, ce qui va
-515              // déplacer la pomme de terre de 'amount' pixels
-516              // vers le haut. /)
-517              newCoordinates.y = this.potatoElement.offsetTop + movement.amount;
-518  
-519          // Si le mouvement vertical est vers le bas /)
-520          } else if (movement.direction.vertical === VDirection.Bottom) {
-521              // On retire 'amount' aux coordonnées, ce qui va
-522              // déplacer la pomme de terre de 'amount' pixels
-523              // vers le bas. /)
-524              newCoordinates.y = this.potatoElement.offsetTop - movement.amount;
-525          }
-526          // S'il n'y a pas de mouvement vertical, on ne fait rien /)
-527  
-528          // Si le mouvement horizontal est vers la droite /)
-529          if (movement.direction.horizontal === HDirection.Left) {
-530              // On retire 'amount' aux coordonnées, ce qui va
-531              // déplacer la pomme de terre de 'amount' pixels
-532              // vers la gauche. /)
-533              newCoordinates.x = this.potatoElement.offsetLeft + movement.amount;
-534  
-535          // Si le mouvement horizontal est vers la gauche /)
-536          } else if (movement.direction.horizontal === HDirection.Right) {
-537              // On retire 'amount' aux coordonnées, ce qui va
-538              // déplacer la pomme de terre de 'amount' pixels
-539              // vers la droite. /)
-540              newCoordinates.x = this.potatoElement.offsetLeft - movement.amount;
-541          }
-542          // S'il n'y a pas de mouvement horizontal, on ne fait rien /)
-543  
-544          // Encore une fois, on prend le milieu de la pomme
-545          // de terre pour la boîte de collision. /)
-546          newColliderCoordinates.x = newCoordinates.x - 128;
-547          newColliderCoordinates.y = newCoordinates.y - 128;
-548  
-549          // Si les coordonnées sont plus grandes ou plus petites que
-550          // la taille de la fenêtre, on les redéfinit pour correspondre
-551          // à la taille de la fenêtre. /)
-552          if (newCoordinates.x <= 0) newCoordinates.x = 1;
-553          if (newCoordinates.x >= this.width) newCoordinates.x = this.width - 1;
-554          if (newCoordinates.y <= 0) newCoordinates.y = 1;
-555          if (newCoordinates.y >= this.height) newCoordinates.y = this.height - 1;
-556  
-557          // Pareil pour les coordonnées de la boîte de collision.
-558          // Cette fois-ci on ne prend pas les coordonnées du milieu
-559          // pour que la boîte de collision reste centrée par rapport
-560          // à la pomme de terre. /)
-561          if (newColliderCoordinates.x <= 0) newColliderCoordinates.x = 1;
-562          if (newColliderCoordinates.x >= this.width) newColliderCoordinates.x = this.width - 1;
-563          if (newColliderCoordinates.y <= 0) newColliderCoordinates.y = 1;
-564          if (newColliderCoordinates.y >= this.height) newColliderCoordinates.y = this.height - 1;
-565  
-566          // On change la position horizontale des éléments (plus
-567          // exactement le nombre de pixels entre la gauche de
-568          // l'élément et la gauche de l'écran) pour correspondre à
-569          // leurs valeurs respectives (de newCoordinates pour la
-570          // pomme de terre et le visage, et de newColliderCoordinates
-571          // pour la boîte de collision). /)
-572          this.potatoElement.style.left = newCoordinates.x + "px";
-573          this.potatoFaceElement.style.left = newCoordinates.x + "px";
-574          this.potatoColliderElement.style.left = newColliderCoordinates.x + "px";
-575  
-576          // De même, mais cette fois-ci pour la position verticale
-577          // (et donc pour le nombre de pixels entre le haut de l'élément
-578          // et le haut de l'écran). /)
-579          this.potatoElement.style.top = newCoordinates.y + "px";
-580          this.potatoFaceElement.style.top = newCoordinates.y + "px";
-581          this.potatoColliderElement.style.top = newColliderCoordinates.y + "px";
-582  
-583          // On redéfinit les coordonnées nous permettant par la
-584          // suite de calculer l'angle ... /)
-585          this.angleCoordinates = {
-586              // Noter qu'on utilise les coordonnées de la
-587              // boîte de collision, car il n'y a pas eu de
-588              // mouvement du curseur de la souris. Nous ne
-589              // pouvons donc pas utiliser les coordonnées du
-590              // curseur /)
-591              x: this.potatoColliderElement.offsetLeft,
-592              y: this.potatoColliderElement.offsetTop
-593          }
-594  
-595          // ... et on recalcule l'angle. /)
-596          this.setAngle();
-597      }
-598  }
-599  
-600  /**
-601   * Au chargement de la page,
-602   * - créée une instance de Potatogochi
-603   * - associe les événements du curseur à leurs méthodes
-604   * - fait se déplacer la pomme de terre toutes les 100ms
-605   * /)
-606   */
-607  window.addEventListener("load", () => {
-608      // On crée une nouvelle instance de Potatogochi en utilisant
-609      // les éléments d'ID "potato", "potato-face" et "potato-collider". /)
-610      const Potatogochi: PotatogochiInstance = new PotatogochiInstance(
-611          // On utilise l'élément d'ID "potato" comme un HTMLImageElement
-612          // (c'est-à-dire un <img> dans le DOM) /)
-613          document.getElementById("potato") as HTMLImageElement,
-614  
-615          // On utilise l'élément d'ID "potato-face" comme un HTMLImageElement
-616          // (c'est-à-dire un <img> dans le DOM) /)
-617          document.getElementById("potato-face") as HTMLImageElement,
-618  
-619          // On utilise l'élément d'ID "potato-collider" comme un HTMLDivElement
-620          // (c'est-à-dire un <div>...</div> dans le DOM) /)
-621          document.getElementById("potato-collider") as HTMLDivElement
-622      );
-623  
-624      // Quand la souris se déplace sur l'écran (mousemove), on exécute la méthode
-625      // mouseMove de l'instance de Potatogochi. /)
-626      document.body.addEventListener("mousemove", (event: MouseEvent) => { Potatogochi.mouseMove(event); });
-627  
-628      // Quand la souris sort de l'écran (mouseleave), on exécute la méthode
-629      // mouseLeave de l'instance de Potatogochi. /)
-630      document.body.addEventListener("mouseleave", () => { Potatogochi.mouseLeave(); });
-631  
-632      // Quand la souris entre dans l'écran (mouseenter), on exécute la méthode
-633      // mouseEnter de l'instance de Potatogochi. /)
-634      document.body.addEventListener("mouseenter", () => { Potatogochi.mouseEnter(); });
-635  
-636      // Toutes les 100 millisecondes, on exécute la méthode movementEvent
-637      // de l'instance de Potatogochi. /)
-638      setInterval(() => {
-639          Potatogochi.movementEvent();
-640      }, 100);
-641  });
-642

- - \ No newline at end of file diff --git a/source/style.css.html b/source/style.css.html deleted file mode 100644 index 7941857..0000000 --- a/source/style.css.html +++ /dev/null @@ -1,175 +0,0 @@ - - -style.css - - - - - -

- -style.css -

1    /* Style du fond du jeu /) */
-2    #potatogochi-background {
-3    
-4        /* Affiche un dégradé de couleurs /) */
-5        background-image: linear-gradient(180deg, rgba(255,110,110,1) 0%, rgba(255,195,51,1) 100%);
-6    
-7        /* Définit la position comme étant des coordonnées absolues /) */
-8        position: fixed;
-9    
-10       /* L'élément prend l'espace de la page entière /) */
-11       inset: 0;
-12   
-13       /* L'élément s'affiche à la couche 1 (couche plus haute = affiché au dessus) /) */
-14       z-index: 1;
-15   
-16   }
-17   
-18   /* Style du jeu lui-même /) */
-19   #potatogochi {
-20   
-21       /* Définit la position comme étant des coordonnées absolues /) */
-22       position: fixed;
-23   
-24       /* L'élément prend l'espace de la page entière /) */
-25       inset: 0;
-26   
-27       /* L'élément s'affiche à la couche 3 (couche plus haute = affiché au dessus) /) */
-28       z-index: 3;
-29   
-30   }
-31   
-32   /* Style de la pomme de terre elle-même /) */
-33   #potato {
-34   
-35       /* Définit la position comme étant des coordonnées absolues /) */
-36       position: fixed;
-37   
-38       /* Hauteur: 256 pixels; largeur: 256 pixels /) */
-39       height: 256px;
-40       width: 256px;
-41   
-42       /* L'élément s'affiche à la couche 4 (couche plus haute = affiché au dessus) /) */
-43       z-index: 4;
-44   
-45       /* Anime les changements des propriétés "top" et "left" sur 500 millisecondes /) */
-46       transition: top 500ms, left 500ms;
-47   
-48   }
-49   
-50   /* Style du visage de la pomme de terre /) */
-51   #potato-face {
-52   
-53       /* Définit la position comme étant des coordonnées absolues /) */
-54       position: fixed;
-55   
-56       /* Hauteur: 256 pixels; largeur: 256 pixels /) */
-57       height: 256px;
-58       width: 256px;
-59   
-60       /* L'élément s'affiche à la couche 6 (couche plus haute = affiché au dessus) /) */
-61       z-index: 6;
-62   
-63       /* Anime les changements des propriétés "top" et "left" sur 500 millisecondes /) */
-64       transition: top 500ms, left 500ms;
-65   
-66   }
-67   
-68   /* Style de la boîte de collision du jeu /) */
-69   #potato-collider {
-70   
-71       /* Définit la position comme étant des coordonnées absolues /) */
-72       position: fixed;
-73   
-74       /* Hauteur: 512 pixels; largeur: 512 pixels | 2 fois la pomme de terre /) */
-75       height: 512px;
-76       width: 512px;
-77   
-78       /* L'élément s'affiche à la couche 4 (couche plus haute = affiché au dessus) /) */
-79       z-index: 4;
-80   
-81       /* Anime les changements des propriétés "top" et "left" sur 500 millisecondes /) */
-82       transition: top 500ms, left 500ms;
-83   
-84   }
-85   
-86   /* Style des crédits /) */
-87   #potatogochi-credits {
-88   
-89       /* Définit la position comme étant des coordonnées absolues /) */
-90       position: fixed;
-91   
-92       /* L'élément prend l'espace de la page entière /) */
-93       inset: 0;
-94   
-95       /* L'élément s'affiche à la couche 2 (couche plus haute = affiché au dessus) /) */
-96       z-index: 2;
-97   
-98   }
-99   
-100  /* Style du logo affiché en haut de la page /) */
-101  #potatogochi-logo {
-102  
-103      /* Hauteur: 48 pixels /) */
-104      height: 48px;
-105  
-106      /* Marge de 20 pixels en haut /) */
-107      margin-top: 20px;
-108  
-109      /* Affiche l'élément comme un bloc /) */
-110      display: block;
-111  
-112      /* Ces deux propriétés permettent de centrer l'image horizontalement /) */
-113      margin-left: auto;
-114      margin-right: auto;
-115  
-116  }
-117  
-118  /* Style du pied de page /) */
-119  #potatogochi-footer {
-120  
-121      /* Définit la position comme étant des coordonnées absolues /) */
-122      position: fixed;
-123  
-124      /* Hauteur: 48 pixels */
-125      height: 48px;
-126  
-127      /* Position: 20 pixels en partant du bas /) */
-128      bottom: 20px;
-129  
-130      /* Affiche l'élément comme un bloc /) */
-131      display: block;
-132  
-133      /* Ces deux propriétés permettent d'étendre l'élément horizontalement /) */
-134      left: 0;
-135      right: 0;
-136  
-137      /* Centre le texte horizontalement /) */
-138      text-align: center;
-139  
-140  }
-141  
-142  /* Style du texte, appliqué sur toute la page /) */
-143  * {
-144  
-145      /* Définit la police sur une police sans serif du système /) */
-146      font-family: sans-serif;
-147  
-148      /* Définit la couleur du texte sur du noir avec une opacité de 50% /) */
-149      color: #0000007F;
-150  
-151  }

- - \ No newline at end of file -- cgit