Responsive design de la page projet ASCII Space Destroyer

projets/pro_ascii_space.html

@@ -101,26 +101,52 @@
     <h4>
         Principe
     </h4>
-    <p>
-        <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le pionnier
-        du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils ne
-        franchissent le bord droit de l'écran.
-    </p>
-    <p>
-        La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères standards
-        qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em> pour votre
-        vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts subis. Si
-        votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
-    </p>
-    <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_game1.png" alt="cv flat icon"/>
-    <p>
-        Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une courte
-        description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour chaque
-        planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux. Soit la
-        limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il débloque une
-        arme ou le bouclier de combat.
-    </p>
-    <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_menu.png" alt="cv flat icon"/>
+    <div class="row">
+        <div class="col-lg-12 col-xl-4">
+            <p>
+                <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le
+                pionnier
+                du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils
+                ne
+                franchissent le bord droit de l'écran.
+            </p>
+            <p>
+                La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères
+                standards
+                qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em>
+                pour
+                votre
+                vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts
+                subis.
+                Si
+                votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
+            </p>
+        </div>
+        <div class="col-lg-12 col-xl-8">
+            <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_game1.png" alt="cv flat icon"/>
+        </div>
+    </div>
+    <h4>
+        Progression
+    </h4>
+    <div class="row">
+        <div class="col-lg-12 col-xl-9">
+            <img class="rounded img-fluid mx-auto d-block" src="../images/projets_ascii_menu.png" alt="cv flat icon"/>
+        </div>
+        <div class="col-lg-12 col-xl-3">
+            <p>
+                Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une
+                courte
+                description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour
+                chaque
+                planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux.
+                Soit la
+                limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il
+                débloque une
+                arme ou le bouclier de combat.
+            </p>
+        </div>
+    </div>
     <h4>
         Faire son propre vaisseau
     </h4>
@@ -136,142 +162,191 @@
         Voici une courte description de l'arsenal à disposition.
     </p>
 
-    <h5>
-        Le Gun <code>[-</code>
-    </h5>
-    <p>
-        Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque part
-        dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en forme de
-        <code>+</code>.
-    </p>
-    <p>
-        À l'impact, le Gun fait des dégâts localisés autour du point de contact.
-    </p>
+    <div class="row">
+        <div class="col-xl-4 col-lg-6 col-md-12">
+            <h5>
+                Le Gun <code>[-</code>
+            </h5>
+            <p>
+                Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque
+                part
+                dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en
+                forme de
+                <code>+</code>.
+            </p>
+            <p>
+                À l'impact, le Gun fait des dégâts localisés autour du point de contact.
+            </p>
+        </div>
 
-    <h5>
-        Le Cutter <code>[|</code>
-    </h5>
-    <p>
-        Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le projectile
-        en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne verticale
-        prennent 50 points de dommages (maxi : 100).
-    </p>
-    <p>
-        Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau ennemi en
-        deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de structure ...
-    </p>
+        <div class="col-xl-4 col-lg-6 col-md-12">
+            <h5>
+                Le Cutter <code>[|</code>
+            </h5>
+            <p>
+                Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le
+                projectile
+                en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne
+                verticale
+                prennent 50 points de dommages (maxi : 100).
+            </p>
+            <p>
+                Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau
+                ennemi en
+                deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de
+                structure ...
+            </p>
+        </div>
 
-    <h5>
-        Le Disper <code>[<</code>
-    </h5>
-    <p>
-        Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de tir.
-    </p>
-    <p>
-        Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite. Il faut
-        savoir que le tir de Disper fait davantage de dégâts au contact.
-    </p>
-    <p>
-        Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un paris risqué
-        qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
-    </p>
+        <div class="col-xl-4 col-lg-6 col-md-12">
 
-    <h5>
-        Le Protoseeker <code>[O</code>
-    </h5>
-    <p>
-        Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
-    </p>
-    <p>
-        Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu. Elle
-        compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours orienté
-        vers le vaisseau ennemi le plus proche.
-    </p>
-    <p>
-        Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
-        projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
-    </p>
+            <h5>
+                Le Disper <code>[<</code>
+            </h5>
+            <p>
+                Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de
+                tir.
+            </p>
+            <p>
+                Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite.
+                Il faut
+                savoir que le tir de Disper fait davantage de dégâts au contact.
+            </p>
+            <p>
+                Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un
+                paris risqué
+                qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
+            </p>
+        </div>
 
-    <h5>
-        Missile Launcher <code>[></code>
-    </h5>
-    <p>
-        Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
-    </p>
-    <p>
-        Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un autoguidage
-        fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
-        directement le cockpit de l'ennemi le plus proche.
-    </p>
-    <p>
-        Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe directement au
-        coeur de sa cible.
-    </p>
-    <p>
-        Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend très
-        difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans l'algorithme
-        de guidage qui vous permettra d'échapper à l'impact.
-    </p>
+        <div class="col-xl-4 col-lg-6 col-md-12">
 
-    <h5>
-        Brexit launcher <code>[{</code>
-    </h5>
-    <p>
-        Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le <strong>Brexit</strong>
-        est une arme basée sur la division.
-    </p>
-    <p>
-        De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs en
-        diagonale.
-    </p>
-    <p>
-        Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des dégâts en
-        évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
-    </p>
-    <h5>
-        Hecto combustion <code>[~</code>
-    </h5>
-    <p>
-        L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout vient du
-        fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
-    </p>
-    <p>
-        Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
-        maîtriser.
-    </p>
+            <h5>
+                Le Protoseeker <code>[O</code>
+            </h5>
+            <p>
+                Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
+            </p>
+            <p>
+                Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu.
+                Elle
+                compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours
+                orienté
+                vers le vaisseau ennemi le plus proche.
+            </p>
+            <p>
+                Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
+                projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
+            </p>
+        </div>
 
-    <h5>
-        Sniper rifle <code>[=</code>
-    </h5>
-    <p>
-        Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
-    </p>
-    <p>
-        Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
-    </p>
+        <div class="col-xl-4 col-lg-6 col-md-12">
 
-    <h5>
-        Le bouclier de combat <code>()</code>
-    </h5>
-    <p>
-        Le bouclier n'est pas une arme, mais un dispositif de défense.
-    </p>
-    <p>
-        Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce champ de
-        force absorbe les dégâts sans endommager la structure.
-    </p>
-    <p>
-        À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau n'est
-        plus protégé.
-    </p>
-    <p>
-        Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
-        régénérer.
-    </p>
-    <p>
-        Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut encaisser
-        avant de disparaître, ainsi que la vitesse de rechargement.
-    </p>
+            <h5>
+                Missile Launcher <code>[></code>
+            </h5>
+            <p>
+                Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
+            </p>
+            <p>
+                Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un
+                autoguidage
+                fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
+                directement le cockpit de l'ennemi le plus proche.
+            </p>
+            <p>
+                Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe
+                directement au
+                coeur de sa cible.
+            </p>
+            <p>
+                Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend
+                très
+                difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans
+                l'algorithme
+                de guidage qui vous permettra d'échapper à l'impact.
+            </p>
+        </div>
+
+        <div class="col-xl-4 col-lg-6 col-md-12">
+
+            <h5>
+                Brexit launcher <code>[{</code>
+            </h5>
+            <p>
+                Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le
+                <strong>Brexit</strong>
+                est une arme basée sur la division.
+            </p>
+            <p>
+                De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs
+                en
+                diagonale.
+            </p>
+            <p>
+                Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des
+                dégâts en
+                évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
+            </p>
+        </div>
+
+        <div class="col-xl-4 col-lg-6 col-md-12">
+            <h5>
+                Hecto combustion <code>[~</code>
+            </h5>
+            <p>
+                L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout
+                vient du
+                fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
+            </p>
+            <p>
+                Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
+                maîtriser.
+            </p>
+        </div>
+
+        <div class="col-xl-4 col-lg-6 col-md-12">
+
+            <h5>
+                Sniper rifle <code>[=</code>
+            </h5>
+            <p>
+                Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
+            </p>
+            <p>
+                Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
+            </p>
+        </div>
+
+        <div class="col-xl-4 col-lg-12 col-md-12">
+
+            <h5>
+                Le bouclier de combat <code>()</code>
+            </h5>
+            <p>
+                Le bouclier n'est pas une arme, mais un dispositif de défense.
+            </p>
+            <p>
+                Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce
+                champ de
+                force absorbe les dégâts sans endommager la structure.
+            </p>
+            <p>
+                À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau
+                n'est
+                plus protégé.
+            </p>
+            <p>
+                Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
+                régénérer.
+            </p>
+            <p>
+                Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut
+                encaisser
+                avant de disparaître, ainsi que la vitesse de rechargement.
+            </p>
+        </div>
+    </div>
 
     <h5>
         Tableau récapitulatif
@@ -378,37 +453,50 @@
         biblothèque SDL.
     </p>
 
-    <h4>
-        SDL 1.2
-    </h4>
-    <p>
-        SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette bibliothèque
-        permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
-    </p>
-    <p>
-        Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre, et le
-        module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
-    </p>
-    <p>
-        La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de code pour
-        arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
-    </p>
-    <p>
-        Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
-    </p>
+    <div class="row">
+        <div class="col-lg-12 col-xl-6">
+            <h4>
+                SDL 1.2
+            </h4>
+            <p>
+                SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette
+                bibliothèque
+                permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
+            </p>
+            <p>
+                Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre,
+                et le
+                module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
+            </p>
+            <p>
+                La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de
+                code pour
+                arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
+            </p>
+            <p>
+                Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
+            </p>
+        </div>
+        <div class="col-lg-12 col-xl-6">
 
-    <h4>
-        SDL GFX
-    </h4>
-    <p>
-        SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa fonction qui
-        permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de caractères
-        ASCII ...
-    </p>
-    <p>
-        Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne faisait pas
-        grand choses, je ne plaisantais pas.
-    </p>
+            <h4>
+                SDL GFX
+            </h4>
+            <p>
+                SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa
+                fonction qui
+                permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de
+                caractères
+                ASCII ...
+            </p>
+            <p>
+                Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne
+                faisait pas
+                grand choses, je ne plaisantais pas.
+            </p>
+
+        </div>
+    </div>
 
     <h3>
         Téléchargements
@@ -436,7 +524,7 @@
             <a class="page-link" title="Site web de Jovian" href="pro_static_site.html">1</a>
         </li>
         <li class="page-item active">
-            <div class="page-link" title="ASCII Space destroyer"">2</div>
+            <div class="page-link" title="ASCII Space destroyer">2</div>
         </li>
         <li class="page-item">
             <a class="page-link" title="Pulsar" href="pro_pulsar.html">3</a>