JeuWeb - Crée ton jeu par navigateur
Problème de sélection des cases sur une carte isométrique - 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 : Problème de sélection des cases sur une carte isométrique (/showthread.php?tid=4731)

Pages : 1 2

Problème de sélection des cases sur une carte isométrique - titnome - 13-04-2010

Bonjour.

Afin de développer mon jeu je rencontre quelques difficultés. Ma carte isométrique s'assemble bel et bien mais le problème est la sélection des cases.

[Image: sanstitrexxl.jpg]
Voici un petit screen de la carte.

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>';
                        
                        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="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>
Voici le code.

En faite au passage de la souris les cases doivent normalement devenir plus clair. Mais le problème est que cela fonctionne uniquement pour la dernière ligne et la dernière colonne.

RE: Problème carte isométrique js - anthono - 13-04-2010

Bonjour,

Je n'ai pas regardé attentivement ton code,mais je les testés sans images je remarque que le tour devient plus clair le centre aussi mais au centre

il y a 2 parties de coordonées des qui reste foncé et des qui reste clair donc je vais regardé ton code pour t'en dire plus.

EDIT: tu peux me passais ton image je n'en est pas sous la main, desolez pour les fautes.
EDIT:A tester !!!!
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>';
                        
                        contenu += '<div id="tile'+index*21+'"" style="position : relative;width: '+ 82 +'px; height: ' + 41 + 'px; top:' +(((x-1)+(y-1))*20) + 'px; left:' + ((x+(9-y))*(41-1)-41+1) + 'px; margin: 0px 0px  -' + (41) + 'px 0px;">';
                        
                        contenu += '<img style="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>


RE: Problème carte isométrique js - titnome - 13-04-2010

[Image: 000b.png]
Première image

[Image: cursor.png]
Seconde image.

Je vais tester ton truc. Je te tiens au jus.

Merci

EDIT :
Effectivement ca fonctionne mais je voudrais que les deux calques soit collés sinon je ne vois pas d'utilisées.

RE: Problème carte isométrique js - anthono - 13-04-2010

J'ai constaté que sa marché pas je vais regardé plus attentivement.
Sans les images sa me parraisait bon je regarde plus attentivement

RE: Problème carte isométrique js - titnome - 13-04-2010

oui parce que moi ça fais maintenant 2 jours que je m'arrache mes cheveux la dessus ^^

RE: Problème carte isométrique js - anthono - 13-04-2010

Je cherche mais je trouve pas je vais encore cherché car ces bizarres je mis connais trés peu en javascript mais c'est beaucoup du css la le probléme je crois.

RE: Problème carte isométrique js - titnome - 13-04-2010

oui le js me set juste à créer ma carte le reste C du positionnement css, de la mise en page quoi ^^

Pour créer un jeu c'est pas mieu de s'y connaitre un tout petit peu en js?

RE: Problème carte isométrique js - anthono - 13-04-2010

Si faut si connaitre un peu sa peux aidez pour certaine chose moi j'ai fait quelques trucs mais rien d'extraordinaire en js pour mon jeu.

RE: Problème carte isométrique js - php_addict - 13-04-2010

euh...une question, pourquoi le faire en javascript Confusediffle:

RE: Problème carte isométrique js - Crimson - 13-04-2010

juste comme ça en passant, ton javascript au final ça génère de l'html.
Pourquoi tu ne regarde pas le code généré pour voir ou ça coince ? Pas besoin de s'y connaitre en js au final pour voir où ça coince.

Donc tu devrais peut être coller un exemple de code généré.

Apres, oui on peut se demander pourquoi tu génère ça en javascript.