Générateur de cartes pour petits jeux.

Télécharger le projet
Commenter

Description

À l'heure où fleurissent une multitude de petits jeux sur le WEB j'ai pensé que ce "petit" exemple pourrait en éclairer certains voire en motiver d'autres :) J'ai essayé de faire un truc bien clean, autant dans la conception que dans l'écriture (j'ai mis des commentaires partout, en anglais soit dit en passant).
Allons sans plus attendre dans le vif du sujet. Tout d'abord un petit fichier XML dans lequel vous décrivez votre petit monde, case par case : type de sol souhaité, puis entités (comprendre un objet quelconque, vivant ou non). Je vous rassure on peut aussi spécifier certaines choses pour l'ensemble de la carte afin d'alléger l'écriture qui devient vite fastidieuse au fur et à mesure que vous enrichissez le décor.
Si quelqu'un est chaud il pourra nous faire un éditeur :) En attendant je vous ai mis quelques petits sprites et deux exemples simples. Et je vous laisse regarder par vous même pour le reste :)

Au niveau technos, en bref, j'ai mêlé XML, XSL, HTML et JavaScript. Etant donné que les intéractions avec ces petits mondes - ce que je n'ai pas codé - se feront en JavaScript je place cet exemple dans la catégorie JavaScript en vous encourage à poursuivre ce travail !

Le XML en exemple ci-après décrit le petit monde que vous pouvez voir dans la capture d'écran jointe. Si vous avez de voir un petit feu de camp s'animer sur la plage, ôtez les commentaires ;))

Enjoy!

PS : c'est vraiment fastoche, n'ayez pas peur :)

Source / Exemple : 


<?xml version="1.0" encoding="ISO-8859-15"?>
<?xml-stylesheet type="text/xsl" href="xsl/map.xsl"?>
<map title="La mer"
     description="c'est beeeaaauuu !"
     width="15" height="15">

    <ground tile="sea"/>
<!--
    <square x="8" y="14">
        <entity id="campFire1" tile="campFire"/>
    </square>
-->
    <square x="1" y="15">
        <entity id="palm1" tile="palm"/>
    </square>

    <square x="2" y="15">
        <entity id="palm2" tile="palm"/>
    </square>

    <square x="3" y="15">
        <entity id="palm3" tile="palm"/>
    </square>

[...]

    <!-- Beach ground. -->

    <row y="10">
        <ground tile="beachWave04"/>
    </row>
    <row y="11">
        <ground tile="beachWave03"/>
    </row>
    <row y="12">
        <ground tile="beachWave02"/>
    </row>
    <row y="13">
        <ground tile="beachWave01"/>
    </row>
    <row y="14">
        <ground tile="beach02"/>
    </row>
    <row y="15">
        <ground tile="jungleBorder"/>
    </row>

</map>

Conclusion :


Grosso modo, le XML est transformé en HTML/JavaScript au moyen d'une feuille XSL. Les petites images utilisées dans le monde sont définies dans un "dictionnaire" de façon à pouvoir changer la tronche d'un monde en un rien de temps. Imaginons que vous ayez envie d'enneiger vos plaines lorsque l'hiver arrive il vous suffirait juste de bidouiller ce "dictionnaire", sympa non ? :)
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (voisinpi)