JeuWeb Créez votre jeu par navigateur !

atra27 · 09-04-2010, 10:04 PM

Bon voila pour faire simple, j'ai en bdd les positions de différentes planetes suivant x et y.

J'aimerais juste avoir sur une page une représentation graphique de ce que sa donne....
J'avais pensé a transmettre aux css les coordonnées grâce a php mais je sais pas vraiment comment faire....

Je maitrise pas l'histoire des positions "absolutes" et tout sa...

En gros dans l'idéal, il me faudrait en html un repére orthonormé avec la position 0;0 au centre d'une celle d'un tableau (width et height a mettons 500px) et donc la possibilité de placer des div suivants les coordonnées (Div qui me sert ensuite a placer les appels js des popups d'info et les images correspondant aux bases)

Mtn si c'est bien plus simple, on peut bouger le repère de manière a ce que le 0;0 soit en haut a gauche, et donc on n'a plus que des positions positives et qui sont plus proches du positionnement dans les navigateurs...

Des idées sur comment réaliser ça?
Un bout de script même? (suis pas callé css et limite niveau js...)

Daynos · (Modification du message : 09-04-2010, 11:16 PM par Daynos.)

Pour faire simple, il faut pour commencer un "cadre" avec l'attribut "position:relative". Tous les calques avec la propriété "position:absolute" situés à l'intérieur de ce "cadre" auront pour référentiel l'angle haut gauche du cadre. Après le cadre, tu peux le mettre où tu veux dans ta page, les calques à l'intérieur suivront.

Petit exemple très basique pour tracer une diagonale de tuiles grises sur un cadre de fond bleu :

Code PHP :
<?php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Document sans nom</title>

<style type="text/css">

#cadre { position:relative; width:100px; height:100px; margin:150px; border:1px solid #000; background:#66CCFF; }

.tuile    { position:absolute; width:10px; height:10px; background:#CCC; }

#tuile1 { top:0px; left:0px; }

#tuile2 { top:10px; left:10px; }

#tuile3 { top:20px; left:20px; }

#tuile4 { top:30px; left:30px; }

#tuile5 { top:40px; left:40px; }

#tuile6 { top:50px; left:50px; }

#tuile7 { top:60px; left:60px; }

#tuile8 { top:70px; left:70px; }

#tuile9 { top:80px; left:80px; }

#tuile10 { top:90px; left:90px; }

</style>

</head>

<body>

    <div id="cadre">

        <div id="tuile1" class="tuile"></div>

        <div id="tuile2" class="tuile"></div>

        <div id="tuile3" class="tuile"></div>

        <div id="tuile4" class="tuile"></div>

        <div id="tuile5" class="tuile"></div>

        <div id="tuile6" class="tuile"></div>

        <div id="tuile7" class="tuile"></div>

        <div id="tuile8" class="tuile"></div>

        <div id="tuile9" class="tuile"></div>

        <div id="tuile10" class="tuile"></div>

    </div>

</body>

</html>

atra27 · 15-04-2010, 04:57 PM

ça fonctionne!

Juste eu a l'adapter un peu mais jdois avouer que c'est du beau boulot!
Merci Wink