JeuWeb Créez votre jeu par navigateur !

titnome · (Modification du message : 15-04-2010, 03:15 PM par Sephi-Chan.)

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.

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.

anthono · (Modification du message : 13-04-2010, 03:58 PM par anthono.)

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>

titnome · (Modification du message : 13-04-2010, 04:12 PM par titnome.)

Première image

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.

anthono · (Modification du message : 13-04-2010, 04:15 PM par anthono.)

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

titnome · 13-04-2010, 04:41 PM

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

anthono · 13-04-2010, 04:46 PM

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.

titnome · (Modification du message : 13-04-2010, 05:06 PM par titnome.)

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?

anthono · 13-04-2010, 05:12 PM

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.

php_addict · 13-04-2010, 08:56 PM

euh...une question, pourquoi le faire en javascript Confused

iffle:

Crimson · 13-04-2010, 09:56 PM

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.

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 906	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