pro_ascii_space.php 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <?php
  4. $title = "ASCII";
  5. include("../include/head.php");
  6. ?>
  7. <body>
  8. <!-- Navbar -->
  9. <?php
  10. include("../include/navbar.php")
  11. ?>
  12. <!-- Main -->
  13. <main role="main" class="container">
  14. <div class="focus-center">
  15. <h1>
  16. ASCII Space Destroyer
  17. </h1>
  18. <img class="rounded" src="/include/images/projets_ascii_ship_torpEL.png" alt="torpEL ascii ship">
  19. <h2>
  20. Jeu vidéo réalisé en C++
  21. </h2>
  22. <p class="lead">
  23. Derrière ce nom un peu bourrin se cache un shooter à la <em>Space Invader</em> où les joueurs peuvent
  24. concevoir
  25. leur propre vaisseau avant de partir à l'aventure.
  26. </p>
  27. </div>
  28. <!-- Content -->
  29. <h3>
  30. <img src="https://img.icons8.com/color/48/000000/term.png" alt="term flat icon">
  31. Introduction
  32. </h3>
  33. <p>
  34. Entre mes deux années de prépa, j'ai eu envie de reprendre le C++.
  35. </p>
  36. <p>
  37. J'aime bien le thème de l'espace, ainsi que la possibilité pour le joueur de créer son propre vaisseau.
  38. </p>
  39. <p>
  40. C'est ainsi qu'a débuté le projet ASCII Space Destroyer.
  41. </p>
  42. <h3>
  43. Le jeu
  44. </h3>
  45. <h4>
  46. Principe
  47. </h4>
  48. <div class="row">
  49. <div class="col-lg-12 col-xl-4">
  50. <p>
  51. <strong>ASCII Space Destroyer</strong> est un jeu de de tir. Il s'inspire de <em>SpaceInvader</em>, le
  52. pionnier
  53. du genre. Les flottes de vaisseau ennemies se rapprochent, et vous devez tous les abattre avant qu'ils
  54. ne
  55. franchissent le bord droit de l'écran.
  56. </p>
  57. <p>
  58. La particularité de ce jeu est que votre vaisseau est composé de caractères ASCII, ces 127 caractères
  59. standards
  60. qui se retrouvent dans tous les jeux de caractères. Ainsi, chaque caractère forme une <em>brique</em>
  61. pour
  62. votre
  63. vaisseau, et elle peut être détruite. Votre vaisseau se détruit au fur et à mesure selon les dégâts
  64. subis.
  65. Si
  66. votre cockpit (représenté par le caractère <code>m</code>) est détruit, c'est Game Over.
  67. </p>
  68. </div>
  69. <div class="col-lg-12 col-xl-8">
  70. <img class="rounded img-fluid mx-auto d-block" src="/include/images/projets_ascii_game1.png" alt="game screenshot"/>
  71. </div>
  72. </div>
  73. <h4>
  74. Progression
  75. </h4>
  76. <div class="row">
  77. <div class="col-lg-12 col-xl-9">
  78. <img class="rounded img-fluid mx-auto d-block" src="/include/images/projets_ascii_menu.png" alt="menu screenshot"/>
  79. </div>
  80. <div class="col-lg-12 col-xl-3">
  81. <p>
  82. Le joueur peut choisir la planète où il souhaite batailler à partir du menu. Pour chaque planète, une
  83. courte
  84. description permet de comprendre la raison de l'attaque et d'estimer les défenses de l'adversaire. Pour
  85. chaque
  86. planète pacifiée, le joueur obtient une récompense qui lui permet d'utiliser de meilleurs vaisseaux.
  87. Soit la
  88. limite du nombre de blocs sur son vaisseau augmente (apelée <code>CPU</code> dans le jeu) soit il
  89. débloque une
  90. arme ou le bouclier de combat.
  91. </p>
  92. </div>
  93. </div>
  94. <h4>
  95. Faire son propre vaisseau
  96. </h4>
  97. <p>
  98. L'avantage de ce genre de graphisme, c'est que n'importe quel joueur peut créer son propre vaisseau : il suffit
  99. pour cela d'un éditeur de texte.
  100. </p>
  101. <p>
  102. Lors du chargement du vaisseau, le programme va automatiquement reconnaître les combinaisons de caractères
  103. utilisées pour placer le cockpit et les divers équipements disponibles.
  104. </p>
  105. <p>
  106. Voici une courte description de l'arsenal à disposition.
  107. </p>
  108. <div class="row">
  109. <div class="col-xl-4 col-lg-6 col-md-12">
  110. <h5>
  111. Le Gun <code>[-</code>
  112. </h5>
  113. <p>
  114. Le tir le plus classique. Pour l'équiper sur votre vaisseau, il suffit d'écrire <code>[-</code> quelque
  115. part
  116. dans sa structure. Cette arme tire en ligne droite jusqu'à toucher sa cible. Les projectiles sont en
  117. forme de
  118. <code>+</code>.
  119. </p>
  120. <p>
  121. À l'impact, le Gun fait des dégâts localisés autour du point de contact.
  122. </p>
  123. </div>
  124. <div class="col-xl-4 col-lg-6 col-md-12">
  125. <h5>
  126. Le Cutter <code>[|</code>
  127. </h5>
  128. <p>
  129. Similaire au Gun dans sa manière de tirer, c'est à l'impact que le cutter se diférencie. Lorsque le
  130. projectile
  131. en forme de <code>|</code> touche une structure ennemie, tous les blocs situés sur la même ligne
  132. verticale
  133. prennent 50 points de dommages (maxi : 100).
  134. </p>
  135. <p>
  136. Ainsi, si deux projectiles de ce type frappent au même endroit, il est possible de couper un vaisseau
  137. ennemi en
  138. deux. Soyez donc attentifs, ils peuvent s'avérer particulièrement efficaces sur certains types de
  139. structure ...
  140. </p>
  141. </div>
  142. <div class="col-xl-4 col-lg-6 col-md-12">
  143. <h5>
  144. Le Disper <code>[<</code>
  145. </h5>
  146. <p>
  147. Les joueurs reconnaîtront dans cette arme le classique fusil à pompe présent dans la plupart des jeux de
  148. tir.
  149. </p>
  150. <p>
  151. Ainsi, le Disper tire plusieurs balles en même temps, mais les tirs sont dispersés et la portée réduite.
  152. Il faut
  153. savoir que le tir de Disper fait davantage de dégâts au contact.
  154. </p>
  155. <p>
  156. Très efficace pour détruire les ennemis proches de la limite, mais le corps à corps est toujours un
  157. paris risqué
  158. qui se conclue souvent par la perte de deux ou trois éléments de vaisseau ...
  159. </p>
  160. </div>
  161. <div class="col-xl-4 col-lg-6 col-md-12">
  162. <h5>
  163. Le Protoseeker <code>[O</code>
  164. </h5>
  165. <p>
  166. Lorsqu'on le voit en fonctionnement, on a l'impression que le Protoseeker est un pistolet à eau ...
  167. </p>
  168. <p>
  169. Ce qui n'est pas très loin de la réalité. En effet, le Protoseeker est l'arme la plus faible du jeu.
  170. Elle
  171. compense sa faible puissance par une fréquence élevée et un ciblage automatique. Le tir est toujours
  172. orienté
  173. vers le vaisseau ennemi le plus proche.
  174. </p>
  175. <p>
  176. Ce genre d'arme est très aprécié dans les situations confuses, ou l'on passe son temps à esquiver les
  177. projectiles ennemis. Pendant ce temps là, le Protoseeker continue à toucher sa cible, infaillible.
  178. </p>
  179. </div>
  180. <div class="col-xl-4 col-lg-6 col-md-12">
  181. <h5>
  182. Missile Launcher <code>[></code>
  183. </h5>
  184. <p>
  185. Le lanceur de missiles est sans doute l'arme la plus dangereuse du jeu.
  186. </p>
  187. <p>
  188. Ses caractéristiques : des dégâts puissants et localisés, une fréquence réduite ... Mais surtout un
  189. autoguidage
  190. fatal. Ce système de guidage permet au missile de modifier sa trajectoire lors de son vol et de viser
  191. directement le cockpit de l'ennemi le plus proche.
  192. </p>
  193. <p>
  194. Si le Protoseeker arrose l'ennemi d'un tir nourri, le missile contourne les défenses et frappe
  195. directement au
  196. coeur de sa cible.
  197. </p>
  198. <p>
  199. Soyez donc vigilant si vous venez à affronter ce genre d'arme : la modification de trajectoire le rend
  200. très
  201. difficle à éviter. Néanmoins, si vous êtes assez attentif, vous pourrez découvrir une faille dans
  202. l'algorithme
  203. de guidage qui vous permettra d'échapper à l'impact.
  204. </p>
  205. </div>
  206. <div class="col-xl-4 col-lg-6 col-md-12">
  207. <h5>
  208. Brexit launcher <code>[{</code>
  209. </h5>
  210. <p>
  211. Nommé d'après l'événement homonyme (il semblerait que je manquai d'inspiration à ce moment là), le
  212. <strong>Brexit</strong>
  213. est une arme basée sur la division.
  214. </p>
  215. <p>
  216. De puissance comparable au <strong>Gun</strong>, le <strong>Brexit</strong> tire simultanément deux tirs
  217. en
  218. diagonale.
  219. </p>
  220. <p>
  221. Peut être utilisé en arme d'appoint pour couvrir de nouveaux angles d'attaques; ou bien pour faire des
  222. dégâts en
  223. évitant une attaque frontale, ce qui s'avère utile lors de l'attaque d'un vaisseau lourdement armé.
  224. </p>
  225. </div>
  226. <div class="col-xl-4 col-lg-6 col-md-12">
  227. <h5>
  228. Hecto combustion <code>[~</code>
  229. </h5>
  230. <p>
  231. L'hecto combustion est une arme assez spéciale. Cette arme tire un <code>H</code> très lent. Son atout
  232. vient du
  233. fait qu'il n'explose pas à l'impact. Il fait des dégâts et continue sa route.
  234. </p>
  235. <p>
  236. Ainsi, il peut être utilisé pour perforer des blindages épais. Mais sa lenteur le rend assez difficile à
  237. maîtriser.
  238. </p>
  239. </div>
  240. <div class="col-xl-4 col-lg-6 col-md-12">
  241. <h5>
  242. Sniper rifle <code>[=</code>
  243. </h5>
  244. <p>
  245. Le Sniper tire un projectile en ligne droite, très puissant et accélérant.
  246. </p>
  247. <p>
  248. Il fait davantage de dégât avec la distance. À utiliser pour attaquer l'ennemi dès son apparition.
  249. </p>
  250. </div>
  251. <div class="col-xl-4 col-lg-12 col-md-12">
  252. <h5>
  253. Le bouclier de combat <code>()</code>
  254. </h5>
  255. <p>
  256. Le bouclier n'est pas une arme, mais un dispositif de défense.
  257. </p>
  258. <p>
  259. Si le vaisseau possède au moins un bouclier, il apparaît bleuté et entouré d'un champ protecteur. Ce
  260. champ de
  261. force absorbe les dégâts sans endommager la structure.
  262. </p>
  263. <p>
  264. À force d'encaisser les dégâts, le bouclier se vide. Une fois vide, l'enveloppe disparaît : le vaisseau
  265. n'est
  266. plus protégé.
  267. </p>
  268. <p>
  269. Si le vaisseau n'a pas encaissé de dégât pendant un certain laps de temps, le bouclier recommence à se
  270. régénérer.
  271. </p>
  272. <p>
  273. Le nombre de générateurs augmente la capacité du bouclier, c'est à dire le nombre de dégâts qu'il peut
  274. encaisser
  275. avant de disparaître, ainsi que la vitesse de rechargement.
  276. </p>
  277. </div>
  278. </div>
  279. <h5>
  280. Tableau récapitulatif
  281. </h5>
  282. <p>
  283. Voici le résumé de tous les équipements fonctionnels disponibles pour construire votre vaisseau.
  284. </p>
  285. <div class="table-responsive">
  286. <table class="table">
  287. <thead>
  288. <tr>
  289. <th>Nom</th>
  290. <th>Symbole</th>
  291. <th>Projectile</th>
  292. <th>Catégorie</th>
  293. <th title="Charge CPU : coût supplémentaire de ce bloc">CPU</th>
  294. </tr>
  295. </thead>
  296. <tbody>
  297. <tr>
  298. <td>Cockpit</td>
  299. <td><code>m</code></td>
  300. <td></td>
  301. <td>Structure</td>
  302. <td>1</td>
  303. </tr>
  304. <tr>
  305. <td>Bloc</td>
  306. <td title="N'importe quel caractère ASCII">ASCII</td>
  307. <td></td>
  308. <td>Structure</td>
  309. <td>1</td>
  310. </tr>
  311. <tr>
  312. <td>Gun</td>
  313. <td><code>[-</code></td>
  314. <td><code>+</code></td>
  315. <td>Arme</td>
  316. <td>20</td>
  317. </tr>
  318. <tr>
  319. <td>Cutter</td>
  320. <td><code>[|</code></td>
  321. <td><code>|</code></td>
  322. <td>Arme</td>
  323. <td>22</td>
  324. </tr>
  325. <tr>
  326. <td>Disper</td>
  327. <td><code>[<</code></td>
  328. <td><code>*</code></td>
  329. <td>Arme</td>
  330. <td>24</td>
  331. </tr>
  332. <tr>
  333. <td>Protoseeker</td>
  334. <td><code>[O</code></td>
  335. <td><code>O</code></td>
  336. <td>Arme</td>
  337. <td>22</td>
  338. </tr>
  339. <tr>
  340. <td>Missile launcher</td>
  341. <td><code>[></code></td>
  342. <td><code>-></code></td>
  343. <td>Arme</td>
  344. <td>70</td>
  345. </tr>
  346. <tr>
  347. <td>Brexit launcher</td>
  348. <td><code>[{</code></td>
  349. <td><code>X</code></td>
  350. <td>Arme</td>
  351. <td>27</td>
  352. </tr>
  353. <tr>
  354. <td>Hecto combustion</td>
  355. <td><code>[~</code></td>
  356. <td><code>H</code></td>
  357. <td>Arme</td>
  358. <td>56</td>
  359. </tr>
  360. <tr>
  361. <td>Sniper rifle</td>
  362. <td><code>[=</code></td>
  363. <td><code>=</code></td>
  364. <td>Arme</td>
  365. <td>50</td>
  366. </tr>
  367. <tr>
  368. <td>Bouclier</td>
  369. <td><code>()</code></td>
  370. <td></td>
  371. <td>Défense</td>
  372. <td>30</td>
  373. </tr>
  374. </tbody>
  375. </table>
  376. </div>
  377. <h3>
  378. Technologies
  379. </h3>
  380. <p>
  381. Ce jeu a été codé en <strong>C++</strong> avec l'IDE <strong>Code::Blocks</strong>. Je me suis aidé pour cela de
  382. la biblothèque SDL.
  383. </p>
  384. <div class="row">
  385. <div class="col-lg-12 col-xl-6">
  386. <h4>
  387. SDL 1.2
  388. </h4>
  389. <p>
  390. SDL signifie <strong>S</strong>imple <strong>D</strong>irectMedia <strong>L</strong>ayer. Cette
  391. bibliothèque
  392. permet d'ajouter des fonctions élémentaires pour intéragir avec l'utilisateur.
  393. </p>
  394. <p>
  395. Véritable boîte à outils, j'ai utilisé pour ce programme le module graphique pour afficher une fenêtre,
  396. et le
  397. module de gestion d'événements pour récupérer les entrées utilisateur (clavier, souris).
  398. </p>
  399. <p>
  400. La SDL est une bibliothèque bas niveau. C'est à dire qu'elle est très primitive, il faut beaucoup de
  401. code pour
  402. arriver à un rendu correct. Cela demande au programmeur beaucoup de travail, et beaucoup d'organisation.
  403. </p>
  404. <p>
  405. Lien vers <a href="https://www.libsdl.org/">le site officiel de SDL 1.2</a>.
  406. </p>
  407. </div>
  408. <div class="col-lg-12 col-xl-6">
  409. <h4>
  410. SDL GFX
  411. </h4>
  412. <p>
  413. SDL GFX rajoute quelques fonctions graphiques à la SDL. Je l'ai utilisée principalement ici pour sa
  414. fonction qui
  415. permet d'afficher des caractères. Sans cette fonction, difficile d'afficher ces vaisseaux faits de
  416. caractères
  417. ASCII ...
  418. </p>
  419. <p>
  420. Et oui, SDL ne fait pas ça ... quand je vous disais que SDL est une bibliothèque bas niveau et ne
  421. faisait pas
  422. grand choses, je ne plaisantais pas.
  423. </p>
  424. </div>
  425. </div>
  426. <h3>
  427. Téléchargements
  428. </h3>
  429. <div class="alert alert-info">
  430. <img class="float-left" src="https://img.icons8.com/color/90/000000/road-worker.png" alt="worker flat icon">
  431. <p>
  432. Mon site web est encore en <strong>développement</strong>. Cette section sera implémentée dans une
  433. future version.
  434. </p>
  435. <p>
  436. Vous pourrez télécharger les différents exécutables du jeu, que vous ayez un ordinateur sous Linux ou sous
  437. Windows.
  438. </p>
  439. <p>
  440. Repassez plus tard ...
  441. </p>
  442. </div>
  443. <!-- Pagination -->
  444. <ul class="pagination pagination-lg justify-content-center">
  445. <li class="page-item">
  446. <a class="page-link arrow" title="Page précédente" href="pro_static_site.php">&laquo</a>
  447. </li>
  448. <li class="page-item">
  449. <a class="page-link" title="Site web de Jovian" href="pro_static_site.php">1</a>
  450. </li>
  451. <li class="page-item active">
  452. <div class="page-link" title="ASCII Space destroyer">2</div>
  453. </li>
  454. <li class="page-item">
  455. <a class="page-link" title="Pulsar" href="pro_pulsar.php">3</a>
  456. </li>
  457. <li class="page-item">
  458. <a class="page-link" title="Quoridor" href="pro_quoridor.php">4</a>
  459. </li>
  460. <li class="page-item">
  461. <a class="page-link arrow" title="Page suivante" href="pro_pulsar.php">&raquo</a>
  462. </li>
  463. </ul>
  464. </main>
  465. <!-- Footer -->
  466. <?php
  467. include("../include/footer.php")
  468. ?>
  469. <!-- Scripts -->
  470. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
  471. integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  472. crossorigin="anonymous"></script>
  473. <script src="/include/js/bootstrap.js"></script>
  474. </body>
  475. </html>