JeuWeb - Crée ton jeu par navigateur
Fonction jQuery css et boucle for - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Fonction jQuery css et boucle for (/showthread.php?tid=2914)

Pages : 1 2

Fonction jQuery css et boucle for - Tagu - 17-08-2008

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

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

Je vais voir celà. Merci oxman.

RE: [Javascript] Fonction jQuery css et boucle for - Eluox - 17-08-2008

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

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

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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.

-_-

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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);
}


RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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.

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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 -_-

RE: [Javascript] Fonction jQuery css et boucle for - Tagu - 17-08-2008

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

Commence a m'embéter...