+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Les réalisations de la communauté (https://jeuweb.org/forumdisplay.php?fid=39)
+--- Forum : Jeux jouables (https://jeuweb.org/forumdisplay.php?fid=52)
+--- Sujet : Dracca & Dragon games (/showthread.php?tid=7840)
Dracca & Dragon games - Xenos - 14-07-2017
Type de jeu: Jeu web
Principe:
Rejoindre son oeuf sans percuter un autre dragon
Description complète:
Adapté d'un ancien mini-jeu issue de Les 9 destins de Valdo (dont la musique et le level design sont repris), Dragon Eggs vous défie d'aider chaque dragon à rejoindre son oeuf, en évitant de percuter les autres dragons ou les créatures volantes qui peuplent le niveau de jeu.
Mots-clef:
Monde Fantastique, Jeu d'énigmes, Jeu solo, Temps réel, Compatible mobile
| Durée d'une session de jeu | 5 minutes |
|---|---|
| Fréquence de jeu | Moins d'une fois par semaine |
| Financement | Aucun |
| Technologies utilisées | JS (vanilla) |
| L'équipe de création | Xenos |
Pourquoi faites-vous ce jeu?: J'aimais bien Valdo, j'avais envie de ressortir certains de leurs mini-jeux
Comment jouer?: Rendez-vous sur le site du jeu, jouez. Pas d'inscription ni rien.
Précisions finales:
De l'autre côté du rideau
Parce qu'on est aussi des créateurs, passons un peu du côté back-office. Pour les technos, c'est simple: HTML, SVG, CSS et javascript. Toute la partie animation est d'ailleurs gérée en SVG, y compris les déplacements (via animateMotion)! L'intérêt étant d'avoir très peu de code JS. Le JS se charge surtout des interactions et des prises de décision (quand un dragon arrive à un carrefour, par où repart-il? Ou pour tourner la flèche quand on clique un carrefour).
Chaque chemin de déplacement est modélisé en SVG via un "path", et getTotalPathLength/getPointAtLength permettent d'en récupérer les informations en JS (donc, je peux faire des niveaux avec des chemins courbes). Un clic sur le "toggle debug mode" en bas vous permettra de voir ces chemins de déplacement.
Le calcul de collision est un calcul prédictif: sachant à quel moment le personnage est entré sur un chemin, sachant sa vitesse, sachant la direction de déplacement sur ce chemin, et sachant les mêmes informations sur les autres personnages actuellement sur ce chemin, il est facile de prédire à quel moment aura lieu la collision (si elle a lieu). Un bête Timeout se déclenche alors, et fera perdre la partie à ce moment donné.
Gamedesign
Actuellement, je n'ai qu'un seul niveau, mais je compte:
• Proposer plusieurs niveaux craftés à la main
• Commencer par un niveau bien plus simple, puis complexifier progressivement
• Rajouter des ennemis, qui peuvent se croiser (eux!), et éventuellement, les faire se bouffer entre eux
• Rajouter des interrupteurs et des "portes", de sorte que certains oeufs ne puissent être accédés que si la porte y conduisant a été ouverte (ça, c'est repris aussi de Valdo)
• Modifier les skins, pour proposer des environnements plus variés
• Sauver la progression (car s'ils y a plusieurs niveaux, il faut trouver un moyen de sauver son avancement)
• Rajouter un timer, soit sur chaque oeuf (ie: récupérer tel oeuf avant tant de temps), soit globalement
• Peut-être rajouter des conditions, type "Wisiarr peut croiser un autre dragon volant (car lui ne vole pas), mais ne peux pas croiser d'ennemi/de dragon au sol"
• Intégrer des "oeufs génériques" (ie: un dragon qui peut ramasser n'importe quel oeuf, ou un oeuf qui peut être ramassé par plusieurs dragons)
• Avoir des dragons à plusieurs oeufs, à récupérer dans l'ordre ou pas (ie: Flafia doit ramasser ses 3 oeufs, et Karlexia doit en ramasser 2, dans le bon ordre, le 2nd n'apparaissant qu'une fois le 1er ramassé)
Par la suite aussi, j'essayerai de réutiliser ce petit moteur de jeu JS pour d'autres gameplays (si vous connaissez, j'aimerai aussi reprendre le gameplay de "Dr Brain voyage dans le temps, niveau 'Embouteillage'", qui est très similaire au gameplay de Dragon Eggs, sauf qu'on doit d'abord tourner les flèches, puis lancer les dragons, et une fois les dragons en vol, on ne peut plus rien changer [c'est donc un jeu de planification]).
PS: @niahoo: il y a 0 inscription nécessaire cette fois, comme pour le jeu de Senet
RE: Dracca - Dragon eggs - @lucard - 14-07-2017
Et quand tous les dragons ont la même couleur on fait comment pour connaître l'oeuf associé ?
Screenshot_20170714-224008.png (Taille : 521,92 Ko / Téléchargements : 9)
RE: Dracca - Dragon eggs - MeTaLLiQuE - 15-07-2017
Yop,
Tu fais comme moi ^^ tu fais tous les oeufs ^^
RE: Dracca - Dragon eggs - Xenos - 16-07-2017
Les sprites n'étant pas définitives, ce soucis s'en ira de lui-même rapidement. En attendant, il faut diagonalement traverser le terrain
La couleur des oeufs étant fixe, tu peux être sûr qu'elles correspondent à ma screen.Je ne comprends vraiment pas pourquoi webkit s'obstine bêtement à refuser l'implémentation des filters... Ils ont mis bien 4-5 ans à faire tomber le prefix "-webkit-", et n'ont toujours pas implémenter le support sur SVG...
RE: Dracca - Dragon eggs - incodewetrust - 16-07-2017
Très sympa au niveau du concept même si j'ai mis du temps à comprendre comment bloquer ces satanés goëlands !
Par contre j'ai tendance à me tromper en appuyant sur close plutôt que sur try again.
RE: Dracca - Dragon eggs - Xenos - 17-07-2017
J'ai modifié la position des boutons lors d'une fin de partie, et j'ai mis en place la mécanique pour les niveaux de jeu.
Bon, actuellement, je n'ai qu'un niveau (le niveau précédent est maintenant caché, je vais essayer de faire une complexité progressive d'abord) mais je rajouterai les autres petit à petit (ce niveau va vous paraitre franchement trop simple du coup ^^ )
RE: Dracca - Dragon eggs - Xenos - 17-07-2017
![[Image: dracca-spinoff-1.png]](https://xenos.reinom.com/dragon-eggs/screenshot/dracca-spinoff-1.png)
Niveau 2 rajouté!
Je pense que je ne vais pas tarder à migrer ce projet vers https://play.en.dracca.com et lui donner un vrai système de déploiement... hmm
RE: Dracca - Dragon eggs - Xenos - 19-07-2017
Salutations,
et voici un second jeu, d'apparence semblable au premier mais au gameplay bien différent: le dragon ne bouge plus seul. Vous devez le déplacer (en utilisant les flèches du clavier ou en touchant l'écran pour les smartphones [je ne t'ai pas oublié, @lucard
]) pour pousser les oeufs dans leurs nids, avant que le temps imparti ne soit écoulé.Attention à ne pas bloquer un oeuf dans un coin, car vous ne pourrez alors plus l'en déloger ! C'est donc un jeu un peu plus "réfléchi" que le précédent, puisqu'on a le temps de penser (si on ne fait rien, alors rien ne bouge, donc à part la limite générale de temps, rien ne nous oblige à agir vite).
![[Image: dracca-spinoff-0.png]](https://xenos.reinom.com/nest-eggs/screenshot/dracca-spinoff-0.png)
Adresse du jeu: https://xenos.reinom.com/nest-eggs/
Et je rajouterai de nouveaux niveaux dans ces deux jeux au fil du temps (en attendant de faire un générateur de niveaux, peut-être un jour)
RE: Dracca - Dragon eggs - @lucard - 20-07-2017
Superbe
j'ai plein d'idée de niveau
RE: Dracca - Dragon eggs - Xenos - 20-07-2017
Alors n'hésite pas à m'en faire part
Eventuellement, je peux même essayer d'ouvrir un éditeur de niveaux... Mais je ne sais pas trop quelles implications cela va avoir hmm