Affichage map - Version imprimable

Affichage map - 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 : Affichage map (/showthread.php?tid=5051)

Pages : 1 2 3

RE: Affichage map - syslog - 04-08-2010

(04-08-2010, 04:50 PM)Sh4rk a écrit : Peux tu nous mettre:
- le code source qui est affiché après le chargement du script
- un screen du résultat obtenu
- et comment devrait être le résultat

Voilà le code source:

Code PHP :
<?php 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

   "http://www.w3.org/TR/REC-html40/strict.dtd">

<HTML>

<HEAD>

<TITLE>Test Map</TITLE>

<LINK rel=STYLESHEET href="jeu.css" type="text/css">

</HEAD>

<BODY>

<div class="case" style="top:30;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:30;left:60;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:30;left:90;background-image: url('images/rouge.png');"></div>

<div class="case" style="top:30;left:120;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:30;left:150;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:60;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:60;left:60;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:60;left:90;background-image: url('images/rouge.png');"></div>

<div class="case" style="top:60;left:120;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:60;left:150;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:90;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:90;left:60;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:90;left:90;background-image: url('images/rouge.png');"></div>

<div class="case" style="top:90;left:120;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:90;left:150;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:120;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:120;left:60;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:120;left:90;background-image: url('images/rouge.png');"></div>

<div class="case" style="top:120;left:120;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:120;left:150;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:150;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:150;left:60;background-image: url('images/bleu.png');"></div>

<div class="case" style="top:150;left:90;background-image: url('images/rouge.png');"></div>

<div class="case" style="top:150;left:120;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:150;left:150;background-image: url('images/bleu.png');"></div>

</BODY>

</HTML>

Le screen :
http://img132.imageshack.us/img132/25/sanstitreab.jpg

Le résultat disons que vu qu'il y a une partie du code un peu floue je suis pas sur que la map s'affiche correctement mais je ne vois pas de raison pour que cela se passe ainsi.
En tout cas les cases ont la bonne taille et les couleurs sont bien les images .

J'espère une critique du code, une explication et des conseils! ;-)
Merci d'avance.

(04-08-2010, 05:31 PM)djidi a écrit :
(03-08-2010, 08:16 PM)syslog a écrit :
Code PHP :
<?php 

if ($curent_y!=$carte['y']) { // Nouvelle ligne

        $x=0;

        $y++;

        $curent_y = $carte['y'];

    }

    $x++; 
Pas trop de rapport avec ton dernier problème, mais à quoi te sert ce code ?
Ta map est dans la boucle while donc au lieu d'utiliser $y tu pourrais utiliser $carte['y'].

Comme je l'ai dit, j'ai repris un tuto du wiki en le modifiant et certaines parties sont floues pour moi, et pour le moment je n'ai pas eu de réponse à ce sujet.

RE: Affichage map - Sh4rk - 04-08-2010

Donne nous le css, je vais essayer de voir le soucis

RE: Affichage map - syslog - 04-08-2010

Le CSS est sur la page juste avant, c'est juste le .case (avec la position commentée).

J'ai posté les modifs du source je crois, sinon je te re-poste tout si tu veux.

RE: Affichage map - Sh4rk - 04-08-2010

Alors dans ton css rajoute:

Code PHP :
<?php 

position:absolute; 

Puis dans tes div quand tu définit top ou left il serait bien de mettre px à la fin.
Car top:30; ne signifie rien, la seule condition pour ne pas mettre d'unité est 0 en valeur

Et dis nous si ça fonctionne

RE: Affichage map - syslog - 04-08-2010

(04-08-2010, 09:14 PM)Sh4rk a écrit : Alors dans ton css rajoute:
Code PHP :
<?php 

position:absolute; 
Puis dans tes div quand tu définit top ou left il serait bien de mettre px à la fin.
Car top:30; ne signifie rien, la seule condition pour ne pas mettre d'unité est 0 en valeur

Et dis nous si ça fonctionne

-Euh j'ai indiqué que le css était à la page d'avant, le position:absolute y est commenté car lorsqu'il est activé les images sont superposées, mais je le dé-commente si cela est mieux (donc là je ne vois qu'une seule image).

-Ensuite dans mon css et dans l'attribut style du div le px est indiqué donc je vois pas bien où tu vois cela.

RE: Affichage map - djidi - 04-08-2010

(04-08-2010, 03:15 PM)syslog a écrit :

Code PHP :
<?php 

<div class="case" style="top:30;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:30;left:60;background-image: url('images/bleu.png');"></div>

[...] 

Code PHP :
<?php 

$var_carte .= '<div class="case" style="top:'.$decalageY.';left:'.$decalageX.';';

    $var_carte .=  'background-image: url(\'images/'.$carte['ref_terrain'].'.png\');">'; 

Ici, les px ne sont pas mis.

RE: Affichage map - syslog - 04-08-2010

(04-08-2010, 09:46 PM)djidi a écrit :

(04-08-2010, 03:15 PM)syslog a écrit :

Code PHP :
<?php 

<div class="case" style="top:30;left:30;background-image: url('images/jaune.png');"></div>

<div class="case" style="top:30;left:60;background-image: url('images/bleu.png');"></div>

[...] 

Code PHP :
<?php 

$var_carte .= '<div class="case" style="top:'.$decalageY.';left:'.$decalageX.';';

    $var_carte .=  'background-image: url(\'images/'.$carte['ref_terrain'].'.png\');">'; 

Ici, les px ne sont pas mis.

Effectivement j'ai du me mélanger les versions, et j'ai pas du tester avec l'absolute ET les px, je vois un truc qui ressemble à ma carte, pas sur que tout soit parfait mais ça règle déjà le soucis principal!
Je vais travailler dessus merci ça m'a avancé!

PS : n'hésitez pas à me donner des conseils/avis sur le code, un bout n'est pas très clair pour moi et je vais modifier ça
(le while de génération).

RE: Affichage map - Sh4rk - 04-08-2010

Remplace:

Code PHP :
<?php 

$var_carte .= '<div class="case" style="top:'.$decalageY.';left:'.$decalageX.';'; 

Par:

Code PHP :
<?php 

$var_carte .= '<div class="case" style="top:'.$decalageY.'px;left:'.$decalageX.'px;'; 

RE: Affichage map - syslog - 04-08-2010

(04-08-2010, 09:56 PM)Sh4rk a écrit : Remplace:

Code PHP :
<?php 

$var_carte .= '<div class="case" style="top:'.$decalageY.';left:'.$decalageX.';'; 

Par:

Code PHP :
<?php 

$var_carte .= '<div class="case" style="top:'.$decalageY.'px;left:'.$decalageX.'px;'; 

C'est fait merci, dernière petite chose, je vais me répéter mais vous pouvez m'expliquer l'intérêt de ceci:

Code PHP :
<?php 

$curent_y = -5000; 

(...) 

 $y=0;

// On génére la map

while($carte = $query->fetch(PDO::FETCH_ASSOC)) {

    if ($curent_y!=$carte['y']) { // Nouvelle ligne

        $x=0;

        $y++;

        $curent_y = $carte['y'];

    }

    $x++;

C'était dans le tuto d'origine http://wiki.jeuweb.org/tutoprog/carte_hexagonale, est-ce à changer vu que celui-ci est fait pour un jeu isométrique?

RE: Affichage map - Sh4rk - 04-08-2010

C'est ce qui te permet de passer à la ligne en faite

la variable $current_y = -5000; permet d'initialiser la variable à une valeur ne se trouvant pas en y dans ta bdd
Du coup si c'est différent ça te crée une nouvelle ligne, sinon ça incrémente $x.
Car la requête qui est dans le while est trié selon y et x