JeuWeb Créez votre jeu par navigateur !

titnome · 13-04-2010, 11:42 PM

Je génère ca en javascript car je cherche juste une solution pour, par la suite, faire une carte ou les déplacements serai sans rechargement de la page juste une petite interaction en ajax pour reconstruire la carte avec les nouveaux décors.

Il me semble que le javascript ne génère aucun code HTML vu les méthodes utilisées. Donc il va être assez dur de vous donner le code généré. Mais je pense qu'une petite retranscription en php devrais faire l'affaire. Je m'en occupe tout de suite.

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...]

php_addict · 14-04-2010, 08:59 AM

(14-04-2010, 08:18 AM)Roworll a écrit : 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

ou enregistrer sous avec IE et l'ouvrir avec un editeur de texte

titnome · (Modification du message : 15-04-2010, 01:47 AM par Sephi-Chan.)

Les problèmes liés à la carte iso je les connais, et malheureusement on ne peu pas encore éviter ca. Je vais tester ton code et te dire.

Bon. Franchement je tien a vous remercier.
Ce que je voulais fonctionne. Il y a bien entendu quelques améliorations à faire mais je les ferai plus tard.

Si je rencontre d'autres problèmes je n'hésiterai pas a vous demander.

Crimson · (Modification du message : 15-04-2010, 09:26 AM par Crimson.)

Un moyen d'éviter ça c'est de faire du flash, la détection des clics ne prenant pas en compte la transparence contrairement aux navigateur.
Personnellement j'ai le même problème sur une carte isométrique avec des cases hexagonales. ^^ Donc au final j'utile très peu de mouseover sur les cases.

Roworll · 15-04-2010, 10:24 AM

(15-04-2010, 09:25 AM)Crimson a écrit : Personnellement j'ai le même problème sur une carte isométrique avec des cases hexagonales.

L'utilisation des canvas (cf raphaejs) ou du SVG peuvent peut être t'aider sur ce point.
C'est le genre de truc qui te permettent un clic au pixel près sur des formes complexes.

Crimson · 15-04-2010, 01:49 PM

Merci du conseil, je prends note.
Pour le moment je vais faire simple, mais quand j'aurais le temps je regarderais ça.
Je me trompe pas de site c'est bien http://raphaeljs.com/ ?

**Sephi-Chan** · 15-04-2010, 02:09 PM

Oui. C'est bien ça. Smile

Sephi-Chan

Roworll · 15-04-2010, 02:20 PM

Yep.
En ce moment, mon cœur balance entre le SVG et Canvas.

Je pense que pour des effets simples (carte de jeu par exemple), Canvas/JS sont plus indiqués.

Par contre, dans le cadre d'un design d'interface plus complexe et interactive, le SVG et SMIL devraient prendre le pas à partir du moment ou tous les navigateurs le supporteront correctement.

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