Algo de déplacement sur une carte

[lemouix]

Bonjour,

je ne sais pas si ça peut en intéresser, mais je viens de dev un petit algo de déplacement d'objet (exemple: un vaisseau) en js et php.

Le principe est simple: calcul de l'équation de droite entre les deux objets et déplacement de l'objet sur cette droite. Un timestamp de départ est enregistré en session pour permettre au script d'actualiser la position de l'élément en fonction de l'heure de départ...

C'est le genre d'élément qui manque sur un site comme ogame: une jolie carte avec un état de la position de ces vaisseaux en déplacement.

A bientôt !

[Argorate]

Salut,

Moi je veux bien avoir une démo de ton code, ça peut être intéressant.
Je pourrais peut être en tirer quelques chose pour mon jeu!

[lemouix]

Voici le code que je vais expliquer:

Initialisation des variables utiles pour le placement des objets:

Code :

<?php session_start();

//unset($_SESSION['depart']);
if (!isset($_SESSION['depart']))
{
    $_SESSION['depart'] = time();
}
$pos1['x'] = 250;
$pos1['y'] = 10;
$pos2['x'] = 10;
$pos2['y'] = 90;

?>

Ici les variables sont définies en dur pour les deux objets. L'unset permet de réinitialiser la variable de session 'depart' qui contient notre timestamp s'il n'existe pas.

Affichage des planètes. L'origine a été placée à 150,150.

Code :

<div style="position: absolute; top: <?php echo $pos1['y'] + 150 ?>; left: <?php echo $pos1['x']+150 ?>; border: 0px solid black"><img src="Images/Planetes/icon_jupiter.gif"></div>
<div style="position: absolute; top: <?php echo $pos2['y'] + 150 ?>; left: <?php echo $pos2['x']+150 ?>; border: 0px solid black"><img src="Images/Planetes/icon_jupiter.gif"></div>

Nous passons au code JS pour l'initialisation des variables:

Code :

<script type="text/javascript">
<!--
var heureDepart=<?php echo $_SESSION['depart'] ?>;

var vitesse=20000;
var unite=2;

var x1=<?php echo $pos1['x'] ?>;
var y1=<?php echo $pos1['y'] ?>;
var x2=<?php echo $pos2['x'] ?>;
var y2=<?php echo $pos2['y'] ?>;

var n = 24 * 3600; //nombre de secondes dans un jour

x1 sera le point de départ, x2 le point d'arrivée.
Nous procédons ensuite à un joli calcul de distance via notre ami Pythagore qui nous permet de calculer la distance entre les deux objets.

Code :

var x = x1 - x2;
var y = y1 - y2;
var distance = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));

var distance_km = Math.floor(distance * unite);
var duree_totale = (distance_km * 3600) / vitesse;
var sec_actu = (Math.floor((new Date()).getTime() / 1000));
var ecoule = sec_actu-heureDepart;
var restant = duree_totale - ecoule;

On en profite aussi pour calculer le timestamp actuel, le nombre de secondes écoulées depuis le démarrage (pour permettre une reprise si on revient sur la page plus tard = temps réel) et la durée restante.

Ensuite, la fonction de compteur qui va nous afficher la durée restante en j h m s:

Code :

function compteur()
{
//alert("Duree "+duree_totale+" ecoule: "+ecoule);
    if (ecoule < duree_totale)
    {
        j = Math.floor (restant / n);
        h = Math.floor ((restant - (j * n)) / 3600);
        mn = Math.floor ((restant - ((j * n + h * 3600))) / 60);
        var sec2 = restant - ((mn * 60) + (h * 3600) + (j * n));
        document.getElementById("lecompteur").innerHTML = "Temps restant : " + j +" j "+ h +" h "+ mn +" min et "+ sec2 + " sec ";
        
        var a = (y2 - y1)/(x2 - x1);
        var b = y1 - ((x1 * (y2 - y1)) / (x2 - x1));
        var timestamp = (Math.floor((new Date()).getTime() / 1000));
        ecoule = timestamp - heureDepart;
        
        var distance_parcourue = ((distance * ecoule)/ duree_totale);
        
        if (x1 > x2)
        {
            xobj = x1 - distance_parcourue;
        } else {
            xobj =  x1 + distance_parcourue;
        }
    
        var yobj = a * xobj + b;
    
        document.getElementById("objet").style.top = (yobj) + 150;
        document.getElementById("objet").style.left = (xobj) + 150;
        //document.getElementById("lecompteur").innerHTML = "x: "+xobj+" y:"+yobj;
    
        restant = restant - 1;
        setTimeout("compteur()",1000);
    } else {
        document.getElementById("lecompteur").innerHTML = "Terminé.";    
        
    }
}
//-->
</script>

La fonction de calcul du compteur a été récupéré sur internet.

Les variables a et b sont en fait celles de la droite y = ax + b (qui a été résolue via un système d'équation grace aux points d'origine et d'arrivée, x1,y1 et x2,y2).

Une règle de trois est faite pour la distance qui a été parcourue en fonction de la durée totale (distance_parcourue) puis, si le point d'arrivée a une valeur x1 plus grande que x2, alors on ajoute l'origine de x1 à la distance parcourue. A l'inverse, si x2 est > à x1, alors on soustrait la distance parcourue à x1 pour faire un déplacement vers la gauche.
on arrète le compteur si la durée_totalei a été atteinte.

On fait ensuite appel à cette fonction:

Code :

setTimeout("compteur()",1000);

On affiche notre objet:

Code :

<div style="position: absolute; top: <?php echo $y2 + 150 ?>; left: <?php echo $x2+150 ?>; border: 0px solid black" id="objet"><img src="Images/Persos/superhero.gif"></div>

Le seul petit soucis sur lequel je bosse, est que l'objet s'affiche n'importe où si le compteur est terminé... mais ce n'est qu'une broutille...

Voilà, j'attend vos commentaires !

[lemouix]

Autre soucis:
Mon objet dépasse la cible si la distance est trop gde !

[lemouix]

Mince... problème de calcul de temps !

---

Erreur ici:
var duree_totale = (distance_km * 3600) / vitesse;

Correction:
var duree_totale = (distance * 3600) / vitesse;

[Argorate]

J'ai testé vite fait, je ne sais pas si ça vient de mon pc, mais rien ne c'est passé a part "terminer" qui s'affiche au bout de 2sec.

Je testerais chez moi si j'ai le temps, corrige tout tes bugs en attendant.

[lemouix]

Argorate, active Session :p C'est basé sur la variable de session, s'il ne l'initialise pas rien ne se passe.

[Argorate]

Je vois pas pourquoi elle ne serait pas activer

Je suis bien connecter sur ma session sur ce forum même...

[lemouix]

Ce que je veux dire, c'est en local, le script créé une session avec 'départ' comme variable (timestamp de départ du vaisseau).

[lemouix]

Alors... deuxième épisode:
Mon algorithme est basé sur le temps. Il contient une erreur lors de la représentation graphique car l'objet en déplacement dépasse la position d'arrivée.

Je vais le modifier pour que le déplacement soit basé sur la distance restante et un déplacement relatif à la vitesse réelle.