Jeu CSS/JS multi-niveaux ?

**bull100** · 16/09/2018, 13h16

Par exemple est ce que c'est possible d'appeler une function dans une function ex : function porte()

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    function displayGrid() {
      // 3e plan
      im03="33.jpg";
      im05="35.jpg";
      aa=a[t]; bb=b[t]; cc=c[t]; dd=d[t];
 
      if (mur[pos+(aa*3)]=="1") im04="34p.jpg";
      if (mur[pos+(aa*3)]=="0") im04="34v.jpg";
      // 2e plan
      if (mur[pos+(aa*2)+dd]=="1") im03="22p.jpg";
      if (mur[pos+(aa*2)+bb]=="1") im05="26p.jpg";
      if (mur[pos+(aa*2)]=="1") { im03="23p.jpg"; im04="24p.jpg"; im05="25p.jpg"; };
      if (mur[pos+(aa*2)+dd]=="0") im02="21v.jpg";
      if (mur[pos+(aa*2)+bb]=="0") im06="26v.jpg";
      if (mur[pos+(aa*2)+dd]=="1") im02="21p.jpg";
      if (mur[pos+(aa*2)+bb]=="1") im06="27p.jpg";
      // 1er plan
      if (mur[pos+aa+dd]=="1") im02="11p.jpg";
      if (mur[pos+aa+bb]=="1") im06="16p.jpg";
      if (mur[pos+aa]=="1") { im02="12p.jpg"; im03="13p.jpg"; im04="14p.jpg"; im05="15p.jpg"; im06="17p.jpg"; };
      if (mur[pos+aa+dd]=="0") im01="01v.jpg";
      if (mur[pos+aa+bb]=="0") im07="07v.jpg";
      if (mur[pos+aa+dd]=="1") im01="01p.jpg";
      if (mur[pos+aa+bb]=="1") im07="07p.jpg";
      if (mur[pos+dd]=="1") im01="01.jpg";
      if (mur[pos+bb]=="1") im07="07.jpg";
 
  if (pos==976 && t==0) { im02="porte.jpg"; im03="vide.png"; im04="vide.png"; im05="vide.png"; im06="vide.png"; }
  if (pos==944 && t==0) { im01="01p.jpg"; im02="porteanim.gif"; im03="vide.png"; im04="vide.png"; im05="vide.png"; im06="vide.png"; im07="07p.jpg"; pp=1;} 
      imgGrid_1.src = "visuels/"+im01;
      imgGrid_2.src = "visuels/"+im02;
      imgGrid_3.src = "visuels/"+im03;
      imgGrid_4.src = "visuels/"+im04;
      imgGrid_5.src = "visuels/"+im05;
      imgGrid_6.src = "visuels/"+im06;
      imgGrid_7.src = "visuels/"+im07;
      if (pos==34 && t==2) imgGrid_4.src = "visuels/bravo.jpg";
 
    }
   /* function objet() {
      this.length = objet.arguments.length;
      for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i];
    } */
 
    // affichage
    window.onload = function(){
      displayGrid();
    };
 
        function porte() {
if (pp==1) { displayGrid(); pp=0 }
    }

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

      <input type="image" onclick="moveAhead(); displayGrid(); flecheb(); porte();" src="visuels/fleche.png" />

Invité · 16/09/2018, 13h21

Ah !

Mais je viens seulement de voir comment tu t'y est pris :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="game-grid">
      <img src="visuels/01p.jpg" id="image01">
      <img src="visuels/porte.jpg" id="image02">
      <img src="visuels/vide.png" id="image03">
      <img src="visuels/vide.png" id="image04">
      <img src="visuels/vide.png" id="image05">
      <img src="visuels/vide.png" id="image06">
      <img src="visuels/07p.jpg" id="image07">
</div>

En fait, ce n'est pas ce que j'avais en tête :

1- tu affiches le labyrinthe normalement (comme avant d'avoir la porte)
2- on mets l'image de la porte PAR DESSUS

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
    <div id="game-grid">
      <img src="visuels/vide.jpg" id="porte" class="extra-296">
 
      <img src="visuels/vide.jpg" id="image01" />
      <img src="visuels/vide.jpg" id="image02" />
      <img src="visuels/vide.jpg" id="image03" />
      <img src="visuels/vide.jpg" id="image04" />
      <img src="visuels/vide.jpg" id="image05" />
      <img src="visuels/vide.jpg" id="image06" />
      <img src="visuels/vide.jpg" id="image07" />
    </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#game-grid img.extra-296 {
  display: block;
  float: none;
  position:absolute;
  top:0;
  left:107px;
  width:396px;
  height:368px;
}

Donc, quand on arrive sur une porte, on l'affiche dans l'id="porte" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="visuels/porte.jpg" id="porte" class="extra-296">

.
Idem pour l'animation :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="visuels/porteanim.gif" id="porte" class="extra-296">

.

Pour bien faire, on peut mettre cette image en display:none; par défaut, et l'afficher via JS quand on est effectivement sur une porte :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.getElementById('porte').src = "visuels/porte.jpg";
document.getElementById('porte').style.display = "block";

Avec cette méthode : il faut que, pour l'image animée de la porte, il y ait un FOND TRANSPARENT (pas de labyrinthe dessiné dans le gif).

**bull100** · 16/09/2018, 14h12

J'ai du faire une boulette parce que la porte s'affiche tt le temps

http://bull100.pagesperso-orange.fr/.../version2.html

et pour qu'une fois que la porte est ouverte et que le perso se déplace automatiquement de 2 cases. Est ce que je peux lire une "function" dans une "function" pour pour faciliter l'affichage pour le déplacement ?

Invité · 16/09/2018, 14h20

Oui, je travaille justement dessus...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
  if (pos==976 && t==0) document.getElementById('porte').src = "visuels/porte.jpg";
  if (pos==944 && t==0) document.getElementById('porte').src = "visuels/porteanim.gif";
 
  if ( (pos==976 && t==0)
    || (pos==944 && t==0)
  ){ 
    document.getElementById('porte').style.display = "block"; // on affiche
  } else {
    document.getElementById('porte').src = "visuels/vide.jpg";
    document.getElementById('porte').style.display = "none"; // on masque
  }

Nom : porteanim2.gif
Affichages : 71
Taille : 43,0 Ko

Invité · 16/09/2018, 15h19

Re.

J'ai réussi à faire ce que tu voulais !

(non sans mal !!)

1- on est devant la porte
2- on clique sur la flèche "Avancer" :

la porte s'ouvre (animation),
puis on avance automatiquement

PAR CONTRE, il faut REVOIR l'organisation du code JS !

Au niveau du code HTML, il faut remplacer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
      <input type="image" onclick="moveLeft(); displayGrid(); flecheb();" src="visuels/fleche3.png" />
      <input type="image" onclick="moveAhead(); displayGrid(); flecheb();" src="visuels/fleche.png" />
      <input type="image" onclick="moveRight(); displayGrid(); flecheb();" src="visuels/fleche2.png" />

par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
      <input type="image" onclick="moveLeft();" src="visuels/fleche3.png" />
      <input type="image" onclick="moveAhead();" src="visuels/fleche.png" />
      <input type="image" onclick="moveRight();" src="visuels/fleche2.png" />

(les instructions displayGrid(); flecheb(); seront mises dans les autres fonctions JS)

J'ai créé une fonction checkDoor() (pour gérer la ou les portes).

Le code JavaScript (que j'ai "retravaillé") -> à copier tel quel :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
	// Initialisation
	var
		larg = 32,
		a = [-larg, 1, larg, -1],
		b = [1, larg, -1, -larg],
		c = [larg, -1, -larg, 1],
		d = [ -1, -larg, 1, larg],
		t = 0,
		pos = 976
	;
	// Définition des MURS
	var mur = [ null,
"1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1",
"1","0","0","0","0","0","1","1","0","0","0","0","0","0","0","1","1","1","1","1","0","1","1","1","1","0","0","0","0","1","1","1",
"1","0","1","1","0","1","1","1","0","1","0","1","0","1","0","0","1","1","1","0","0","0","0","1","1","0","1","1","0","0","1","1",
"1","1","1","1","0","0","0","1","0","1","0","1","0","1","1","0","1","1","1","0","1","1","0","1","1","0","1","1","0","1","1","1",
"1","1","0","0","0","1","0","1","0","0","0","1","0","0","1","0","0","0","0","1","1","1","0","0","0","0","1","0","0","1","1","1",
"1","1","1","1","1","1","0","1","1","1","0","1","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","1","0","0","0","1",
"1","1","1","1","1","1","0","1","1","1","0","0","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","1","1","1","0","1",
"1","1","1","0","0","0","0","1","1","1","1","0","1","0","0","0","0","0","1","1","0","0","0","1","1","1","0","1","1","1","0","1",
"1","1","1","0","1","0","1","1","1","1","1","0","1","0","1","1","1","1","1","1","0","1","1","0","0","0","0","1","1","1","0","1",
"1","0","0","0","1","0","0","0","1","1","0","0","1","0","1","1","1","0","0","0","0","1","1","0","1","1","1","0","0","0","0","1",
"1","1","0","1","1","1","1","0","1","1","0","1","1","0","0","0","1","0","1","1","0","1","1","0","0","0","1","0","1","0","1","1",
"1","1","0","1","1","1","1","0","1","0","0","1","1","1","1","0","1","0","0","1","0","0","0","1","1","0","1","0","1","0","0","1",
"1","1","0","0","0","0","0","0","1","0","1","1","1","1","1","0","1","1","0","1","1","1","0","1","1","0","1","0","1","1","1","1",
"1","0","0","1","0","1","1","1","1","0","1","0","0","1","1","0","1","1","0","1","1","1","0","1","0","0","1","0","0","1","1","1",
"1","1","1","1","0","1","1","1","1","0","1","0","1","0","0","0","0","0","0","1","1","1","0","1","0","1","1","1","0","1","0","1",
"1","1","1","1","0","1","1","1","1","0","0","0","1","0","1","1","0","1","0","1","1","0","0","1","0","1","1","1","0","0","0","1",
"1","1","1","1","0","0","0","0","1","1","1","0","1","0","1","1","0","1","0","1","1","0","1","1","0","1","1","1","0","1","1","1",
"1","0","0","0","0","1","1","0","1","1","1","0","1","0","1","1","0","1","0","0","0","0","1","1","0","0","0","0","0","1","1","1",
"1","0","1","1","1","1","0","0","0","1","1","0","1","0","0","0","0","1","1","0","1","0","1","1","1","0","1","1","0","1","1","1",
"1","0","1","1","1","1","0","1","0","1","0","0","1","1","0","1","1","1","1","1","1","1","1","1","1","0","1","1","0","0","0","1",
"1","0","1","0","1","1","0","0","0","1","0","1","1","0","0","0","0","0","1","1","1","1","1","1","1","0","0","0","1","1","0","1",
"1","0","0","0","1","1","1","1","1","1","0","1","1","0","1","1","1","0","1","0","0","0","0","1","1","0","1","0","1","0","0","1",
"1","1","1","0","1","1","1","1","1","1","0","1","1","0","1","1","1","0","1","0","1","1","0","1","1","0","1","0","1","1","0","1",
"1","1","1","0","0","0","0","1","0","0","0","0","1","0","1","0","1","0","1","0","1","1","0","1","1","0","0","0","0","0","0","1",
"1","1","1","1","1","1","0","1","0","1","1","0","1","0","0","0","0","0","1","0","1","1","0","0","0","0","1","1","1","1","0","1",
"1","0","0","0","1","1","0","1","0","1","1","1","1","1","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","0","0","1",
"1","0","1","0","1","1","0","1","0","1","1","1","1","0","1","1","1","0","1","0","1","1","1","1","1","1","1","1","1","1","0","1",
"1","0","1","0","0","0","0","1","0","0","0","1","1","0","1","1","1","0","0","0","1","0","0","0","1","0","0","0","1","1","1","1",
"1","0","0","1","1","0","1","1","1","1","0","1","0","0","1","0","0","0","1","0","1","0","1","0","0","0","1","0","1","1","0","1",
"1","1","0","0","0","0","1","1","1","1","0","0","0","1","1","0","1","1","1","0","0","0","1","0","1","0","1","0","0","0","0","1",
"1","1","1","0","1","0","0","0","0","0","0","1","0","1","0","0","0","1","1","0","1","0","0","0","1","0","0","0","1","1","0","1",
"1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"
	];
	// Définition des IMAGES (GRID)
	var
		imgGrid_1 = document.getElementById('image01'),
		imgGrid_2 = document.getElementById('image02'),
		imgGrid_3 = document.getElementById('image03'),
		imgGrid_4 = document.getElementById('image04'),
		imgGrid_5 = document.getElementById('image05'),
		imgGrid_6 = document.getElementById('image06'),
		imgGrid_7 = document.getElementById('image07');
 
	// -------------------
	// Gestion des PORTES
	function checkDoor() 
	{
		// ----------
		// PORTE
		if (pos==976 && t==0){ document.getElementById('porte').src = "visuels/porte.jpg"; }
		if (pos==944 && t==0)
		{
			document.getElementById('porte').src = "visuels/porteanim.gif";
		}
		if ( (pos==976 && t==0)
		  || (pos==944 && t==0)
		){
			document.getElementById('porte').style.display = "block";
		} else {
			document.getElementById('porte').src = "visuels/vide.jpg";
			document.getElementById('porte').style.display = "none";
		}
	}
	// -------------------
	// AVANCER
	function moveAhead() 
	{
		if (mur[pos+a[t]]=="0")
		{
			// ----------
			// MAP : carré noir (cases parcourues)
			j = parseInt(pos/larg);
			var spot = document.createElement('img');
			spot.setAttribute('src','visuels/carrenoir.jpg');
			spot.classList.add('trace');
			spot.style.left = 4+((pos-(j*larg))*8)+'px';
			spot.style.top = 22+(j*8)+'px';
			document.getElementById('game-map').appendChild( spot );
			pos = pos+a[t];
			// ----------
			checkDoor();
			// SPECIAL : ANIMATION de la porte
			if (pos==944 && t==0)
			{
				// ----------
				// on exécute la suite APRES un DELAI (durée de l'ANIMATION de la porte)
				setTimeout(function(){
					displayGrid();
					flecheb();
					document.getElementById('porte').src = "visuels/vide.jpg";
					document.getElementById('porte').style.display = "none";
				}, 1000); // 1 seconde
				// ----------
			} else {
				// ----------
				displayGrid();
				flecheb();
				// ----------
			}
		}
	}
 
	var r = 0; // global
	// -------------------
	// TOURNER à DROITE
	function moveRight()
	{
		// ----------
		// Rotation de la Boussole
		r = r - 90;
		document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
		// ----------
		t = (t+1)%4;
		// ----------
		checkDoor();
		displayGrid();
		flecheb();
	}
	// -------------------
	// TOURNER à GAUCHE
	function moveLeft()
	{
		// ----------
		// Rotation de la Boussole
		r = r + 90;
		document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
		// ----------
		t = (t+3)%4;
		// ----------
		checkDoor();
		displayGrid();
		flecheb();
	}
	// -------------------
	// MAP : flèche blanche (position du joueur)
	function flecheb()
	{
		// ----------
		j=parseInt(pos/larg);
		var spot = document.createElement('img');
		spot.setAttribute('src','visuels/carre'+(t+1)+'.jpg');
		spot.classList.add('trace');
		spot.style.left = 4+((pos-(j*larg))*8)+'px';
		spot.style.top = 22+(j*8)+'px';
		document.getElementById('game-map').appendChild( spot );
		// ----------
	}
 
	// -------------------
	// AFFICHAGE de la GRILLE
	function displayGrid() {
 
		// ----------
		// 3e plan
		im03="33.jpg";
		im05="35.jpg";
		aa=a[t]; bb=b[t]; cc=c[t]; dd=d[t];
		// ----------
		// MURS
		if (mur[pos+(aa*3)]=="1") im04="34p.jpg";
		if (mur[pos+(aa*3)]=="0") im04="34v.jpg";
		// 2e plan
		if (mur[pos+(aa*2)+dd]=="1") im03="22p.jpg";
		if (mur[pos+(aa*2)+bb]=="1") im05="26p.jpg";
		if (mur[pos+(aa*2)]=="1") { im03="23p.jpg"; im04="24p.jpg"; im05="25p.jpg"; };
		if (mur[pos+(aa*2)+dd]=="0") im02="21v.jpg";
		if (mur[pos+(aa*2)+bb]=="0") im06="26v.jpg";
		if (mur[pos+(aa*2)+dd]=="1") im02="21p.jpg";
		if (mur[pos+(aa*2)+bb]=="1") im06="27p.jpg";
		// 1er plan
		if (mur[pos+aa+dd]=="1") im02="11p.jpg";
		if (mur[pos+aa+bb]=="1") im06="16p.jpg";
		if (mur[pos+aa]=="1") { im02="12p.jpg"; im03="13p.jpg"; im04="14p.jpg"; im05="15p.jpg"; im06="17p.jpg"; };
		if (mur[pos+aa+dd]=="0") im01="01v.jpg";
		if (mur[pos+aa+bb]=="0") im07="07v.jpg";
		if (mur[pos+aa+dd]=="1") im01="01p.jpg";
		if (mur[pos+aa+bb]=="1") im07="07p.jpg";
		if (mur[pos+dd]=="1") im01="01.jpg";
		if (mur[pos+bb]=="1") im07="07.jpg";
		// ----------
		// IMAGES
		imgGrid_1.src = "visuels/"+im01;
		imgGrid_2.src = "visuels/"+im02;
		imgGrid_3.src = "visuels/"+im03;
		imgGrid_4.src = "visuels/"+im04;
		imgGrid_5.src = "visuels/"+im05;
		imgGrid_6.src = "visuels/"+im06;
		imgGrid_7.src = "visuels/"+im07;
		if (pos==34 && t==2) imgGrid_4.src = "visuels/bravo.jpg";
		// ----------
	}
	// -------------------
	// au chargement de page
	window.onload = function(){
		checkDoor();
		displayGrid();
	};

[EDIT] Arghhh !

Encore un souci si on "tourne" quand on est dans la case de la porte : l'animation se ré-affiche...

**bull100** · 16/09/2018, 15h29

Normalement on ne peux pas etre dans la case de la porte ??
Lorsque la porte s'ouvre on avance de deux cases... ce qui fait que la porte est refermé.

Invité · 16/09/2018, 15h44

Envoyé par bull100

Normalement on ne peux pas etre dans la case de la porte ??
Lorsque la porte s'ouvre on avance de deux cases... ce qui fait que la porte est refermé.

1- SI : quand on revient en arrière...

2- Important : il faut que pour la porte animée (le gif), tu NE mettes PAS le fond du labyrinthe !
Il faut UNIQUEMENT LA PORTE (avec fond transparent)

3- Important : il faut que tu remplaces l'image vide.jpg (fond blanc) par une image vide.png transparente.
Une image 1 x 1px suffit.
(cf pièce jointe)

Invité · 16/09/2018, 16h04

OK, j'ai réussi :

La porte s'affiche et s'anime, à l'ALLER comme au RETOUR !

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
	// Initialisation
	var
		larg = 32,
		a = [-larg, 1, larg, -1],
		b = [1, larg, -1, -larg],
		c = [larg, -1, -larg, 1],
		d = [ -1, -larg, 1, larg],
		t = 0,
		pos = 976
	;
	// Définition des MURS
	var mur = [ null,
"1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1",
"1","0","0","0","0","0","1","1","0","0","0","0","0","0","0","1","1","1","1","1","0","1","1","1","1","0","0","0","0","1","1","1",
"1","0","1","1","0","1","1","1","0","1","0","1","0","1","0","0","1","1","1","0","0","0","0","1","1","0","1","1","0","0","1","1",
"1","1","1","1","0","0","0","1","0","1","0","1","0","1","1","0","1","1","1","0","1","1","0","1","1","0","1","1","0","1","1","1",
"1","1","0","0","0","1","0","1","0","0","0","1","0","0","1","0","0","0","0","1","1","1","0","0","0","0","1","0","0","1","1","1",
"1","1","1","1","1","1","0","1","1","1","0","1","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","1","0","0","0","1",
"1","1","1","1","1","1","0","1","1","1","0","0","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","1","1","1","0","1",
"1","1","1","0","0","0","0","1","1","1","1","0","1","0","0","0","0","0","1","1","0","0","0","1","1","1","0","1","1","1","0","1",
"1","1","1","0","1","0","1","1","1","1","1","0","1","0","1","1","1","1","1","1","0","1","1","0","0","0","0","1","1","1","0","1",
"1","0","0","0","1","0","0","0","1","1","0","0","1","0","1","1","1","0","0","0","0","1","1","0","1","1","1","0","0","0","0","1",
"1","1","0","1","1","1","1","0","1","1","0","1","1","0","0","0","1","0","1","1","0","1","1","0","0","0","1","0","1","0","1","1",
"1","1","0","1","1","1","1","0","1","0","0","1","1","1","1","0","1","0","0","1","0","0","0","1","1","0","1","0","1","0","0","1",
"1","1","0","0","0","0","0","0","1","0","1","1","1","1","1","0","1","1","0","1","1","1","0","1","1","0","1","0","1","1","1","1",
"1","0","0","1","0","1","1","1","1","0","1","0","0","1","1","0","1","1","0","1","1","1","0","1","0","0","1","0","0","1","1","1",
"1","1","1","1","0","1","1","1","1","0","1","0","1","0","0","0","0","0","0","1","1","1","0","1","0","1","1","1","0","1","0","1",
"1","1","1","1","0","1","1","1","1","0","0","0","1","0","1","1","0","1","0","1","1","0","0","1","0","1","1","1","0","0","0","1",
"1","1","1","1","0","0","0","0","1","1","1","0","1","0","1","1","0","1","0","1","1","0","1","1","0","1","1","1","0","1","1","1",
"1","0","0","0","0","1","1","0","1","1","1","0","1","0","1","1","0","1","0","0","0","0","1","1","0","0","0","0","0","1","1","1",
"1","0","1","1","1","1","0","0","0","1","1","0","1","0","0","0","0","1","1","0","1","0","1","1","1","0","1","1","0","1","1","1",
"1","0","1","1","1","1","0","1","0","1","0","0","1","1","0","1","1","1","1","1","1","1","1","1","1","0","1","1","0","0","0","1",
"1","0","1","0","1","1","0","0","0","1","0","1","1","0","0","0","0","0","1","1","1","1","1","1","1","0","0","0","1","1","0","1",
"1","0","0","0","1","1","1","1","1","1","0","1","1","0","1","1","1","0","1","0","0","0","0","1","1","0","1","0","1","0","0","1",
"1","1","1","0","1","1","1","1","1","1","0","1","1","0","1","1","1","0","1","0","1","1","0","1","1","0","1","0","1","1","0","1",
"1","1","1","0","0","0","0","1","0","0","0","0","1","0","1","0","1","0","1","0","1","1","0","1","1","0","0","0","0","0","0","1",
"1","1","1","1","1","1","0","1","0","1","1","0","1","0","0","0","0","0","1","0","1","1","0","0","0","0","1","1","1","1","0","1",
"1","0","0","0","1","1","0","1","0","1","1","1","1","1","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","0","0","1",
"1","0","1","0","1","1","0","1","0","1","1","1","1","0","1","1","1","0","1","0","1","1","1","1","1","1","1","1","1","1","0","1",
"1","0","1","0","0","0","0","1","0","0","0","1","1","0","1","1","1","0","0","0","1","0","0","0","1","0","0","0","1","1","1","1",
"1","0","0","1","1","0","1","1","1","1","0","1","0","0","1","0","0","0","1","0","1","0","1","0","0","0","1","0","1","1","0","1",
"1","1","0","0","0","0","1","1","1","1","0","0","0","1","1","0","1","1","1","0","0","0","1","0","1","0","1","0","0","0","0","1",
"1","1","1","0","1","0","0","0","0","0","0","1","0","1","0","0","0","1","1","0","1","0","0","0","1","0","0","0","1","1","0","1",
"1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"
	];
	// Définition des IMAGES (GRID)
	var
		imgGrid_1 = document.getElementById('image01'),
		imgGrid_2 = document.getElementById('image02'),
		imgGrid_3 = document.getElementById('image03'),
		imgGrid_4 = document.getElementById('image04'),
		imgGrid_5 = document.getElementById('image05'),
		imgGrid_6 = document.getElementById('image06'),
		imgGrid_7 = document.getElementById('image07');
 
	// -------------------
	// Gestion des PORTES
	function checkDoor() 
	{
		// ----------
		// PORTE
		if ( (pos==976 && t==0)
      || (pos==912 && t==2)
    ){ 
      document.getElementById('porte').src = "visuels/porte.jpg"; 
			document.getElementById('porte').style.display = "block";
		} else {
			document.getElementById('porte').src = "visuels/vide.jpg";
			document.getElementById('porte').style.display = "none";
		}
	}
	// -------------------
	// ANIMATION des PORTES
	function checkDoorAnim() 
	{
		if ( (pos==944 && t==0)
		|| (pos==944 && t==2)
		){
			document.getElementById('porte').src = "visuels/porteanim.gif";
			document.getElementById('porte').style.display = "block";
			// ----------
			// on exécute la suite APRES un DELAI (durée de l'ANIMATION de la porte)
			setTimeout(function(){
			displayGrid();
			flecheb();
			document.getElementById('porte').src = "visuels/vide.jpg";
			document.getElementById('porte').style.display = "none";
			}, 1000); // 1 seconde
			// ----------
		} else {
			document.getElementById('porte').src = "visuels/vide.jpg";
			document.getElementById('porte').style.display = "none";
			// ----------
			displayGrid();
			flecheb();
			// ----------
		}
	}
	// -------------------
	// AVANCER
	function moveAhead() 
	{
		if (mur[pos+a[t]]=="0")
		{
			// ----------
			// MAP : carré noir (cases parcourues)
			j = parseInt(pos/larg);
			var spot = document.createElement('img');
			spot.setAttribute('src','visuels/carrenoir.jpg');
			spot.classList.add('trace');
			spot.style.left = 4+((pos-(j*larg))*8)+'px';
			spot.style.top = 22+(j*8)+'px';
			document.getElementById('game-map').appendChild( spot );
			pos = pos+a[t];
			// ----------
			checkDoor();
      checkDoorAnim();
		}
	}
 
	var r = 0; // global
	// -------------------
	// TOURNER à DROITE
	function moveRight()
	{
		// ----------
		// Rotation de la Boussole
		r = r - 90;
		document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
		// ----------
		t = (t+1)%4;
		// ----------
		checkDoor();
		displayGrid();
		flecheb();
	}
	// -------------------
	// TOURNER à GAUCHE
	function moveLeft()
	{
		// ----------
		// Rotation de la Boussole
		r = r + 90;
		document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
		// ----------
		t = (t+3)%4;
		// ----------
		checkDoor();
		displayGrid();
		flecheb();
	}
	// -------------------
	// MAP : flèche blanche (position du joueur)
	function flecheb()
	{
		// ----------
		j=parseInt(pos/larg);
		var spot = document.createElement('img');
		spot.setAttribute('src','visuels/carre'+(t+1)+'.jpg');
		spot.classList.add('trace');
		spot.style.left = 4+((pos-(j*larg))*8)+'px';
		spot.style.top = 22+(j*8)+'px';
		document.getElementById('game-map').appendChild( spot );
		// ----------
	}
 
	// -------------------
	// AFFICHAGE de la GRILLE
	function displayGrid() {
 
	//	console.log( pos+' - '+ t );
    // ----------
		// 3e plan
		im03="33.jpg";
		im05="35.jpg";
		aa=a[t]; bb=b[t]; cc=c[t]; dd=d[t];
		// ----------
		// MURS
		if (mur[pos+(aa*3)]=="1") im04="34p.jpg";
		if (mur[pos+(aa*3)]=="0") im04="34v.jpg";
		// 2e plan
		if (mur[pos+(aa*2)+dd]=="1") im03="22p.jpg";
		if (mur[pos+(aa*2)+bb]=="1") im05="26p.jpg";
		if (mur[pos+(aa*2)]=="1") { im03="23p.jpg"; im04="24p.jpg"; im05="25p.jpg"; };
		if (mur[pos+(aa*2)+dd]=="0") im02="21v.jpg";
		if (mur[pos+(aa*2)+bb]=="0") im06="26v.jpg";
		if (mur[pos+(aa*2)+dd]=="1") im02="21p.jpg";
		if (mur[pos+(aa*2)+bb]=="1") im06="27p.jpg";
		// 1er plan
		if (mur[pos+aa+dd]=="1") im02="11p.jpg";
		if (mur[pos+aa+bb]=="1") im06="16p.jpg";
		if (mur[pos+aa]=="1") { im02="12p.jpg"; im03="13p.jpg"; im04="14p.jpg"; im05="15p.jpg"; im06="17p.jpg"; };
		if (mur[pos+aa+dd]=="0") im01="01v.jpg";
		if (mur[pos+aa+bb]=="0") im07="07v.jpg";
		if (mur[pos+aa+dd]=="1") im01="01p.jpg";
		if (mur[pos+aa+bb]=="1") im07="07p.jpg";
		if (mur[pos+dd]=="1") im01="01.jpg";
		if (mur[pos+bb]=="1") im07="07.jpg";
		// ----------
		// IMAGES
		imgGrid_1.src = "visuels/"+im01;
		imgGrid_2.src = "visuels/"+im02;
		imgGrid_3.src = "visuels/"+im03;
		imgGrid_4.src = "visuels/"+im04;
		imgGrid_5.src = "visuels/"+im05;
		imgGrid_6.src = "visuels/"+im06;
		imgGrid_7.src = "visuels/"+im07;
		if (pos==34 && t==2) imgGrid_4.src = "visuels/bravo.jpg";
		// ----------
	}
	// -------------------
	// au chargement de page
	window.onload = function(){
		checkDoor();
		displayGrid();
	};

Ma démo : https://codepen.io/jreaux62/pen/XPYmWY

3- PORTE animée (fond transparent) :

Nom : porteanim2.gif
Affichages : 72
Taille : 97,3 Ko

**bull100** · 16/09/2018, 16h16

C'est TOP !!!! MERCI

Invité · 16/09/2018, 16h27

Ça marche !!

Tu vas pouvoir rajouter des portes où tu veux maintenant

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	function checkDoor() 
	{
		// ----------
		// PORTE
		if ( (pos==976 && t==0) || (pos==912 && t==2) // porte 1
		    // il suffit d'ajouter ici les coordonnées de la nouvelle porte (aller et retour), sans oublier le || devant
		){ 
...
	}
	// -------------------
	// ANIMATION des PORTES
	function checkDoorAnim() 
	{
		if ( (pos==944 && t==0) || (pos==944 && t==2) // porte 1
		    // il suffit d'ajouter ici les coordonnées de la nouvelle ANIMATION de porte (aller et retour), sans oublier le || devant
		){
...
	}

Le principe peut aussi fonctionner pour,..... l'apparition d'un fantôme, qui s'éloignerait en s'évaporant (gif animé, toujours), par exemple (dans le sens de l'aller, uniquement) !

Question :
1- j'ai compris pour le t (0=Nord,...)
2- mais comment fonctionne le pos ?
3- pour mur, idem : comment définis-tu la succession de 0 et 1 ?

**bull100** · 16/09/2018, 16h42

C'est génial. J'ai bloqué les touches gauche et droite pour le début car on est a l'exterieur du laby. Donc on peut juste entrer. Je vais ajouter un peu de vegetation pour cette premiere image. Par contre juste pour la premiere porte j'ai avancé de deux cases car on ne peux pas voir non plus l'exterieur.

http://bull100.pagesperso-orange.fr/.../version2.html

Une fois entrée, on ne peut plus sortir

Pour la position "pos". Le labyrinthe fait 32 cases de large. Donc x +1 ou -1 et y +32 ou -32.
Par exemple pour définir si la case devant il y a un mur ou pas c'est la "pos" -32 (suivant ton orientation)
car si tu change ton orientation du coup pos -32 passe a pos +1 puis +32 puis -1....

Voilà pour la végétation : http://bull100.pagesperso-orange.fr/.../version2.html

Si je veux mettre un dessin par dessus le laby c'est bien ca :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
    <div id="game-debut">
    <img src="visuels/debut.png" />
    </div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#game-debut { 
  position: relative;
  width: 50px;
  height: 18px;
}

Invité · 16/09/2018, 18h12

Il faut position:absolute.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#game-debut {
    position: absolute;
    width: 633px;
    height: 383px;
    top: 82px;
    left: 22px;
}

et dans function displayGrid() { :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
		// déco début
		if ( (pos==976 && t==0) )
		{ 
			document.getElementById('game-debut').style.display = "block";
		} else {
			document.getElementById('game-debut').style.display = "none";
		}

Par contre, il manque un </div> à la fin du code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div id="game-wrapper-main">
  <div id="game-wrapper">
 
    <div id="game-grid-col-left">
 
      <div id="game-grid">
        <img src="visuels/vide.jpg" id="porte" class="extra-296">
 
        <img src="visuels/vide.jpg" id="image01" />
        <img src="visuels/vide.jpg" id="image02" />
        <img src="visuels/vide.jpg" id="image03" />
        <img src="visuels/vide.jpg" id="image04" />
        <img src="visuels/vide.jpg" id="image05" />
        <img src="visuels/vide.jpg" id="image06" />
        <img src="visuels/vide.jpg" id="image07" />
      </div>
 
      <div id="game-buttons">
        <input type="image" onclick="moveLeft();" src="visuels/fleche3.png" />
        <input type="image" onclick="moveAhead();" src="visuels/fleche.png" />
        <input type="image" onclick="moveRight();" src="visuels/fleche2.png" />
        <div id="boussole-wrap">
          <img src="visuels/boussole.png" id="boussole" />
        </div>
      </div>
 
    </div>
    <div id="game-grid-col-right">
 
      <h4 id="game-titre">Aide Néphi à retrouver Marion !</h4>
 
      <div id="game-map">
        <!--<img src="visuels/carre.jpg" id="carre">-->
      </div>
 
    </div>
 
    <div id="game-footer">
      © octobre 2018 - V02 Réalisée avec l'aide du Forum "Developpez.com" (Bull - jreaux62 - psychadelic)
      <a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" id="retour-site"></a>
    </div>
 
  </div>
 
  <div id="game-debut">
    <img src="visuels/debut.png" />
  </div>
 
  <div id="game-nephi-tete">
    <img class="yeux" src="visuels/neph1.gif" />
    <img class="yeux" src="visuels/neph2.gif" />
  </div>
 
</div>

Invité · 16/09/2018, 18h57

1- Il faut aussi absolument remplacer les vide.jpg par des vide.png transparent !
Sinon, on voit un grand carré blanc... C'est moche

2- ASTUCE : pour pré-charger des images (avant leur affichage), à mettre à la fin du code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  <!-- mettre ici toutes les images (un peu lourdes) à pré-charger -->
  <div id="preload" style="display:none;">
      <img src="visuels/porte.jpg" />
      <img src="visuels/porteanim.gif" />
      <!-- ... -->
      <img src="visuels/bravo.jpg" />
      <!-- ... -->
  </div>

**bull100** · 16/09/2018, 20h55

C'est FINI !!!!!

J'ai changé la position pour te montrer.
En face il y a une porte que tu ne peux pas ouvrir et il y a une clé a gauche : http://bull100.pagesperso-orange.fr/.../version2.html

Il ne me reste plus qu'a mettre quelques cle et portes et le jeu sera fini !!
Apres juste pour le plaisir on peut ajouter quelques détails de temps en temps. comme pour les feuille qui tombent dans la premiere image. juste a l'entrée.

Il me reste aussi le bouton recommencer la partie à faire
et aussi un bouton crédit (juste une fenetre qui s'affiche en plein milieu avec une croix pour la fermé.

Plus tard, tu as raison, ca serait cool de faire des petites anim de fantomes qui sort du sol..

Qu'en penses tu ?

De suite, je place les cles et les portes...

Invité · 16/09/2018, 21h07

Hello,

le JS bugue...

1- Tu as changé la position de départ ??

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
		pos = 572 // il manque une virgule ici
		cle2 = 0

Du coup, les coordonnées qu'on a donné pour la position de début (déco de l'entrée,...) ne vont plus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
		if (pos==572 && t==0 && cle2==0 ) rien=rien; 
		else 
			// ----------
...

2- ATTENTION : Prends la BONNE habitude de TOUJOURS mettre les accolades !
Même pour une seule ligne de code.
Elles deviennent obligatoires dès qu'on a plusieurs lignes de code dedans !

3- Prends aussi soin de l'INDENTATION.
Ça facilite la lecture, et le débogage.

**bull100** · 16/09/2018, 21h14

non, j'ai changé la pos de départ juste pour te montrer la deuxieme porte.

Invité · 16/09/2018, 21h22

J'ai fait quelques corrections.

Apparemment, ce code fonctionne :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
	// Initialisation
	var
		larg = 32,
		a = [-larg, 1, larg, -1],
		b = [1, larg, -1, -larg],
		c = [larg, -1, -larg, 1],
		d = [ -1, -larg, 1, larg],
		t = 0,
		pos = 976,
	//	pos = 572,
		cle2 = 0
	;
	// DÃƒÂ©finition des MURS
	var mur = [ null,
"1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1",
"1","0","0","0","0","0","1","1","0","0","0","0","0","0","0","1","1","1","1","1","0","1","1","1","1","0","0","0","0","1","1","1",
"1","0","1","1","0","1","1","1","0","1","0","1","0","1","0","0","1","1","1","0","0","0","0","1","1","0","1","1","0","0","1","1",
"1","1","1","1","0","0","0","1","0","1","0","1","0","1","1","0","1","1","1","0","1","1","0","1","1","0","1","1","0","1","1","1",
"1","1","0","0","0","1","0","1","0","0","0","1","0","0","1","0","0","0","0","1","1","1","0","0","0","0","1","0","0","1","1","1",
"1","1","1","1","1","1","0","1","1","1","0","1","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","1","0","0","0","1",
"1","1","1","1","1","1","0","1","1","1","0","0","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","1","1","1","0","1",
"1","1","1","0","0","0","0","1","1","1","1","0","1","0","0","0","0","0","1","1","0","0","0","1","1","1","0","1","1","1","0","1",
"1","1","1","0","1","0","1","1","1","1","1","0","1","0","1","1","1","1","1","1","0","1","1","0","0","0","0","1","1","1","0","1",
"1","0","0","0","1","0","0","0","1","1","0","0","1","0","1","1","1","0","0","0","0","1","1","0","1","1","1","0","0","0","0","1",
"1","1","0","1","1","1","1","0","1","1","0","1","1","0","0","0","1","0","1","1","0","1","1","0","0","0","1","0","1","0","1","1",
"1","1","0","1","1","1","1","0","1","0","0","1","1","1","1","0","1","0","0","1","0","0","0","1","1","0","1","0","1","0","0","1",
"1","1","0","0","0","0","0","0","1","0","1","1","1","1","1","0","1","1","0","1","1","1","0","1","1","0","1","0","1","1","1","1",
"1","0","0","1","0","1","1","1","1","0","1","0","0","1","1","0","1","1","0","1","1","1","0","1","0","0","1","0","0","1","1","1",
"1","1","1","1","0","1","1","1","1","0","1","0","1","0","0","0","0","0","0","1","1","1","0","1","0","1","1","1","0","1","0","1",
"1","1","1","1","0","1","1","1","1","0","0","0","1","0","1","1","0","1","0","1","1","0","0","1","0","1","1","0","0","0","0","1",
"1","1","1","1","0","0","0","0","1","1","1","0","1","0","1","1","0","1","0","1","1","0","1","1","0","1","1","0","1","1","1","1",
"1","0","0","0","0","1","1","0","1","1","1","0","1","0","1","1","0","1","0","0","0","0","1","0","0","0","0","0","0","1","1","1",
"1","0","1","1","1","1","0","0","0","1","1","0","1","0","0","0","0","1","1","0","1","0","1","0","1","0","1","1","0","1","1","1",
"1","0","1","1","1","1","0","1","0","1","0","0","1","1","0","1","1","1","1","1","1","1","1","1","1","0","1","1","0","0","0","1",
"1","0","1","0","1","1","0","0","0","1","0","1","1","0","0","0","0","0","1","1","1","1","1","1","1","0","0","0","1","1","0","1",
"1","0","0","0","1","1","1","1","1","1","0","1","1","0","1","1","1","0","1","0","0","0","0","1","1","0","1","0","1","0","0","1",
"1","1","1","0","1","1","1","1","1","1","0","1","1","0","1","1","1","0","1","0","1","1","0","1","1","0","1","0","1","1","0","1",
"1","1","1","0","0","0","0","1","0","0","0","0","1","0","1","0","1","0","1","0","1","1","0","1","1","0","0","0","0","0","0","1",
"1","1","1","1","1","1","0","1","0","1","1","0","1","0","0","0","0","0","1","0","1","1","0","0","0","0","1","1","1","1","0","1",
"1","0","0","0","1","1","0","1","0","1","1","1","1","1","1","1","1","1","1","0","1","1","1","1","0","1","1","1","1","0","0","1",
"1","0","1","0","1","1","0","1","0","1","1","1","1","0","1","1","1","0","1","0","1","1","1","1","1","1","1","1","1","1","0","1",
"1","0","1","0","0","0","0","1","0","0","0","1","1","0","1","1","1","0","0","0","1","0","0","0","1","0","0","0","1","1","1","1",
"1","0","0","1","1","0","1","1","1","1","0","1","0","0","1","0","0","0","1","0","1","0","1","0","0","0","1","0","1","1","0","1",
"1","1","0","0","0","0","1","1","1","1","0","0","0","1","1","0","1","1","1","0","0","0","1","0","1","0","1","0","0","0","0","1",
"1","1","1","0","1","0","0","0","0","0","0","1","0","1","0","0","0","1","1","0","1","0","0","0","1","0","0","0","1","1","0","1",
"1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"
	];
	// DÃƒÂ©finition des IMAGES (GRID)
	var
		imgGrid_1 = document.getElementById('image01'),
		imgGrid_2 = document.getElementById('image02'),
		imgGrid_3 = document.getElementById('image03'),
		imgGrid_4 = document.getElementById('image04'),
		imgGrid_5 = document.getElementById('image05'),
		imgGrid_6 = document.getElementById('image06'),
		imgGrid_7 = document.getElementById('image07');
 
	// -------------------
	// Gestion des PORTES
	function checkDoor() 
	{
		// ----------
		// PORTE
		if ( (pos==976 && t==0)
		  || (pos==912 && t==2)
		  || (pos==572 && t==0)
		  || (pos==508 && t==2)
		){ 
			document.getElementById('porte').src = "visuels/porte.jpg"; 
			document.getElementById('porte').style.display = "block";
		} else {
			document.getElementById('porte').src = "visuels/vide.png";
			document.getElementById('porte').style.display = "none";
		}
	}
	// -------------------
	// ANIMATION des PORTES
	function checkDoorAnim() 
	{
		if ( (pos==944 && t==0)
		  || (pos==540 && t==0)
		  || (pos==540 && t==2)
		){
			document.getElementById('porte').src = "visuels/porteanim.gif";
			document.getElementById('porte').style.display = "block";
			// ----------
			// on execute la suite APRES un DELAI (duree de l'ANIMATION de la porte)
			setTimeout(function(){
			displayGrid();
			flecheb();
			document.getElementById('porte').src = "visuels/vide.png";
			document.getElementById('porte').style.display = "none";
			}, 1000); // 1 seconde
			// ----------
		} else {
			document.getElementById('porte').src = "visuels/vide.png";
			document.getElementById('porte').style.display = "none";
			// ----------
			displayGrid();
			flecheb();
			// ----------
		}
	}
	// -------------------
	// AVANCER
	function moveAhead() 
	{
		if (mur[pos+a[t]]=="0") 
		{
		if (pos==572 && t==0 && cle2==0 )
		{ 
			rien=rien; 
		}
		else 
		{
			// ----------
			// MAP : carrÃƒÂ© noir (cases parcourues)
			j = parseInt(pos/larg);
			var spot = document.createElement('img');
			spot.setAttribute('src','visuels/carrenoir.jpg');
			spot.classList.add('trace');
			spot.style.left = 4+((pos-(j*larg))*8)+'px';
			spot.style.top = 22+(j*8)+'px';
			document.getElementById('game-map').appendChild( spot );
			pos = pos+a[t];
			// ----------
			checkDoor();
			checkDoorAnim();
		}
	}}
 
	var r = 0; // global
	// -------------------
	// TOURNER A DROITE
	function moveRight()
	{
		if (pos!=976) 
		{
			// ----------
			// Rotation de la Boussole
			r = r - 90;
			document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
			// ----------
			t = (t+1)%4;
			// ----------
			checkDoor();
			displayGrid();
			flecheb();
		}
	}
	// -------------------
	// TOURNER A GAUCHE
	function moveLeft()
	{
		if (pos!=976) 
    {
			// ----------
			// Rotation de la Boussole
			r = r + 90;
			document.getElementById('boussole').style.transform = "rotate("+r+"deg)";
			// ----------
			t = (t+3)%4;
			// ----------
			checkDoor();
			displayGrid();
			flecheb();
		}
	}
	// -------------------
	// MAP : flÃƒÂ¨che blanche (position du joueur)
	function flecheb()
	{
		// ----------
		j=parseInt(pos/larg);
		var spot = document.createElement('img');
		spot.setAttribute('src','visuels/carre'+(t+1)+'.jpg');
		spot.classList.add('trace');
		spot.style.left = 4+((pos-(j*larg))*8)+'px';
		spot.style.top = 22+(j*8)+'px';
		document.getElementById('game-map').appendChild( spot );
		// ----------
	}
	// -------------------
	// AFFICHAGE de la GRILLE
	function displayGrid() {
		if (pos==944){ pos=912; }
		//	console.log( pos+' - '+ t );
		// ----------
 		// dÃ©co dÃ©but
		if ( (pos==976 && t==0) )
		{ 
			document.getElementById('game-debut').style.display = "block";
		} else {
			document.getElementById('game-debut').style.display = "none";
		}
		// ----------
		// 3e plan
		im03="33.jpg";
		im05="35.jpg";
		aa=a[t]; bb=b[t]; cc=c[t]; dd=d[t];
		// ----------
		// MURS
		if (mur[pos+(aa*3)]=="1") im04="34p.jpg";
		if (mur[pos+(aa*3)]=="0") im04="34v.jpg";
		// 2e plan
		if (mur[pos+(aa*2)+dd]=="1") im03="22p.jpg";
		if (mur[pos+(aa*2)+bb]=="1") im05="26p.jpg";
		if (mur[pos+(aa*2)]=="1") { im03="23p.jpg"; im04="24p.jpg"; im05="25p.jpg"; };
		if (mur[pos+(aa*2)+dd]=="0") im02="21v.jpg";
		if (mur[pos+(aa*2)+bb]=="0") im06="26v.jpg";
		if (mur[pos+(aa*2)+dd]=="1") im02="21p.jpg";
		if (mur[pos+(aa*2)+bb]=="1") im06="27p.jpg";
		// 1er plan
		if (mur[pos+aa+dd]=="1") im02="11p.jpg";
		if (mur[pos+aa+bb]=="1") im06="16p.jpg";
		if (mur[pos+aa]=="1") { im02="12p.jpg"; im03="13p.jpg"; im04="14p.jpg"; im05="15p.jpg"; im06="17p.jpg"; };
		if (mur[pos+aa+dd]=="0") im01="01v.jpg";
		if (mur[pos+aa+bb]=="0") im07="07v.jpg";
		if (mur[pos+aa+dd]=="1") im01="01p.jpg";
		if (mur[pos+aa+bb]=="1") im07="07p.jpg";
		if (mur[pos+dd]=="1") im01="01.jpg";
		if (mur[pos+bb]=="1") im07="07.jpg";
		// ----------
		// IMAGES
		imgGrid_1.src = "visuels/"+im01;
		imgGrid_2.src = "visuels/"+im02;
		imgGrid_3.src = "visuels/"+im03;
		imgGrid_4.src = "visuels/"+im04;
		imgGrid_5.src = "visuels/"+im05;
		imgGrid_6.src = "visuels/"+im06;
		imgGrid_7.src = "visuels/"+im07;
		// ----------
		if ( (pos==34 && t==2) ){ imgGrid_4.src = "visuels/bravo.jpg"; }
		if ( (pos==568 && t==2 && cle2==0 ) ){ imgGrid_4.src = "visuels/cle.jpg"; }
		if (pos==600 ){ cle2=1; }
	}
	// -------------------
	// au chargement de page
	window.onload = function(){
		checkDoor();
		displayGrid();
	};

**bull100** · 16/09/2018, 21h37

ahhh... Est ce que tu as fait beaucoup de correction parceque j'avais déjà fait pas mal de modif sur le JS. Je viens de le mettre ne ligne...

Invité · 16/09/2018, 21h42

Demain, je reprendrai ton code JS (à partir de la page en ligne), pour l'optimiser, en le créant sous forme d'objet.

Compare ces 2 codes :

https://codepen.io/jreaux62/pen/EeaNgo (codé comme le tien)
https://codepen.io/jreaux62/pen/xaberO (codé avec un objet)

D'autre part, pour tous les éléments supplémentaires (les clés,....) : il ne faut pas les mettre sur des images du labyrinthe.
Il faut faire comme pour la porte coulissante :

soit un .gif (si animé)
soit un .png

Dans les 2 cas : sur fond transparent !!

De cette manière, on peut ajouter un bout de code CSS, pour faire "flotter" la clé, par exemple.
(c'est valable aussi pour l'image de fin : Marion !)

Je pense qu'on a bien bossé pour aujourd'hui !!

**bull100** · 16/09/2018, 22h07

Ah oui, une clé animée cool. un effet un peu magique, ca peut être sympa

en tout cas, mise à part quelques détails, le jeu est fini ! les portes et clés sont placées. Ouff et c'est grace a toi, un GRAND merci !
Je pense que ca pourra faire une activité sympa pour le festival et un plus pour l'univers de ma BD. C'est interactif, c'est cool.

L'avantage, c'est que je n'ai toujours pas bossé sur mes figurines mais maintenant je n'ai plus d'excuse pour ne pas m'y remettre

Beau boulot !

Ps : Pour la première case (avec la végétation) finalement je trouve pas ca top. Je me demande si je ne vais pas retirer la végétation (ca fait chargé) et retirer les fleches gauche et droite vue que l'on ne peut pas les utiliser sur cette case... Qu'en penses tu ?
Ou alors mettre le credit au milieu du dessin. ex "jeu inspiré de l'univers de la BD le voyage de Néphi. Dessin Bull - Programmation Jreaux62 (Developpez.com) et Bull. Et a la place des flèches mettre une touche "Démarrer le jeu". Finalement faire l'intro le moins chargé possible de facon a pouvoir mettre des feuilles qui tombent par la suite...

Jeu CSS/JS multi-niveaux ?

JavaScript

Discussions similaires

Partager

Partager