{"id":705,"date":"2024-08-27T10:06:24","date_gmt":"2024-08-27T10:06:24","guid":{"rendered":"https:\/\/tassadanslesmyriades.fr\/?p=705"},"modified":"2024-08-27T10:27:08","modified_gmt":"2024-08-27T10:27:08","slug":"202408_-creation-dun-mini-jeu-narratif-didactique-sur-la-botanique","status":"publish","type":"post","link":"https:\/\/tassadanslesmyriades.fr\/?p=705","title":{"rendered":"202408_ Cr\u00e9ation d&rsquo;un mini-jeu narratif didactique sur la botanique"},"content":{"rendered":"\n<p>J&rsquo;\u00e9cris un petit script en python, html-css, pour un jeu narratif sur la botanique. C&rsquo;est un truc court pour commencer, parce que je ne suis pas si forte en langage de programmation et je dois beaucoup me documenter. Je suis sur VS code et j&rsquo;utilise aussi l&rsquo;IA pour la trame et comprendre \u00e0 quoi sert chaque fonction, chaque bloc, etc.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> body {\n            font-family: 'Arial', sans-serif;\n            background-color: #e0f2f1; \/* Tr\u00e8s clair, moderne *\/\n            color: #004d40; \/* Vert fonc\u00e9 *\/\n            margin: 0;\n            padding: 0;\n        }<\/code><\/pre>\n\n\n\n<p>Je sais d\u00e9j\u00e0 r\u00e9diger du html et des fichiers css, sans trop de probl\u00e8me, mais parfois, je me perds dans ce que je veux \u00e0 cause de mes soucis d&rsquo;attention. Sur VS code au moins, c&rsquo;est pratique de visualiser rapidement et d&rsquo;avoir des couleurs mais pas trop flashy ni trop vari\u00e9es, cela m&rsquo;aide \u00e0 me concentrer.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\r\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Python\" >Python<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Trame_du_mini-game\" >Trame du mini-game<\/a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Creez_une_potion_magique_et_sauvez_la_planete\" >Cr\u00e9ez une potion magique et sauvez la plan\u00e8te !<\/a><ul class='ez-toc-list-level-6' ><li class='ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Mission_1_Faire_pousser_une_graine\" >Mission 1 : Faire pousser une graine<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Mission_2_Faire_une_bouture\" >Mission 2 : Faire une bouture<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Mission_3_Cultiver_un_legume_en_permaculture\" >Mission 3 : Cultiver un l\u00e9gume en permaculture<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Mission_4_Plantes_spontanees_et_biodiversite\" >Mission 4 : Plantes spontan\u00e9es et biodiversit\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Mission_5_Comprendre_la_biodiversite\" >Mission 5 : Comprendre la biodiversit\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Creez_Votre_Potion_Magique\" >Cr\u00e9ez Votre Potion Magique<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-6'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/tassadanslesmyriades.fr\/?p=705\/#Un_design_moderne_et_retro_en_meme_temps\" >Un design moderne et r\u00e9tro en m\u00eame temps<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\r\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Python\"><\/span>Python<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>J&rsquo;ai essay\u00e9 des choses comme :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> # Fonction pour afficher la potion finale\n        def show_final_potion():\n            container = document&#91;\"potion-container\"]\n            container.clear()\n            container &lt;= html.H2(\"Vous avez termin\u00e9 toutes les missions !\")\n            container &lt;= html.P(\"Avec les ingr\u00e9dients que vous avez collect\u00e9s, vous allez maintenant cr\u00e9er la potion magique pour sauver la plan\u00e8te.\")\n            container &lt;= html.UL(&#91;html.LI(ingredient) for ingredient in ingredients])\n            container &lt;= html.P(\"M\u00e9langez-les avec soin et prononcez les mots magiques...\")\n            container &lt;= html.P(\"Potion magique r\u00e9ussie ! La plan\u00e8te est sauv\u00e9e !\")\n\n            document&#91;\"potion-container\"].style.display = \"block\"<\/code><\/pre>\n\n\n\n<p>Mais je ne suis pas 100% convaincue. D&rsquo;un point de vue strictement narratif, je veux que cela soit tr\u00e8s court. Voici la trame :<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Trame_du_mini-game\"><\/span>Trame du mini-game<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h5 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creez_une_potion_magique_et_sauvez_la_planete\"><\/span><strong><em>Cr\u00e9ez une potion magique et sauvez la plan\u00e8te !<\/em><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h5>\n\n\n\n<p>C&rsquo;est un jeu narratif interactif. Il s&rsquo;agit d&rsquo;une super aventure botanique o\u00f9 vous d\u00e9couvrirez des secrets fascinants sur les plantes tout en remplissant des missions passionnantes. <strong><em>Attention <\/em><\/strong>: ce jeu est r\u00e9serv\u00e9 aux <strong>d\u00e9butant-es <\/strong>qui n&rsquo;y connaissent pas grand chose en mati\u00e8re de plantes (donc peut-\u00eatre, surtout les tr\u00e8s jeunes ?).<\/p>\n\n\n\n<p>\u00c0 la fin, vous serez en mesure de cr\u00e9er une potion magique qui sauvera notre plan\u00e8te. Voici ce qui vous attend :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p id=\"intro\">Bienvenue dans le jeu ! Accomplissez cinq missions pour obtenir des ingr\u00e9dients et cr\u00e9er une potion magique. \u00cates-vous pr\u00eat \u00e0 commencer ?&lt;\/p>\n        &lt;button id=\"start-button\">Commencer l'aventure&lt;\/button><\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mission_1_Faire_pousser_une_graine\"><\/span><strong>Mission 1 : Faire pousser une graine<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Apprenez les bases de la germination des graines. Vous d\u00e9couvrirez les \u00e9l\u00e9ments essentiels dont les graines ont besoin pour germer et grandir : l&rsquo;eau, le sol, et la lumi\u00e8re. D\u00e9couvrez les techniques pour r\u00e9ussir \u00e0 faire pousser une graine et obtenez une <strong>Graine de Ch\u00eane<\/strong> comme r\u00e9compense !<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong> : Comprenez les besoins fondamentaux des graines pour une germination r\u00e9ussie.<\/li>\n\n\n\n<li><strong>Image<\/strong> : <a>Graine de Ch\u00eane<\/a><\/li>\n\n\n\n<li><strong>Audio<\/strong> : <a>\u00c9coutez le son de la germination<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mission_2_Faire_une_bouture\"><\/span><strong>Mission 2 : Faire une bouture<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Explorez l&rsquo;art de la bouture. Apprenez comment prendre une partie d&rsquo;une plante pour cr\u00e9er une nouvelle plante. D\u00e9couvrez les techniques pour faire une bouture r\u00e9ussie et recevez une <strong>Bouture de Lavande<\/strong> en r\u00e9compense !<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong> : D\u00e9couvrez comment faire une bouture et les soins n\u00e9cessaires pour qu&rsquo;elle devienne une nouvelle plante.<\/li>\n\n\n\n<li><strong>Image<\/strong> : <a>Bouture de Lavande<\/a><\/li>\n\n\n\n<li><strong>Audio<\/strong> : <a>\u00c9coutez le son des boutures<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mission_3_Cultiver_un_legume_en_permaculture\"><\/span><strong>Mission 3 : Cultiver un l\u00e9gume en permaculture<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Quels sont les principes de la permaculture pour cultiver des l\u00e9gumes ? Apprenez comment cr\u00e9er un sol fertile et choisir des plantes adapt\u00e9es. Recevez des <strong>Tomates en permaculture<\/strong> comme ingr\u00e9dient pour votre potion !<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong> : D\u00e9couvrez les principes de la permaculture et comment cultiver des l\u00e9gumes de mani\u00e8re durable.<\/li>\n\n\n\n<li><strong>Image<\/strong> : <a>Cultiver en Permaculture<\/a><\/li>\n\n\n\n<li><strong>Audio<\/strong> : <a>\u00c9coutez le son de la permaculture<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mission_4_Plantes_spontanees_et_biodiversite\"><\/span><strong>Mission 4 : Plantes spontan\u00e9es et biodiversit\u00e9<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Explorez les plantes spontan\u00e9es comme le <strong>Pissenlit<\/strong> et leur r\u00f4le dans les \u00e9cosyst\u00e8mes. Comprenez leur importance pour la biodiversit\u00e9 et recevez un <strong>Pissenlit<\/strong> comme r\u00e9compense pour votre potion !<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong> : D\u00e9couvrez les plantes spontan\u00e9es et leur impact sur la biodiversit\u00e9 locale.<\/li>\n\n\n\n<li><strong>Image<\/strong> : <a>Pissenlit<\/a><\/li>\n\n\n\n<li><strong>Audio<\/strong> : <a>\u00c9coutez le son du pissenlit<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Mission_5_Comprendre_la_biodiversite\"><\/span><strong>Mission 5 : Comprendre la biodiversit\u00e9<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Apprenez l&rsquo;importance de la biodiversit\u00e9 avec la <strong>Plante \u00c9chinac\u00e9e<\/strong>. D\u00e9couvrez comment les diff\u00e9rentes esp\u00e8ces contribuent \u00e0 un \u00e9cosyst\u00e8me sain et obtenez un <strong>\u00c9chinac\u00e9e<\/strong> pour terminer votre potion.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Description<\/strong> : Explorez le concept de biodiversit\u00e9 et son r\u00f4le essentiel pour les \u00e9cosyst\u00e8mes.<\/li>\n\n\n\n<li><strong>Image<\/strong> : <a>\u00c9chinac\u00e9e<\/a><\/li>\n\n\n\n<li><strong>Audio<\/strong> : <a>\u00c9coutez le son de l&rsquo;\u00e9chinac\u00e9e<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Creez_Votre_Potion_Magique\"><\/span><strong>Cr\u00e9ez Votre Potion Magique<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Apr\u00e8s avoir compl\u00e9t\u00e9 toutes les missions et collect\u00e9 les ingr\u00e9dients, il est temps de cr\u00e9er votre potion magique ! M\u00e9langez vos ingr\u00e9dients avec soin et d\u00e9couvrez comment vous avez sauv\u00e9 la plan\u00e8te gr\u00e2ce \u00e0 vos nouvelles connaissances.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image<\/strong> : <a>Potion Magique<\/a><\/li>\n<\/ul>\n\n\n\n<h6 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_design_moderne_et_retro_en_meme_temps\"><\/span><strong>Un design moderne et r\u00e9tro en m\u00eame temps<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h6>\n\n\n\n<p>Ce jeu allie modernit\u00e9 et charme r\u00e9tro des ann\u00e9es 90 avec des couleurs fra\u00eeches et une interface dynamique. Les boutons verts et les effets d&rsquo;ombre ajoutent une touche vintage tout en restant \u00e9l\u00e9gants et fonctionnels.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Update<\/strong> : ajout de <em>javascript<\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><sup data-fn=\"196604f3-8782-4c05-abca-3e2606ff5bbd\" class=\"fn\"><a href=\"#196604f3-8782-4c05-abca-3e2606ff5bbd\" id=\"196604f3-8782-4c05-abca-3e2606ff5bbd-link\">1<\/a><\/sup> Le premier jet du code javascript est mauuuvais<\/code><\/pre>\n\n\n\n<p><strong>Update 2 <\/strong>: \u00e7a y est j&rsquo;suis d\u00e9j\u00e0 d\u00e9courag\u00e9e<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Le jeu sera libre et open source.<\/strong><\/p>\n\n\n<ol class=\"wp-block-footnotes\"><li id=\"196604f3-8782-4c05-abca-3e2606ff5bbd\">bah ouais, c&rsquo;est mauvais <a href=\"#196604f3-8782-4c05-abca-3e2606ff5bbd-link\" aria-label=\"Aller \u00e0 la note de bas de page 1\">\u21a9\ufe0e<\/a><\/li><\/ol>","protected":false},"excerpt":{"rendered":"<p>je cr\u00e9\u00e9 un mini jeu<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"[{\"content\":\"bah ouais, c'est mauvais\",\"id\":\"196604f3-8782-4c05-abca-3e2606ff5bbd\"}]"},"categories":[9],"tags":[37,68,10],"class_list":["post-705","post","type-post","status-publish","format-standard","hentry","category-tech","tag-divertissement","tag-jeu","tag-tech"],"_links":{"self":[{"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=\/wp\/v2\/posts\/705","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=705"}],"version-history":[{"count":7,"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=\/wp\/v2\/posts\/705\/revisions"}],"predecessor-version":[{"id":713,"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=\/wp\/v2\/posts\/705\/revisions\/713"}],"wp:attachment":[{"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tassadanslesmyriades.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}