JeuWeb Créez votre jeu par navigateur !

Roworll · (Modification du message : 14-04-2010, 10:03 AM par Roworll.)

Le problème est lié a deux choses
1 - tes deux couches sont entrelacées.
2 - Même si la vision est isométrique, les images affichées sont carrées.

En gros, tu places une image de fond, puis l'image pour l'effet de survol, une autre image de fond, une autre image de survol etc. Pour un positionnement en grille classique, ça ne poserait pas de problème. Mais là, tu travailles avec des images carrées collées les unes aux autres qui, du coup se chevauchent.

Dans le code suivant, j'ai fais deux choses
D'une part j'ai séparé la boucle d'affichage du fond de celle du masque de survol
D'autre part, j'ai encadré les images de survol pour que tu te rendes mieux compte du problème lié à la carte iso

Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <title>Mon village</title>

        <script type="text/javascript">

            function map(id, x_ori, y_ori) {

                var conteneur = document.getElementById(id);

                var contenu   = '';

                var x_norm = x_ori;

                for( y=1; y <= 9; y++ )        

                {    

                    var y_norm = y_ori;

                    for( x=1; x <= 9; x++ )

                    {

                        index = y*9+x;

                        contenu += '<div id="tile'+index+'"" style="position : relative;width: '+ 82 +'px; height: ' + 82 + 'px; top:' +(((x-1)+(y-1))*20) + 'px; left:' + ((x+(9-y))*(41-1)-41+1) + 'px; margin: 0px 0px  -' + (82) + 'px 0px;">';

                        contenu += '<img style="z-index: ' + (index*5) + ';" id="' + index + '" alt="' + x_norm + ':' + y_norm + '" src="000.png" />';

                        contenu += '</div>';

                        y_norm++;

                    }

                    x_norm++;

                }

                for( y=1; y <= 9; y++ )        

                {    

                    var y_norm = y_ori;

                    for( x=1; x <= 9; x++ )

                    {

                        index = y*9+x;

                        contenu += '<div id="tile'+index*21+'"" style="position : relative;width: '+ 82 +'px; height: ' + 41 + 'px; top:' +(((x-1)+(y-1))*20+41) + 'px; left:' + ((x+(9-y))*(41-1)-41+1) + 'px; margin: 0px 0px  -' + (41) + 'px 0px;">';

                        contenu += '<img style="border: solid black 1px;z-index: ' + (index*6+1) + '; opacity : 0.5;" id="' + index*6 + '" alt="' + x_norm + ':' + y_norm + '" src="cursor.png" onmouseover="this.style.opacity =\'0\';" onmouseout="this.style.opacity =\'0.5\';" />';

                        contenu += '</div>';

                        y_norm++;

                    }

                    x_norm++;

                }

                conteneur.innerHTML = contenu;

            }

        </script>

    </head>

    <body onload="map('carte', '1', '1');">

        <div id="carte"></div>

    </body>

</html>

Sur cette page, commence par l'image le plus en haut et observe bien quand l'effet de survol change de case. Tu comprendras les soucis liés à la vue iso et aux images carrées.

Et pour info, ton JS génère bien du HTML. Toutes ces balises concaténées en chaîne de caractère et placées dans un InnerHTML sont du code HTML.

Si tu souhaites voir à quoi il ressemble, visionne ta page avec FireFox, fais CTRL+A pour tous sélectionner puis clic droit->Code source de la sélection.

[Edit plus ça va, plus je fais de fautes moi... c'te honte...]

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Sélectionner les cases cotières d'une carte	Xenos	17	6 411	08-03-2014, 12:22 AM Dernier message: Xenos
	Gestion des évènement pour une carte 2D isométrique	supermeganono	12	7 827	22-03-2012, 08:06 PM Dernier message: supermeganono
	Création d'une carte en 2D isométrique	sharyma	19	20 952	07-06-2011, 04:38 PM Dernier message: sharyma
	Implémenter une carte isométrique avec débordements	Sephi-Chan	9	5 557	01-05-2011, 01:11 AM Dernier message: keke
	problème de carte	cariox	8	4 528	24-03-2011, 01:47 PM Dernier message: Globe