JeuWeb - Crée ton jeu par navigateur

Version complète : Afficheur de map JS
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
Pages : 1 2
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
Franchement sympa ! C'est rare de voir un rendu fluide avec une map CSS, tu as utilisé les animations CSS3 ?
Grave c'est beau? par contre pour le pathfinding c'est pas encore ça ^^
Très beau travail
(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.
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.
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)
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 !
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.
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.
Pages : 1 2