Jeu CSS/JS multi-niveaux ?

**psychadelic** · 10/09/2018, 16h04

de ce que j'ai vu, l'hébergement de site perso sur Orange ne permet pas d'utiliser du PHP. juste HTML / CSS / JS...

il y a bien sur la commande mailto => https://developer.mozilla.org/fr/doc...ML/Liens_email mais je te déconseille, c'est le meilleur moyen pour recevoir des tonnes de span ensuite.

Il existe sans doute des services externes pour incorporer un formulaire dans tes pages, mais ce sera toujours dans la logique de recevoir un mail "étranger" puis à toi de l'incorporer manuellement dans une page.

En fait, à part l'idée de faire héberger ton site sur un vrai serveur, payant ou personnel, je vois pas d'autres solutions.
la plus part des CMS incorporent des gestion de commentaires ou d'envoi de mail, mais cela ne te retirera pas l'obligation légale sur leur modération.

**bull100** · 10/09/2018, 18h55

Òk, merci.
Sinon pour les formulaires gratuits j'utilise ca : http://fr.foxyform.com/

C'est vraiment bien et pas de surprise jusque là

Une ébauche pour donner un petite idée de la mise en coul...

Nom : couleurs.png
Affichages : 104
Taille : 336,0 Ko

**bull100** · 13/09/2018, 00h23

Bonjour,

Svp, est ce possible de placer les <div> au pixel pret ? ou est ce que c'est vraiment des boites que je dois imbriquer les unes sur les autres ?

lien : http://bull100.pagesperso-orange.fr/.../version2.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
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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>NéphI Trip</title>
  <style>
  {
  margin: 0;
  border: 0;
  padding: 0;
}
body {
  text-align: center;
  background-image: url(http://bull100.pagesperso-orange.fr/jeu/visuels/fond.png);
  background-repeat: repeat;
}
#game-wrapper {
  display: inline-block;
  position: relative;
  margin: 30px auto 0 auto;
  padding: 5px;
  border-radius: 0px;
  background-repeat: no-repeat;
  background-size: 853px 912px;
  background-image: url("visuels/interface.png");
  font-family: Arial, sans-serif;
  color: #000;
  text-align: center;
}
#game-header p {
  font-weight: bold;
  padding: 0px;
}
#game-grid {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
#game-grid img {
  display: inline-block;
  float: left;
}
 
#game-footer {
  display: table;
  margin: 0 auto;
}
#game-footer > div {
  display: table-cell;
  vertical-align: top;
}
 
#game-extras p {
  text-align: center;
  font-size: 75%;
  padding: 5px;
}
 
#game-buttons input {
  margin: 0;
  display: inline-block;
  border: 3px solid transparent;
  border-radius: 15px;
}
#game-buttons input:hover {
  border-color: #fff;
}
 
#game-map {
  position: relative;
}
#game-map img#parchemin {
  position: relative;
}
#game-map img#carre, #game-map img.trace {
  position: absolute;
  width: 8px;
  height: 8px;
} /* top et left doivent être défini par défaut, et modifiés via le JavaScript */
 
</style>
</head>
<body>
  <div id="game-wrapper">
 
	<div id="game-header">
 
		<p>AIDE NEPHI A RETROUVER MARION !</p>
	</div>
 
	<div id="game-grid">
		<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-footer">
 
		<div id="game-footer-left">
 
			<div id="game-buttons">
				<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" />
			</div>
 
			<div id="game-extras">
				<p><img src="visuels/bou1.png" id="boussole"/><br>
				<a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" id="retour-site" /></a><br>
				© septembre 2018 - Version 01<br>Réalisé avec l'aide du Forum "Developpez.com"<br>(jreaux62 - psychadelic)</p>
			</div>
 
		</div>
		<div id="game-footer-right">
 
			<div id="game-map">
				<img src="visuels/parchemin.png" id="parchemin" />
 
			</div>
 
		</div>
 
	</div>
 
</div>
 
  <script defer>
    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
    ;
    // var mur = new objet (
    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","0","0","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","1","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","1","0","1","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"
      ] //)
    ;
    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')
    ;
 
    function moveAhead() {
      if (mur[pos+a[t]]=="0")   { 
      j=parseInt(pos/larg);
var spot = document.createElement('img');
   spot.setAttribute('src','visuels/carrenoir.jpg');
   spot.classList.add('trace');
   spot.style.left = 56+((pos-(j*larg))*8)+'px';
   spot.style.top = 22+(j*8)+'px';
document.getElementById('game-map').appendChild( spot );
pos=pos+a[t];
   }
   }
    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 = 56+((pos-(j*larg))*8)+'px';
   spot.style.top = 22+(j*8)+'px';
document.getElementById('game-map').appendChild( spot );
   }
 
 
    function moveRight() {
      // t = t+1;
      // if (t==4) t=0; // c'est plus cool avec l'utilisation du modulo ( = reste de la division )
      t = (t+1)%4;
      document.getElementById('boussole').src = "visuels/bou"+(t+1)+".png";
    }
    function moveLeft() {
      //t = t-1;
      //if (t==-1) t=3;
      t = (t+3)%4;
      document.getElementById('boussole').src = "visuels/bou"+(t+1)+".png";
    }
    function displayGrid() {
      // 3e plan
      im03="33";
      im05="35";
      aa=a[t]; bb=b[t]; cc=c[t]; dd=d[t];
 
      if (mur[pos+(aa*3)]=="1") im04="34p";
      if (mur[pos+(aa*3)]=="0") im04="34v";
      // 2e plan
      if (mur[pos+(aa*2)+dd]=="1") im03="22p";
      if (mur[pos+(aa*2)+bb]=="1") im05="26p";
      if (mur[pos+(aa*2)]=="1") { im03="23p"; im04="24p"; im05="25p"; };
      if (mur[pos+(aa*2)+dd]=="0") im02="21v";
      if (mur[pos+(aa*2)+bb]=="0") im06="26v";
      if (mur[pos+(aa*2)+dd]=="1") im02="21p";
      if (mur[pos+(aa*2)+bb]=="1") im06="27p";
      // 1er plan
      if (mur[pos+aa+dd]=="1") im02="11p";
      if (mur[pos+aa+bb]=="1") im06="16p";
      if (mur[pos+aa]=="1") { im02="12p"; im03="13p"; im04="14p"; im05="15p"; im06="17p"; };
      if (mur[pos+aa+dd]=="0") im01="01v";
      if (mur[pos+aa+bb]=="0") im07="07v";
      if (mur[pos+aa+dd]=="1") im01="01p";
      if (mur[pos+aa+bb]=="1") im07="07p";
      if (mur[pos+dd]=="1") im01="01";
      if (mur[pos+bb]=="1") im07="07";
 
      imgGrid_1.src = "visuels/"+im01+".jpg";
      imgGrid_2.src = "visuels/"+im02+".jpg";
      imgGrid_3.src = "visuels/"+im03+".jpg";
      imgGrid_4.src = "visuels/"+im04+".jpg";
      imgGrid_5.src = "visuels/"+im05+".jpg";
      imgGrid_6.src = "visuels/"+im06+".jpg";
      imgGrid_7.src = "visuels/"+im07+".jpg";
      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();
    };
  </script>
</body>
</html>

Invité · 13/09/2018, 00h54

Bonjour,

Si tu veux, tu peux dimensionner chaque div, chaque image au pixel près.

Ex. (CSS en ligne) :

Code html :

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

<div style="width:.....px; height:.....px;">

Ça n'empêche pas d'imbriquer des "boîtes" !
(Si tu dessines avec Photoshop, tu sais comme t découper et récupérer les dimensions et positions relatives)

À retenir : pour positionner un élément * (en absolute), l'élément "parent" doit aussi être positionné (en relative ou absolute).

* Ex. : la boussole.

**psychadelic** · 13/09/2018, 02h03

Envoyé par bull100

Svp, est ce possible de placer les <div> au pixel pret ? ou est ce que c'est vraiment des boites que je dois imbriquer les unes sur les autres ?

Oui, il y plus ou moins moyen, mais c'est pas fait pour ça...

En fait tu raisonnes comme un graphiste, alors que le HTML est pensé pour faire de la mise en page dynamique.

Le HTML est pensé pour des textes. les div et autres sont juste la pour différencier les différentes parties que sont les titres, les chapitres, les contenus et à l'intérieur d'eux les images les annotations, etc.
Avec le principe qu'un texte sur 3 colonnes peut se retrouver en 1 ou2 colonnes sur un écran moins large, etc...
Bref, on est pas sur une composition graphique.
[Par défaut] on ne place pas au pixel prés mais on compose une page : les éléments sont situés les uns par rapport aux autres, dans leur ordre de lecture.

En imbriquant les éléments dans une boite on arrive a contrôler leur positionnement, par exemple si tu place un bloc de 200pixels de large dans un bloc de 300pixels, tu sait qu'il te reste 100pixels de libre;

mais attention comme les blocs sont avant tout pensé pour du texte, ton bloc de 200pixel peut utiliser 240pixels pour lui car il utilise une marge de 20pixels sur chaque coté, idem pour le bloc suivant
s'il fait plus de pixels en largeur avec ses marges inclues, il passera sous le bloc précédent.
Il y a aussi l'histoire du padding dans les blocs, cad qu'ils repoussent d'autant à l'intérieur d'eux même les éléments qu'ils peuvent contenir.

Et les blocs ne sont pas censé être limité en hauteur, ils s'allongent autant que nécessaire que leur contenus le demande.

Bref, ne cherche pas à contrôler la disposition de tes blocs par le biais de coordonnées précises, parce que même ainsi tu aura toujours des problème de marges et autres à gérer aussi, et tu t'épuisera à lutter contre une mécanique qui n'est pas pensée dans cette manière d'agir.

**bull100** · 13/09/2018, 08h11

Merci

Je regarde ca

Invité · 13/09/2018, 10h01

Bonjour,

Je vais encore contredire psychadelic... même s'il a globalement raison.
On pourrait croire que ce n'est pas possible, ou en tout cas compliqué : c'est faux !

1- Il existe une propriété CSS qui permet de ne pas tenir compte des margin/padding/border dans les calculs de largeur/hauteur :

Code css :

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

box-sizing:border-box;

Mets donc au début de ton CSS :

Code css :

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

1
2
3
4
5
6
* {
   border:0;
   padding:0;
   border:0;
   box-sizing:border-box;
}

Ainsi, quand tu définiras un bloc de 200px, il fera bien 200px.

2- C'est vrai que dans une optique de site "responsive", on définira souvent les dimensions en %.
Mais ce n'est pas obligatoire !

Tu peux définir tes dimensions en pixels.
Mais si tu souhaites être "responsive", il faut envisager de modifier la mise en page sur écran plus petits.

Pour cela, il existe les media queries qui permettent de définir les break-points.
Mais je ne vais pas te bouffer le mou avec ça pour l'instant...

Bref : concentre-toi sur ta mise en page actuelle !

**bull100** · 13/09/2018, 10h56

Ok, merci a tout les deux

Par contre, pour ce style de page, je suis obligé de retirer les % et mettre en pixel parceque même si l'écran est plus petit, les "div" doivent rester à leurs places. Sinon l'interface ne sera plus bon.

J'ai refais mon étude pour que ce soit plus simple à gerer.

Je vais essayer de mettre tt ca en place....

Nom : 1.png
Affichages : 97
Taille : 332,4 Ko

Nom : 1.png
Affichages : 97
Taille : 332,4 Ko

Nom : 2.png
Affichages : 95
Taille : 317,1 Ko

Invité · 13/09/2018, 11h45

OK, c'est mieux.
(c'est plus compatible avec le format des écrans)

1- Pour la dimension de l'ensemble, tu peux te baser sur le ratio le plus standard pour un écran :
1600/1200 px - 1024/768 px - 960/720 px - 640/480 px, soit un rapport de 4/3.

2- Ce que je voulais dire concernant les petit écran :
Ça dépend si on affiche l'écran en "paysage" ou en "portrait".

Là, ton design est en format "paysage".
Tu pourrais être amené à faire une version "portrait" pour smartphone, par exemple, sans forcément devoir modifier les dimensions des éléments principaux (grid, map, boutons), ni le script JS.
C'est juste une réorganisation de l'ensemble : modification de l'image de fond, positionnement (CSS) des différents éléments les uns par rapport aux autres,...

3- IDEE : tu pourrais même proposer un bouton qui permettrait de passer du format "paysage" au format "portrait" !
(quel que soit le media)

**bull100** · 13/09/2018, 11h53

J'ai réduit le code au plus simple mais je dois me planter quelques part...

Aperçu : http://bull100.pagesperso-orange.fr/.../version2.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
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
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>NéphI Trip</title>
  <style>
  {
  margin: 0;
  border: 0;
  padding: 0;
}
body {
  text-align: center;
  background-image: url(http://bull100.pagesperso-orange.fr/jeu/visuels/fond.png);
  background-repeat: repeat;
}
#game-wrapper {
  display: inline-block;
  position: relative;
  margin: 30px auto 0 auto;
  padding: 5px;
  border-radius: 0px;
  background-repeat: no-repeat;
 
  background-image: url("visuels/interface.png");
  font-family: Arial, sans-serif;
  color: #000;
  text-align: center;
}
#game-header p {
  font-weight: bold;
  padding: 0px;
}
#game-grid {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
#game-grid img {
  display: inline-block;
  float: left;
}
 
#game-footer {
  display: table;
  margin: 0 auto;
}
#game-footer > div {
  display: table-cell;
  vertical-align: top;
}
 
#game-extras p {
  text-align: center;
  font-size: 75%;
  padding: 5px;
}
 
#game-buttons input {
  margin: 0;
  display: inline-block;
  border: 3px solid transparent;
  border-radius: 15px;
}
#game-buttons input:hover {
  border-color: #fff;
}
 
#game-map {
  position: relative;
}
#game-map img#parchemin {
  position: relative;
}
#game-map img#carre, #game-map img.trace {
  position: absolute;
  width: 8px;
  height: 8px;
} /* top et left doivent être défini par défaut, et modifiés via le JavaScript */
 
</style>
</head>
<body>
<div id="game-wrapper">
 
	<div style="width:1051px; height:107px";></div>
 
	<tr><td><p><div>
		<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" />
	<br>
		<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" />
		<img src="visuels/bou1.png" />
 
	</div></p></td>
 
	<td><p><div style="width:293px; height:168px";><a>AIDE NEPHI</a>
	<a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" /></a><br>
				© septembre 2018 - Version 01<br>Réalisé avec l'aide du Forum "Developpez.com"<br>(jreaux62 - psychadelic)</p>
	</div></p></td></tr>
 
</div>
 
 
 
  <script defer>
    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
    ;
    // var mur = new objet (
    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","0","0","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","1","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","1","0","1","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"
      ] //)
    ;
    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')
    ;
 
    function moveAhead() {
      if (mur[pos+a[t]]=="0")   { 
      j=parseInt(pos/larg);
var spot = document.createElement('img');
   spot.setAttribute('src','visuels/carrenoir.jpg');
   spot.classList.add('trace');
   spot.style.left = 56+((pos-(j*larg))*8)+'px';
   spot.style.top = 22+(j*8)+'px';
document.getElementById('game-map').appendChild( spot );
pos=pos+a[t];
   }
   }
    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 = 56+((pos-(j*larg))*8)+'px';
   spot.style.top = 22+(j*8)+'px';
document.getElementById('game-map').appendChild( spot );
   }
 
 
    function moveRight() {
      // t = t+1;
      // if (t==4) t=0; // c'est plus cool avec l'utilisation du modulo ( = reste de la division )
      t = (t+1)%4;
      document.getElementById('boussole').src = "visuels/bou"+(t+1)+".png";
    }
    function moveLeft() {
      //t = t-1;
      //if (t==-1) t=3;
      t = (t+3)%4;
      document.getElementById('boussole').src = "visuels/bou"+(t+1)+".png";
    }
    function displayGrid() {
      // 3e plan
      im03="33";
      im05="35";
      aa=a[t]; bb=b[t]; cc=c[t]; dd=d[t];
 
      if (mur[pos+(aa*3)]=="1") im04="34p";
      if (mur[pos+(aa*3)]=="0") im04="34v";
      // 2e plan
      if (mur[pos+(aa*2)+dd]=="1") im03="22p";
      if (mur[pos+(aa*2)+bb]=="1") im05="26p";
      if (mur[pos+(aa*2)]=="1") { im03="23p"; im04="24p"; im05="25p"; };
      if (mur[pos+(aa*2)+dd]=="0") im02="21v";
      if (mur[pos+(aa*2)+bb]=="0") im06="26v";
      if (mur[pos+(aa*2)+dd]=="1") im02="21p";
      if (mur[pos+(aa*2)+bb]=="1") im06="27p";
      // 1er plan
      if (mur[pos+aa+dd]=="1") im02="11p";
      if (mur[pos+aa+bb]=="1") im06="16p";
      if (mur[pos+aa]=="1") { im02="12p"; im03="13p"; im04="14p"; im05="15p"; im06="17p"; };
      if (mur[pos+aa+dd]=="0") im01="01v";
      if (mur[pos+aa+bb]=="0") im07="07v";
      if (mur[pos+aa+dd]=="1") im01="01p";
      if (mur[pos+aa+bb]=="1") im07="07p";
      if (mur[pos+dd]=="1") im01="01";
      if (mur[pos+bb]=="1") im07="07";
 
      imgGrid_1.src = "visuels/"+im01+".jpg";
      imgGrid_2.src = "visuels/"+im02+".jpg";
      imgGrid_3.src = "visuels/"+im03+".jpg";
      imgGrid_4.src = "visuels/"+im04+".jpg";
      imgGrid_5.src = "visuels/"+im05+".jpg";
      imgGrid_6.src = "visuels/"+im06+".jpg";
      imgGrid_7.src = "visuels/"+im07+".jpg";
      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();
    };
  </script>
</body>
</html>

Invité · 13/09/2018, 12h06

Je te confirme...

Code :

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

<tr><td><p><div>

Tu ne peux pas écrire du code HTML si tu n'y connais RIEN.
Les balises HTML ont chacune une fonction, une utilisation et une sémantique.
On ne peut pas tout mélanger n'importe comment.

Reprends ton design :

AVANT de coder :
DESSINE LES BOITES !
C'est ça qui te permettra d'écrire le code HTML

Montre-nous le dessin de tes boites (avec des couleurs différentes, pour être plus facile à lire).

N.B. Je pourrais (encore) le faire pour toi, mais tu n'apprendrais rien...

**bull100** · 13/09/2018, 12h09

Envoyé par psychadelic

En fait tu raisonnes comme un graphiste, alors que le HTML est pensé pour faire de la mise en page dynamique.

En fait je bosse en PAO - Mises en pages et pub Hebdos sur Photoshop, Illustrator et Indesign. Pour la programmation je bricole un peu, mais j'adore ca.

Les boites se présentent ainsi :

Nom : 2.png
Affichages : 99
Taille : 317,1 Ko

Nom : 2.png
Affichages : 99
Taille : 317,1 Ko

J'avais fait mon premier site avec le Bloc-note. Je voulais faire plusieurs pages dans un même fichier (index) de facon a ce que je puisse facilement faire des modifs (déco) sur toutes les pages. J'avais trouvé un code qui me permettais de placer tt au pixels. Ex : http://bull100.pagesperso-orange.fr/

Après j'ai découvert "Iweb" (eh oui, je bosse sur un vieux mac

), J'ai donc abandonné javascript : http://bull100.pagesperso-orange.fr/...n/accueil.html

Mais je prefère largement tester ta méthode qui est plus pro...

Je pensais faire deux cellules :

Gauche :
dessin du labyrinthe (la tete de mon perso sera coupé mais je l'ajouterais sur la partie graphique du laby)
fleches
boussoles
Copyright

Droite :
Texte (qui changera au cours du jeu)
le plan
bouton retour

Invité · 13/09/2018, 13h44

Envoyé par bull100

Les boites se présentent ainsi : ...

NON.
Ce que tu montres, ce ne sont pas les "BOITES", mais les "éléments" que tu veux placer dans la page.
Pour en faire la STRUCTURE HTML, il faut AJOUTER des BOITES, qui vont permettre de les positionner facilement.

Code :

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

(la tete de mon perso sera coupé mais je l'ajouterais sur la partie graphique du laby)

NON PLUS.
Tu peux en effet "découper" la tête de NEPHI, et l'enregistrer en PNG (fond transparent).
On peut ensuite mettre cette image "par dessus" le labyrinthe, en CSS.

Comme je doute que tu t'en sortes rapidement, voici ce que moi j'ai fait : https://codepen.io/jreaux62/pen/XPYmWY
(après tout, tu m'as mis dans le copyright ! )

**bull100** · 13/09/2018, 14h07

Oh Super, bravo ! et merci

Lorsque j'avance dans le laby il y a le mur de droite qui ne s'affiche pas. Je ne sais pas si c'est le copy/coller que j'ai fouaré ou si c'est le programme que j'avais saboté avec mes div. Est ce que ca fonctionne de ton coter ?

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

Invité · 13/09/2018, 14h11

Voilà ce que j'entendais par "DESSINER les BOITES" :

Nom : interface-boites.png
Affichages : 108
Taille : 362,7 Ko

Invité · 13/09/2018, 14h14

Envoyé par bull100

...Lorsque j'avance dans le laby il y a le mur de droite qui ne s'affiche pas...

L'image passe en dessous !
Elle fait surement quelques pixels en trop en largeur !

Dans la configuration de départ, les images font respectivement : 107 - 83 - 51 - 128 - 51 - 83 - 107 pixels de largeur.
il faut respecter ces largeurs pour toutes les images.

Ex. : l'image 25p.jpg fait 52 px !
Et vu qu'on est au pixel près...

**bull100** · 13/09/2018, 14h18

Du coup j'ai compris le principe pour les boites. Merci.
Par contre c'est super compliqué à appliqué.

Ok pour les visuels. Je vais les redimensionner

Invité · 13/09/2018, 14h24

Envoyé par bull100

...Par contre c'est super compliqué à appliqué...

Pas forcément.
C'est une structuration des éléments.

C'est vrai qu'on pourrait TOUT positionner en "absolute".
Mais ce n'est pas la bonne méthode.

En HTML, on essaie de respecter et suivre le "flux" naturel de la page.

Les position:absolute sont à réserver aux éléments qu'on ne peut pas "caser" dans le "flux".
Comme, ici, la tête de Nephi et le bouton "retour".

Remarque :Les "BOITES" sont forcément des RECTANGLES.
On peut les mettre les unes à coté des autres, les imbriquer,...

Dès qu'on est obligé de mettre une boite PAR DESSUS les autres (tête de Nephi, bouton "retour") -> il faut utiliser position:absolute.

Autres remarques (liée au JS) :

1- Le point de départ du labyrinthe doit être mal défini sur la map, car, en circulant, on "sort" de la map.

2- PIRE : les déplacement des carrés sur la map ne correspond pas toujours aux mouvements effectués (tout droit, tourner,...).

3- Et je ne vois plus le carré blanc.
Tu l'as supprimé ?

**bull100** · 13/09/2018, 14h37

J'ai redimensionné les visuels. C'est ok.
Non pour la fleche qui se déplace je n'ai rien touché. j'étais justement en train de regarder.

Code HTML :

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

<input type="image" onclick="moveLeft(); displayGrid(); flecheb();" src="visuels/fleche3.png" />

il manquait juste le fleche();

Je repositionne les carrés dans la map

Edit: Tout est ok

Il ne me reste plus qu'à faire le graphisme du laby.

Merci !!!!!

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

Invité · 13/09/2018, 15h13

Tu peux supprimer (ou la laisser) cette ligne de ton code :

Code :

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

<base href="http://bull100.pagesperso-orange.fr/jeu/version2/" />

Elle sert à fournir le chemin pour les URLS relatives (comme celles des images).
C'est ce qui me permet d'afficher TES images dans mon script.

Jeu CSS/JS multi-niveaux ?

JavaScript

Discussions similaires

Partager

Partager