Fonction jQuery css et boucle for

[Tagu]

Bonjour,

Actuellement je code une fonction de pathfinding pour mon jeu. La fonction marche bien comme il le faut et me retourne un tableau contenant les positions [x,y]. Jusque la rien de bien méchant. Le problème vient du mouvement du personnage. J'utilise une boucle for pour lire les positions du tableau et pour chaque coordonnées je bouge mon personnage avec le fonction animate de jquery et je change sa valeur z-index avec la fonction css. Le problème est la. La boucle for n'attend pas que les deux fonctions soient terminées. J'ai trouvé un astuce pour la fonction animate ({queue:true}) mais pas pour css. Regardez une portion de mon code et la démo pour mieux voir le problème.

Code :

var way = AStar(map,[char_x,char_y],[x,y],'Manhattan');
for(var x, y, i = 1, j = way.length; i < j; i++) {
    x = way[i][0];
    y = way[i][1];

    var zindex = map_width + x + y + 50;
    var left = (x-y)*option.tuileleft + (map_height-1)*option.tuileleft + 7 + option.mapOffsetLeft;
    var top = (x+y)*option.tuiletop - map[y][x]['1']*option.tuilelevel - 18 + option.mapOffsetTop;

    $('#player').css(
        "zIndex",zindex
    ).animate({
        top: top,
        left: left
    }, 200, {queue:true});
}

Amicalement

[Tagu]

Ta bouger le personnage? Tu n'a pas remarqué que le personnage se trouve parfois sous la tuile. Tout ceci provient du z-index.

Amicalement

[Tagu]

Je vais voir celà. Merci oxman.

[Eluox]

N'utilisant pas JQuey, je peux pas t'aider.

Mais j'ai remarquer que ce problème arrivait quand on "remonte".

[Tagu]

Exactement. Le joueur obtient le zindex de la tuile de destination et comme le zindex des tuiles du bas étant plus petit, le personnage devient caché en remontant.

Même en contournant la boucle for, j'ai le même résultat.

-_-

[Tagu]

En simplifiant j'ai utilisé la fonction $.each() de jQuery a la place de la boucle for.

Code :

var way = AStar(map,[char_x,char_y],[x,y],'Manhattan');
$.each(way, function(index, pos) {
    var x = pos[0];
    var y = pos[1];

    var zindex = map_width + x + y + 50;
    var left = (x-y)*option.tuileleft + (map_height-1)*option.tuileleft + 7 + option.mapOffsetLeft;
    var top = (x+y)*option.tuiletop - map[y][x]['1']*option.tuilelevel - 18 + option.mapOffsetTop;

    $('#player').css(
        "zIndex",zindex
    ).animate({
        top: top,
        left: left
    }, 200);
}

[Tagu]

Je suis en train oxman c'est juste que je lisais la documentation de jQuery et que l'inspiration apparu ^^

Par contre je ne trouve pas de fonction propre a jQuery pour appeler une fonction quand une autre est fini.

[Tagu]

J'avais déja essayé auparavant. A force, la doc de jQuery je la connais. Depuis ce matin je bloque sur ce problème.

Merci qaund même oxman

[Tagu]

Bon alors j'ai pondu un bout de code. J'ai tout mis dans une fonction que je rapelle à la fin de celle ci jusqu'a ce que le tableau soit parcouru.

Code :

function moveMe(ways, index) {
    var x = ways[index][0];
    var y = ways[index][1];

    var zindex = map_width + x + y + 50;
    var left = (x-y)*option.tuileleft + (map_height-1)*option.tuileleft + 7 + option.mapOffsetLeft;
    var top = (x+y)*option.tuiletop - map[y][x]['1']*option.tuilelevel - 18 + option.mapOffsetTop;

    $('#player').css({
        zIndex: zindex
    }).animate({
        top: top,
        left: left
    }, 200);

    if (index+1 < ways.length) {
        setTimeout(function() { moveMe(ways, index+1); }, 200);
    }
}

Bug toujours -_-

[Tagu]

J'avais bien compris oxman mais ca ne marchais pas.

Commence a m'embéter...