Algo de déplacement sur une carte

[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 !