JeuWeb - Crée ton jeu par navigateur
Afficheur de map JS - Version imprimable

+- 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 : Nos autres projets (https://jeuweb.org/forumdisplay.php?fid=54)
+--- Sujet : Afficheur de map JS (/showthread.php?tid=6398)

Pages : 1 2


Afficheur de map JS - Cawrotte - 21-09-2012

Salut à tous, je vous présente sous forme de vidéo un petit projet pas trop lourd pour occuper profitablement mon temps libre, étant passionné de programmation (surtout web) et de RPG.

Le concept approche celui de RPGJS. Mais je n'utilise pas Canvas.

Je vous laisse découvrir !




Merci d'avoir regardé Smile
graphismes : Enterbrain



RE: Afficheur de map JS - Maks - 21-09-2012

Franchement sympa ! C'est rare de voir un rendu fluide avec une map CSS, tu as utilisé les animations CSS3 ?


RE: Afficheur de map JS - niahoo - 21-09-2012

Grave c'est beau? par contre pour le pathfinding c'est pas encore ça ^^


RE: Afficheur de map JS - srm - 21-09-2012

Très beau travail


RE: Afficheur de map JS - Cawrotte - 21-09-2012

(21-09-2012, 07:17 PM)niahoo a écrit : Grave c'est beau? par contre pour le pathfinding c'est pas encore ça ^^

Pourquoi ça ? J'utilise l'algorithme le plus populaire, A*, qui fonctionne comme je veux.
Que voudriez-vous lui apporter ?

(21-09-2012, 06:07 PM)Maks a écrit : Franchement sympa ! C'est rare de voir un rendu fluide avec une map CSS, tu as utilisé les animations CSS3 ?

Non, je n'ai pas (encore) utilisé de CSS3.
Mais oui, c'est très fluide, et ça fonctionne même sous iOS, même les sons, sans lag.


RE: Afficheur de map JS - srm - 21-09-2012

C'est marrant Cawrotte je viens de jouer à http://yann-p.fr/minigame/
Et j'ai réussi à finir une grille calculée comme étant impossible Big Grin
Quand il m'a dit ça, j'ai regardé la grille, les mines, les pastilles et j'ai eu l'impression que c'était possible, donc j'ai testé et réussi.


RE: Afficheur de map JS - Cawrotte - 21-09-2012

Oui, l'algo est un peu foireux. En fait il est sensé te dire si il y a 2 ou plus configurations du type "il n'y a qu'une issue pour récupérer telle cible" mais ne tient pas compte des dynamites, implémentées après. Smile

Je pourrai l'améliorer avec un pathfinder, que je n'utilise pas (comique car pour lui cette grille est possible : http://i.imgur.com/CzzgX.png)


RE: Afficheur de map JS - niahoo - 21-09-2012

Suyr la vidéo 1 a 0:19 et 0:24 tu cliques à côté et le personnage s'en va faire le tour de la maison pour aller là où tu lui demandes ! Surtout le deuxième il avait 3 cases à franchir, il en fait une vingtaine.

Ou alors j'ai mal vu et le poteau est en fait une barrière ?

Ach nein, en plein écran on voit bien que c'est un lampadaire !


RE: Afficheur de map JS - Argorate - 22-09-2012

Sympa! surtout le coté animation.

Serait-tu prêt a partager ton code? je pense que ça aiderais beaucoup de personne, autant au niveau de l'implémentation du A*, que la gestion de map ou d'annimation qui sont les bases.

merci.


RE: Afficheur de map JS - Cawrotte - 22-09-2012

Agorate, pourquoi pas, mais avant j'aimerai le finir Smile

Ce week end, je m'attaque à :
- Sons (BGM BGS SE ME) (déjà presque prêt, plus que la fonction pour faire un fondu en fermeture)

- Gestion des cinématiques. Exemple dans cinematics/1.json :
Code :
[
    { // Etape 1
        loadMap: 1
    },

    { // Etape 2
        insertPnj: [
            {id: 1, name: "Villageois de base", position: [2, 2]},
            {id: 2, name: "Vendeur de potions parfaitement inintéressant", position: [1, 2]}
        ]
    },

    { // Etape 3
        makePnjSpeak: {id: 1, text: "Youpi je suis apparu à côté de toi"}
    },

    {
        makePnjWalk: {id: 1, position: [0, 0]},
        makePnjSpeak: {id: 1, text: "Je parle en bougeant"},
        makePnjSpeak: {id: 2, text: "Je parle en même temps que le premier joueur parle et marche"}
    },
    {
        makePnjSpeak: {id: 2, text: "Bon, il est temps pour moi de quitter cette map avec une animation très classe."}
    },

    {
        runAnimation: {id: 42, FPS: 50, size: 100, position: [Map.selectPlayer({id: 2}).attr('data-x'), Map.selectPlayer({id: 2}).attr('data-y')]},
        removePnj: 2
    },
    // etc
]


Et ce sera déjà bien.