JeuWeb - Crée ton jeu par navigateur
Gestion de collisions dans une map avec jQuery - 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 : Gestion de collisions dans une map avec jQuery (/showthread.php?tid=4772)

Gestion de collisions dans une map avec jQuery - djidi - 25-04-2010

Bonjour,

J'ai créé un petite map sur laquelle un personnage peut se déplacer.
Mon problème survient pour la gestion des collisions (avec un arbre par exemple) : Si vous êtes sur la map et que vous apuiyez normalement sur les touches de déplacement, pas de problème (le personnage ne bougera plus si vous tentez de franchir une case bloquante).

Cependant, en appuyant plusieurs fois sur la flèche gauche, le personnage fera autant de déplacement que demandé et calculera si la case est bloquante qu'au premier déplacement.
Et la je commence à sécher pour trouver un moyen de résoudre ce problème.

Voila, si quelqu'un a une idée ou un moyen de gérer les déplacements et collisions n'hésitez pas ^^

Code JS :

Code :
        /* Déplacements sur la map. */
        $(document).keydown(function(event)
        {
            /* ***** ***** ***** ***** ***** ***** ***** ***** ***** *****
             *
             *        Avant de valider le déplacement, on vérifie si la case sur laquel veut se déplacer le
             *        personnage existe et n'est pas une case bloquante.
             *
             * ***** ***** ***** ***** ***** ***** ***** ***** ***** *****/

            if ( event.keyCode )
            {
                // On récupère la position de la case sur laquelle le personnage va se déplacer.
                var caseX    = parseInt($("#myCharacter").css("left"));
                var caseY    = parseInt($("#myCharacter").css("top"));
        
                if (event.keyCode == '37')
                    caseX    = ( caseX - 50 );
                else if (event.keyCode == '38')
                    caseY    = ( caseY - 50 );
                else if (event.keyCode == '39')
                    caseX    = ( caseX + 50 );
                else if (event.keyCode == '40')
                    caseY    = ( caseY + 50 );
        
                // On cherche quel bloc on doit tester.
                var blocIdX    = (( caseX / 50 ) + 1 );
                var blocIdY    = (( caseY / 50 ) + 1 );
        
                if ( $("#tuile_"+ blocIdX +"_"+ blocIdY).hasClass("block") )
                    var caseBlock    = true;
                else
                    var caseBlock    = false;
            }

        
            /* ***** ***** ***** ***** ***** ***** ***** ***** ***** *****
             *
             *                Gestion des actions du personnage.
             *
             * ***** ***** ***** ***** ***** ***** ***** ***** ***** *****/
        
            if (event.keyCode == '37')
            {
                // Déplacement vers la gauche.
                if ( !caseBlock('left' ) )
                    $("#myCharacter").animate({"left": "-=50px"}, 400);
            }
            else if (event.keyCode == '38')
            {
                // Déplacement vers le haut.
                if ( !caseBlock )
                    $("#myCharacter").animate({"top": "-=50px"}, 400);
            }
            else if (event.keyCode == '39')
            {
                // Déplacement vers le bas.
                if ( !caseBlock )
                    $("#myCharacter").animate({"left": "+=50px"}, 400);
            }
            else if (event.keyCode == '40')
            {
                // Déplacement vers la droite.
                if ( !caseBlock )
                    $("#myCharacter").animate({"top": "+=50px"}, 400);
            }
        });

Code HTML

Code :
<div id="cadre">
    <div id="tuile_1_1" class="tuile1" style="top: 0px; left: 0px">
        <img src="library/maps/grass.png" alt="" />
    </div>
    <div id="tuile_1_2" class="tuile1" style="top: 50px; left: 0px">
        <img src="library/maps/grass.png" alt="" />
    </div>
    <div id="tuile_1_3" class="tuile1" style="top: 100px; left: 0px">
        <img src="library/maps/grass.png" alt="" />
    </div>
    
    [...]
    
    <div id="tuile_2_4" class="block" style="top: 150px; left: 50px">
        <img src="library/maps/tree.png" alt="" />
    </div>
    
    [...]
    
    <div id="myCharacter" class="character" style="top: 200px; left: 250px">
        <img src="library/characters/character.png" alt="" />
    </div>
</div>

Merci d'avance Smile

RE: Gestion de collisions dans une map avec jQuery - Crimson - 25-04-2010

Un booléen qui empêche l'exécution du déplacement tant que le précédent n'a pas été terminé ?
Tu le mets à faux au début et tu le remet à vrai à la fin, et a chaque tentative déplacement tu testes si il est à vrai ou pas.
Du coup ça bloque la possibilité de faire plusieurs déplacement en même temps si le joueur appuie frénétiquement sur la touche.

Mais bon ça reste un test coté client, ça peut toujours être modifié.

RE: Gestion de collisions dans une map avec jQuery - djidi - 25-04-2010

Merci beaucoup !
J'ai utilisé une variable + un setTimeOut pour remettre la valeur ensuite et ca semble fonctionner.

RE: Gestion de collisions dans une map avec jQuery - phenix - 25-04-2010

J'essaierais de ne pas bloquer le déplacement. Sans avoir rien coder, je tenterai un système ainsi:

Code :
keypress
    case => dans un tableau
    tant que tableau pas vide
        vérifier la première case
        si la case est invalide: vider le tableau
        sinon
            supprimer cette valeur du tableau
            deplacer le personnage
    fin tant que

C'est une idée qui me vient a l'esprit comme sa, peut être que sa ne marchera pas.