URL: https://linuxfr.org/users/mothsart/journaux/zebulon
Title: Zébulon
Authors: mothsART
Date: 2021年03月21日T22:16:06+01:00
License: CC By-SA
Tags: zebulon, jeu, 2d et web
Score: 29
# Intro
Je vous présente un petit jeu sans prétention que j'ai créé en full web : [Zébulon]( https://mothsart.github.io/labo/frontend/zebulon)
Pour un peu d'historique, je suis engagé depuis quelques années dans l'association Primtux.
Dans ce cadre, nous créons depuis maintenant 2 ans des petites applis éducatifs.
Pour plusieurs d'entre eux, c'est le support des raspberry PI qui nous a motivé à passé du côté de la création.
En effet, pas mal de soft émulé sur Wine n'était tout simplement pas utilisables dans ce contexte.
Pour en revenir à Zébulon, c'est une adaptation d'un petit applicatif dans la suite éducative "ClicMenu" en mode "web".
L'objectif est d'avoir le même support éducatif tout en se renouvelant un peu niveau graphique, gameplay etc.
Au niveau éducatif, il est destiné au cycle 1 et 2 (donc maternelle et début primaire) afin d'apprendre à se repérer dans l'espace et utiliser le clavier.
C'est donc simple et ludique.
# License
J'ai choisi de mettre le projet sous GPL 3 sans une réflexion très approfondi.
Je n'ai pas vraiment de licence sur le contenu et les images... on va dire que c'est en utilisation libre et illimités.
# Sous le capot
Les graphismes et le code sont du même auteur.
Pour le graphisme, j'ai opté pour du pixel art : pour la nostalgie de la grande époque, sa relative simplicité et rapidité de création etc.
C'est fait via Gimp et les fichiers xcf sont également disponibles.
Je suis pas graphiste de métier donc c'est sans doute pas d'une finition pro mais en même temps, vu la cible, c'est très bien ainsi.
Pour le code, c'est du simple HTML/CSS/Javascript vanilla.
Pas de frameworks ni de libs car je trouve que c'est totalement dérisoire pour ce type de projet.
Une grande partir des animations sont gérés avec un peu d'astuce en CSS et les parties réellement interactives sont pilotés par des balises <canvas>.
le code devrait donc être assez simple à appréhender et peu être un bon outil de démarrage pour comprendre certaines notions.
Pour bien séparer le code de l'ajout de nouveaux niveaux, j'ai essayé de découpler au max en ayant des fichiers par niveau qui ne font que du déclaratif.
On déclare donc les données et on laisse la magie opérer.
# Apprentissage auprès de mon fils
Mon fiston de 8 ans (geek dans l'âme... les chiens ne font pas des chats) a bien suivi le développement du jeu et j'ai essayé de lui faire comprend certaines notions avec des mots adaptés.
J'estime qu'il a bien compris la notion : 
- de coordonnées (axes des abscisses et ordonnées)
- des calques et des masques
- le principe tuiles (ou slices)
- de collision
- d’événementiel
- de conditions
- etc.
Bref, si on arrive à se focaliser sur les grands principes (et non sur des détails de syntaxes, nommages, archi etc), un enfant de 8 ans est tout à fait capable de comprendre déjà pas mal de notions d'algorithmie élémentaires.
# Show me the code
Pour accéder au code, rien de plus banal qu'un repo GIT (sous github) : https://github.com/mothsART/zebulon
## Et à l'avenir ?
Voici la roadmap possible
- Ajout de niveaux (un jeu avec 2 niveaux, c'est assez tristounet) !
- Disponibles pour d'autres langues : l'anglais étant la priorité
- Ajouts des bruitages (je sens que je vais travailler le beatbox)
- Instructions lus à haute voix : les maternelles ne sont pas sensés savoir lire. Je vais sans doute l'interfacer avec [gSpeech](https://linuxfr.org/news/gspeech-passe-en-0-10).
- Une fin un peu plus jolie qu'actuellement.
- Rajout de nouvelles interactions : des niveaux avec des ennemies
- etc.
# Conclusion
J'ai trouvé le challenge plutôt amusant.
Le graphisme m'a sans doute pris les 3/4 du temps...
En dehors de cet aspect, je trouve qu'il est assez facile de faire des petits jeux vidéos rapides dispo dans un navigateur.
Les outils du web actuels se sont quand même vachement améliorés et avec quelques connaissances, un peu de rigueur on arrive vite à un résultat satisfaisant.
Du coup, c'est aussi un message d'encouragement pour se lancer à l'eau : faire un petit jeu ne demande clairement plus d'être à la fois un génie et un bosseur chevronné ou d'utiliser un framework dédié.
Mot de la fin : "have fun" !
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/users/mothsart/journaux/zebulon.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/users/mothsart/journaux/zebulon.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>