Journal Mon petit jeu pour navigateur et plus

Posté par  . Licence CC By‑SA.
Étiquettes :
36
19
sept.
2013

Cher journal,
À force de lire des articles sur les performances de javascript, sur la sortie de nouvelles versions de navigateurs, sur la magnificence de l'HTML5 et les merveilles du web, je me suis dit que je devais absolument faire quelque chose.
Le problème est que je ne supporte pas les langages dynamiques (à part python que j'aime bien, mais c'est juste que c'est joli). Problème qui a été résolu quand j'ai entendu parler de emscripten, il est possible d'utiliser du C++ pour générer du javascript.

Il ne me restait donc plus qu'à trouver quoi faire maintenant que j'ai les outils. Je ne me souviens plus de la motivation exacte - il me semble que je me l'enverrai plus tard par IPoT - mais j'ai donc décidé de faire un remake de squarez, un jeu de réflexion a priori non libre de Eric Burgess.
Le principe du jeu est très simple: le plateau est composé d'une grille de 8x8 éléments, parmi 3 possibles et d'un compteur de temps. Le joueur doit trouver 4 éléments identiques formant les coins d'un carré, dès qu'il est sélectionné les coins sont supprimés et les blocs du dessus prennent sa place. Plus le carré délimité est grand, plus le score est important et la jauge de temps remplie.

Il est possible d'y jouer sur http://squarez.meumeu.org/, le jeu est en GPLv3+ et les sources sont ici.

Mais ça ne s'arrête pas là ! Toute la logique du plateau étant en C++, il est possible de faire du natif, un client SDL est en développement, et un serveur pour du multijoueur est déjà disponible. Ce mode est accessible par le navigateur aussi, les règles ont été adaptées: une partie est divisée en manches, pendant chaque manche les joueurs essayent de trouver des carrés et marquent les points du meilleur carré trouvé. À la fin de chaque manche la meilleure sélection est élue et appliquée pour tous les joueurs.

Comme le jeu est libre, vous pouvez contribuer. Il y a plein de points encore à améliorer:
* Des graphismes pour les blocs, pour les distinguer autrement que par les couleurs
* L'amélioration du mode réseau (pour augmenter la robustesse du protocole, et avoir une vraie sérialisation)
* La sélection des formes en un seul geste par les touch events
* Finir la version sdl et la rendre compatible avec le mode en ligne
* D'autres modes de jeu : 1 contre 1 avec un plateau commun, possibilité de changer la gravité sur appareil mobile

  • # Pas mal

    Posté par  . Évalué à 3.

    Bon j'ai testé ton jeu pendant 30 minutes :D

    Mon meilleur score c'est 98 !

    • [^] # Re: Pas mal

      Posté par  (site web personnel) . Évalué à 3.

      Addict a souhait.

      Est-ce possible de faire un package pour Android. Je me suis fait avoir une heure donc pourquoi pas d'autres.

      Merci

      • [^] # Re: Pas mal

        Posté par  . Évalué à 2.

        Oui, je prévois de le rendre plus facilement distribuable, je n'ai pas encore bien regardé comment faire et distribuer des apk.
        Je vais essayer de voir ce weekend, mais je ne voudrais pas délaisser Firefox OS, MeeGo (sur lequel le jeu ne marche pas), webOS et tous les autres OS de téléphone au profit d'Android.
        De plus le mode solo n'a besoin que des fichiers statiques, il pourrait très bien marcher avec juste le mode hors ligne de html5.

        • [^] # Re: Pas mal

          Posté par  (site web personnel) . Évalué à 4.

          Oui, le but des webapps, c'est de pas s'emmerder à tout redevelopper pour chaque plate-forme : une webapp, un navigateur et roule ma poule. J'ai quelques webapps sur le Firefox de mon Android chopées via le marketplace Firefox, no pb.

          Being a sysadmin is easy. As easy as riding a bicycle. Except the bicycle is on fire, you’re on fire and you’re in Hell.

  • # Simple et efficace !

    Posté par  (site web personnel) . Évalué à 4.

    Si je n'avais pas autre chose à faire, j'y resterai bien scotché.

    C'est marrant, depuis que j'ai un smartphone FirefoxOS, je reviens avec plaisir à des jeux plus simples (y a pas des jeux de ouf malades avec les graphismes qui poutrent des mamans ours gravides dans le marketplace) comme le solitaire, et j'y joue bien plus actuellement qu'à ceux de mon Android (celui du boulot) — sauf ceux que j'installe sur le Firefox de l'Android of course.

    Pour ta todo list : faire un bruit quand on sélectionne et quand on détruit un carré.

    Being a sysadmin is easy. As easy as riding a bicycle. Except the bicycle is on fire, you’re on fire and you’re in Hell.

  • # Daltonien...

    Posté par  . Évalué à 5.

    Je suis daltonien, et j'ai énormément de mal à distinguer les carrés verts des jaunes. Sur mon écran, les couleurs sont extrêmement proches (à mes yeux !).

    Y'aurait pas moyen de choisir une table de couleurs ? Parce que là, je suis archi-nul !

    • [^] # Re: Daltonien...

      Posté par  . Évalué à 3.

      Et/ou ajouter des formes dans les carrés, comme ce qui existe avec Frozen Bubble ?

    • [^] # Re: Daltonien...

      Posté par  (site web personnel) . Évalué à 4.

      Ça tombe bien, il en parle :

      Comme le jeu est libre, vous pouvez contribuer. Il y a plein de points encore à améliorer:

      • Des graphismes pour les blocs, pour les distinguer autrement que par les couleurs

      Commentaire sous licence LPRAB - http://sam.zoy.org/lprab/

    • [^] # Re: Daltonien...

      Posté par  . Évalué à 8.

      Je suis daltonien, et j'ai énormément de mal à distinguer les carrés verts des jaunes.

      Tu pourras les chercher longtemps les verts… Y a que des carrés rouge, bleus et jaunes.

      • [^] # Re: Daltonien...

        Posté par  . Évalué à 6.

        Ouf…Après avoir lu son avis et étant daltonien, je me suis tout de même inquiété sur ma vue.
        Merci, Super Guillaume. :)

      • [^] # Re: Daltonien...

        Posté par  . Évalué à 1. Dernière modification le 20 septembre 2013 à 15:14.

        Les daltoniens n'ont-ils pas tendance à confondre le rouge et le vert justement ?

        Edit: Selon wikipedia sur la page du daltonisme:

        "Il existe plusieurs formes de dyschromatopsie partielle, la plus fréquente étant la confusion du vert et du rouge. Les autres formes de daltonisme sont nettement plus rares, comme la confusion du bleu et du jaune, la plus rare de toutes étant la déficience totale de la perception des couleurs (achromatopsie), où le sujet ne perçoit que des nuances de gris."

        • [^] # Re: Daltonien...

          Posté par  . Évalué à 2.

          Les daltoniens n'ont-ils pas tendance à confondre le rouge et le vert justement ?

          Oui mais les couleurs ont été choisies pour les protanopes, pas les deutéranopes… Mais on peut changer les couleurs avec un inspecteur CSS.

  • # emscripten

    Posté par  (site web personnel) . Évalué à 2.

    As-tu rencontré des problèmes à l'utilisation d'emscripten ? J'ai essayé de l'utiliser plusieurs fois sur une grosse base de code et j'ai toujours rencontré un paquet de petits problèmes dans des entêtes standards comme climits et dans Boost.

    • [^] # Re: emscripten

      Posté par  . Évalué à 3.

      Oui, il y a des limitations avec emscripten:
      Il est impossible d'utiliser des headers système en dehors de ceux qui ont été portés par emscripten directement. On a donc une partie de sdl, la libc/libc++ et de l'openGL. Comme le projet est fait de zéro j'ai utilisé du c++11 pour remplacer boost, et aucune librairie externe.

      Le lien entre javascript natif et c++ n'est pas encore totalement intégré, il faut exporter les classes, méthodes et membres que l'on veut utiliser par un système de macro et template, les destructeurs ne sont pas appelés automatiquement pour les objets référencés en javascript.

      La génération de code est très lente quand on demande d'appliquer les optimisations, il faut 45s à partir des objets en utilisant plusieurs threads sur un PC puissant.

      On peut très bien outrepasser les limitations en incluant toutes les librairies dont on a besoin dans les sources, emscripten peut en faire du javascript par la suite. Un système pour faire des javascripts partagés est à l'étude j'ai cru comprendre, je ne m'y suis pas intéressé pour le moment.

  • # OUI !

    Posté par  . Évalué à 4. Dernière modification le 20 septembre 2013 à 07:53.

    Si tu as le temps et que tu aimes le python, pourquoi pas faire le jeu avec Kivy ? :D
    Je dis ça, je dis rien !

    • [^] # Re: OUI !

      Posté par  . Évalué à 3.

      Ah c'est malin ça, maintenant je vais devoir tout recoder !
      Je n'avais pas fait de recherche sur les technologies possible pour faire le jeu, en fait c'est plutôt l'inverse, j'ai cherché quel jeu faire avec emscripten.
      Et je ne connaissais pas Kivy, il faudra faire un journal ou une dépêche pour le présenter, ça donnera des idées à d'autres.

      • [^] # Re: OUI !

        Posté par  . Évalué à 1.

        https://linuxfr.org/recherche?order=date&q=kivy&utf8=%E2%9C%93

        Depending on the time of day, the French go either way.

        • [^] # Re: OUI !

          Posté par  . Évalué à 4. Dernière modification le 20 septembre 2013 à 09:52.

          La dernière dépêche de présentation traite de la 1.0.7 (2011)
          On en est à la 1.6.0 stable et 1.8.0 dev donc peut-être vais-je me lancer dans la dépêche.

          J'en avais parlé dans la tribune de rédaction fut un temps mais c'est resté lettre morte ;'(

  • # petite amélioration

    Posté par  (site web personnel) . Évalué à 2.

    Je joue souvent à un jeu qui ressemble à part qu'il n'est pas obligé de faire des carrés (les rectangles fonctionnement aussi) et dans ce jeu on peut se contenter de cliquer sur les 2 cases diagonales des zone à détruire et si les deux autres sont de la même couleur ça enlève la zone.
    Cette petite touche est ergonomique et appréciable surtout si tu veux faire un mode contre la montre (meilleur score en x minutes).

    Très sympa comme initiative merci.
    Si il te prend l'envie de nous faire un retour sur emscripten et éventuellement un ou deux conseil ça pourrait sûrement intéresser quelques personnes.

    kentoc'h mervel eget bezan saotred

    • [^] # Re: petite amélioration

      Posté par  (site web personnel) . Évalué à 6.

      cliquer sur les 2 cases diagonales des zone à détruire et si les deux autres sont de la même couleur ça enlève la zone.

      Oui 2 coins suffisent pour définir un carré. Cette amélioration serait appréciable ! :)

      Sinon, le jeu est très sympa, les animations sont fluides etc. Beau boulot !

    • [^] # Re: petite amélioration

      Posté par  (site web personnel) . Évalué à 3.

      Par contre comme le jeu autorise les carrés obliques, définir un rectangle en 2 clics ça risque d'être compliqué.

    • [^] # Re: petite amélioration

      Posté par  (site web personnel) . Évalué à 5.

      Si ce sont des carrés, un côté suffit, et le logiciel choisi le bon bord :)
      --> []

      Pourquoi bloquer la publicité et les traqueurs : https://greboca.com/Pourquoi-bloquer-la-publicite-et-les-traqueurs.html

  • # Besoin de graphismes?

    Posté par  (site web personnel) . Évalué à 3.

    J'aime bien le principe de ce jeu. Est-ce que tu as une idée de thème pour les graphismes? Je peux essayer de faire quelques sprites pour les blocs si tu veux.

    Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

    • [^] # Re: Besoin de graphismes?

      Posté par  . Évalué à 1.

      Je n'ai pas vraiment de thème précis, mais j'ai des contraintes: le jeu sur navigateur se redimensionne aux dimensions de la fenêtre et il ne faut pas que les formes soient trop orientés pour pas que ça privilégie un sens sur les carrés.

      Je pensais faire des carrés avec une forme géométrique gravée à l'intérieur, en s'inspirant de Tetris Attack par exemple. On doit pouvoir le faire en svg, si les navigateurs ne sont pas trop lents pour l'afficher.

      Pour changer les graphismes il n'est pas nécessaire de recompiler le projet, il suffit de copier les fichiers html, js et javascript présents sur le serveur et changer les propriétés présentes dans les premières lignes de game.css.

      • [^] # Re: Besoin de graphismes?

        Posté par  (site web personnel) . Évalué à 2.

        On doit pouvoir le faire en svg, si les navigateurs ne sont pas trop lents pour l'afficher.

        C'est déjà pas très rapide sur mon PC ( Intel Core 2 Duo E4400 / 2.0 GHz, NVIDIA Quadro NVS 290, 4 Go de RAM ) :-(

        Pour changer les graphismes il n'est pas nécessaire de recompiler le projet, il suffit de copier les fichiers html, js et javascript présents sur le serveur et changer les propriétés présentes dans les premières lignes de game.css.

        Je regarderais ça!

        Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

      • [^] # Re: Besoin de graphismes?

        Posté par  (site web personnel) . Évalué à 3.

        j'ai justement pensé à Tetris Attack, et une fonctionalité m'a manqué, la possibilité de sélectionner un carré alors qu'un autre est en train d'être détruit.

        Je m'explique, si je rencontre ce cas là (et je l'ai rencontré) :

        ------------------
---------X---X----
------------------
-----N---N--------
------------------
---------X---X----
------------------
-----N---N--------
------------------

        En bref deux carrés intersectés (ça se dit ?), lorsque je vais détruire le carré N je vais déformer le carré X (ou l'inverse) et donc le détruire et c'est frustrant. Plutôt que transformer ce cas d'utilisation en frustration, on peut le transformer en stress puis en récompense ! :p

        On pourrait imaginer que marquer un carré gèle la chute du temps d'une durée proportionnelle à la valeur du carré, ce qui permet de faire des combos le temps de ce gel (on marque un carré qui gèle le temps qui permet de marquer un autre carré qui permet de marquer un autre carré). À la fin du gel la totalité des points du combo s'ajoute au temps gagné, comme d'habitude.

        Il y a un truc similaire dans Tetris Attack, et c'est grisant. Dans Tetris Attack (pour ceux qui ne connaissent pas ça fonctionne par alignement et non par carré, voir par exemple le clone libre mais pas aussi fun Crack Attack) on peut aligner trois blocs A qui vont libérer un bloc B, et pendant que les blocs A sont détruit, si on est très rapide, on peut aligner deux blocs B de manière à ce que la chute du bloc B s'aligne avec ces deux autres, et cela est compté comme un même assemblage de 6 blocs au lieu de deux assemblages de trois blocs, ce qui je crois a plus de valeur.

        Visuellement, on pourrait faire en sorte que le tracé qui matérialise le carré sélectionné clignote (et peut être en accélérant jusqu'à la fin du freeze), et peut être que la barre de temps à droite pourrait clignoter au même rythme ! :)

        ce commentaire est sous licence cc by 4 et précédentes

      • [^] # Re: Besoin de graphismes?

        Posté par  (site web personnel) . Évalué à 1.

        J'ai fait un petit essai avec les poncifs du jeu de rôle guerrier/voleur/magicienne: http://bci.im/tmp/squarrez.png

        J'ai imaginé que cela permettrait d'introduire d'autres éléments dans le jeu: des armes, des sorts…

        Le post ci-dessus est une grosse connerie, ne le lisez pas sérieusement.

      • [^] # Re: Besoin de graphismes?

        Posté par  (site web personnel) . Évalué à 2.

        Les carrés de FreeSiege pourraient convenir : http://freesiege.sourceforge.net/screens/screen0.png (les images sont là : https://github.com/MCMic/freesiege/tree/master/sprites magic.png, wood.png, steel.png, fire.png)
        Ça vient de glest, yen a d'autres dispos juste à colorer : http://opengameart.org/content/magic-and-mechanic-in-game-interface-icons

  • # sympa

    Posté par  (site web personnel) . Évalué à 1.

    En tout cas c'est bien fait. Mais online on ne voit que son propre score, pas celui du ou des autres joueurs.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.