Jeu CSS/JS multi-niveaux ?

**bull100** · 09/09/2018, 10h21

Voilà pour la premiere version : http://http://bull100.pagesperso-orange.fr/jeu/version1.html

Pour la ligne copyright, j'ai fait un peu mon feignant, c'est une image.

Pour la version2, que je ferais plus tard, j'ajouterai un plan. Dans le plan il y aura un petit carré qui donne notre position et il se déplacera en même temps que nous en laissant le carré prédedent affiché. Ce qui fait que toute les zones vues du labyrinthe seront visible sur ce plan et rendra le jeu un peu plus simple.

un peu comme ceci :
Nom : opin.jpg
Affichages : 129
Taille : 51,8 Ko

Nom : opin.jpg
Affichages : 129
Taille : 51,8 Ko

Par contre je n'ai pas vraiment compris pour placer une image au pixel pret sur le jeu. Est possible ?
ex :

Code :

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

1
2
#game-grid img#carre { display:??;  position: ??; right: ??; bottom: ??;  }
<img src="visuels/carre.jpg" id="carre" />

et lorsque je vais deplacer ce "carre" le précedent va disparaitre. Dois je creer une nouvelle image à chaque fois ? style : #game-grid img#carre[i] ....

A bientôt et merci

Invité · 09/09/2018, 12h06

Envoyé par bull100

...pour placer une image au pixel pret sur le jeu. Est possible ?

Oui.

1- il faut que :

le conteneur soit en position:relative; (pour servir de référence)
l'image sera en position:absolute;, et ses coordonnées définies par top:...px; left:yyypx;
Pour le déplacement, les valeurs top et left peuvent être modifiées via le JavaScript

2- une autre solution consiste à utiliser <map> et <area>.

N.B. Je suis allé faire un tour sur ton site.
Je confirme : je suis épaté

(néanmoins, ça aurait mérité un "vrai" hébergement, plutôt que les "pages perso Orange")

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

Merci jreaux62 ! J'ai réussi à placer mes objets. Cool.

Ça donne çà : http://bull100.pagesperso-orange.fr/jeu/version1.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
<!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(visuels/fond.png);
      background-repeat:repeat;
    } 
    #GroupeFondGris {
      display:inline-block;
      position:relative;
      margin:30px auto 0 auto;
      background-color: #777777;
      min-height: calc(100vh - 30px); /* les 30px sont attribués à la marge du haut */
    }
    #game-grid { display:inline-block; position:relative; margin:0 auto; }
    #game-grid img { display:inline-block; float:left; }
    #game-grid img#bou { position:absolute; margin-left: -580px; margin-top: 475px; }
    #game-grid img#ret { position:absolute; margin-left: -610px; margin-top: 555px;  }
    #game-grid img#tx { position:absolute; margin-left: -601px; margin-top: 602px;  }
     #game-grid img#parchemin { position:absolute; margin-left: -355px; margin-top: 382px;  }   
    #game-grid img#carre { position:absolute; margin-left: -165px; margin-top: 630px;  }
    #game-buttons { position:absolute; margin-left: 40px; margin-top: 5px;}
    #game-buttons input { margin: 0 0px; display:inline-block; border:3px solid transparent; border-radius: 15px; }
    #game-buttons input:hover { border-color:#444444 }
</style>
</head>
<body>
  <div id="GroupeFondGris">
 
    <img src="visuels/titre.png" />
    <br /><img src="visuels/aide.png" /><br />
 
    <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" />
 
      <img src="visuels/bou1.png" id="bou" />
      <a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" id="ret" /></a>
      <img src="visuels/copy.png" id="tx" />
      <img src="visuels/parchemin.png" id="parchemin" />
      <img src="visuels/carre.jpg" id="carre" />
 
    </div><!-- game-grid -->
 
    <div id="game-buttons">
      <input type="image" onclick="moveLeft(); displayGrid();" src="visuels/fleche3.png" />
      <input type="image" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
      <input type="image" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
    </div><!-- game-buttons -->
 
  </div><!-- GroupeFondGris -->
 
  <script defer>
    var
      larg = 20,
      a = [-larg, 1, larg, -1],
      b = [1, larg, -1, -larg],
      c = [larg, -1, -larg, 1],
      d = [ -1, -larg, 1, larg],
      t = 0,
      pos = 610
    ;
    // 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", "0", "0", "0", "1", "1", "1", "0", "1","0", "0", "1","0", "0", "1", "0", "0", "0", "1", "1",
      "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "1", "1","1", "0", "0", "1", "1", "0", "1", "1",
      "1", "1", "1", "0", "1", "0", "0", "0", "1","0", "0", "0","1", "1", "1", "1", "0", "0", "0", "1",
      "1", "1", "1", "0", "1", "1", "1", "1", "1","0", "1", "0","1", "1", "0", "0", "0", "1", "0", "1",
      "1", "0", "0", "0", "1", "1", "1", "1", "1","0", "1", "1","1", "1", "0", "1", "0", "1", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "1","0", "1", "0","0", "0", "0", "1", "0", "0", "0", "1",
      "1", "1", "0", "1", "1", "1", "0", "0", "0","0", "1", "0","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "0", "0", "1", "1", "1", "0", "1", "1","0", "0", "0","1", "1", "0", "0", "0", "0", "0", "1",
      "1", "1", "0", "0", "1", "1", "0", "1", "1","1", "0", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "0", "0", "1", "0", "0", "0","1", "0", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "1", "0", "1", "1", "1", "1","1", "1", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "1", "0", "1", "1", "1", "1","1", "1", "0","1", "1", "0", "0", "0", "0", "0", "1",
      "1", "1", "0", "0", "0", "1", "1", "1", "0","1", "0", "0","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "1", "0", "1", "0", "1", "0", "0", "0","1", "0", "1","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "0","1", "0", "1","1", "0", "0", "1", "0", "0", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "0","0", "0", "0","0", "0", "1", "1", "1", "1", "1", "1",
      "1", "0", "0", "0", "0", "0", "0", "1", "1","1", "1", "1","1", "0", "1", "1", "1", "1", "1", "1",
      "1", "0", "1", "1", "0", "1", "1", "1", "0","0", "0", "0","1", "0", "1", "1", "0", "0", "0", "1",
      "1", "0", "1", "1", "0", "1", "1", "1", "1","1", "1", "0","1", "0", "0", "0", "0", "1", "0", "1",
      "1", "0", "0", "1", "0", "1", "1", "1", "1","1", "0", "0","1", "1", "1", "1", "1", "1", "0", "1",
      "1", "1", "1", "1", "0", "0", "0", "0", "1","1", "1", "0","1", "0", "0", "1", "1", "0", "0", "1",
      "1", "1", "1", "1", "0", "1", "0", "1", "1","1", "0", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "1", "0", "0", "0", "1", "0", "1", "1","1", "1", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "0", "0", "1", "1", "1", "0", "0", "0","0", "0", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "1", "0", "0", "1", "1", "1", "1", "1","1", "1", "1","1", "0", "0", "0", "1", "0", "1", "1",
      "1", "1", "1", "0", "1", "0", "1", "1", "1","1", "1", "1","1", "0", "1", "0", "0", "0", "0", "1",
      "1", "1", "1", "0", "1", "0", "1", "1", "1","1", "1", "1","1", "1", "1", "0", "1", "1", "0", "1",
      "1", "0", "0", "0", "1", "0", "1", "0", "1","0", "0", "0","0", "1", "1", "0", "1", "0", "0", "1",
      "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "1", "1","0", "0", "0", "0", "1", "1", "0", "1",
      "1", "0", "1", "1", "1", "0", "0", "0", "1","0", "1", "1","1", "0", "1", "0", "1", "0", "0", "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")   pos=pos+a[t];
 
   }
    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('bou').src = "visuels/bou"+(t+1)+".png";
    }
    function moveLeft() {
      //t = t-1;
      //if (t==-1) t=3;
      t = (t+3)%4;
      document.getElementById('bou').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==22 && 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>

J'ai donc créé mon carré (jaune) et maintenant je dois le déplacer en meme temps que mon déplacement dans le labyrinthe. Je dois donc mettre l'instruction ici :

Code JavaScript :

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

1
2
3
4
    function moveAhead() {
      if (mur[pos+a[t]]=="0")   pos=pos+a[t];
 
   }

Mais j'ai fais des recherches et fais beaucoup d'essais mais je n'ai malheureusement pas trouvé pour que ce curseur jaune se déplace et laisse l'image "carrenoir.jpg" derriere lui...

Invité · 09/09/2018, 14h35

Envoyé par bull100

...J'ai réussi à placer mes objets....

Non.

Ton principal problème est de ne pas savoir faire de positionnement des éléments en HTML/CSS.
Il ne faut pas abuser des position:absolute; (surtout avec des margin-top/left !)

Il faut que tu imagines des BOITES (les <div>).
Ces boites, on les positionne les unes par rapport aux autres. On peut aussi les imbriquer.
Dans ces boites, on met du contenu (images, textes,...)

Bref : il faut que tu commences par DESSINER ces boites, et comment elles s'imbriquent !
C'est ça qui va te donner la structure HTML.
Ensuite, le CSS permettra de positionner ces boites.

N.B. Il ne faut pas abuser des "images" non plus : quand c'est du texte, on écrit le texte... textuellement !

Voilà une base de travail :

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
<div id="game-wrapper">
 
	<div id="game-header">
		<img src="visuels/titre.png" /><br />
		<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();" src="visuels/fleche3.png" />
				<input type="image" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
				<input type="image" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
			</div>
 
			<div id="game-extras">
				<img src="visuels/bou1.png" id="boussole" /><br />
				<p><a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" id="retour-site" /></a></p>
				<p>© septembre 2018 .........</p>
			</div>
 
		</div>
		<div id="game-footer-right">
 
			<div id="game-map">
				<img src="visuels/parchemin.png" id="parchemin" />
				<img src="visuels/carre.jpg" id="carre" />
			</div>
 
		</div>
 
	</div>
 
</div>

**bull100** · 09/09/2018, 14h54

et lorsque j'affiche par exemple : document.getElementById('carre').src = "visuels/carre.jpg"; Puis-je changer la position avant ? ex: i=i+10; ........ margin-left: "+i+" px-; margin-top: 630px;"

lol, je devais arreter hier car j'ai encore pas mal de taff mais lorsque je me lance dans la programmation je n'arrive pas à m'en décrocher. C'est horrible !!

il ne me reste plus que ca a faire et j'en ai fini avec cette première version et plus tard je passerais au graphisme qui risque de me demander pas mal de temps

Invité · 09/09/2018, 15h12

D'abord le CSS qui va bien (avec le HTML que j'ai donnée ci-avant) :

Code css :

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
* {
  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: 15px;
  background-color: #777;
  font-family: Arial, sans-serif;
  color: #fff;
  text-align: center;
}
#game-header p {
  font-weight: bold;
  padding: 5px;
}
#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: 6px;
  height: 6px;
} /* top et left doivent être défini par défaut, et modifiés via le JavaScript */

Invité · 09/09/2018, 15h21

Maintenant, le petit carré jaune....

1- il faut le positionner sur la carte.
top et left (en pixels) sont définis PAR RAPPORT à cette carte (visuels/parchemin.png)
(avec photoshop, ou autre, tu peux facilement trouver la "position de départ")

2- pour le déplacer : c'est simple, on modifier dynamiquement (via JS) les top et left.

3- Ensuite, pour "laisser" une trace" (carré noir)...
Là, il va falloir à chaque déplacement CREER une nouvelle image, avec les coordonnes de l'ancienne position du carré jaune.

La méthode "simple" :

Code JavaScript :

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

1
2
3
// pos_x_old, pos_y_old
var spot = '<img src="visuels/carre-noir.jpg" class="trace" style="left:'+pos_x_old+'px; top:'+pos_y_old+'px;" />';
document.getElementById('game-map').appendChild( spot );

La méthode plus conventionnelle (en créant l'élément dans le DOM) :

Code JavaScript :

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

1
2
3
4
5
6
7
// pos_x_old, pos_y_old
var spot = document.createElement('img');
   spot.setAttribute('src','visuels/carre-noir.jpg');
   spot.classList.add('trace');
   spot.style.left = pos_x_old+'px';
   spot.style.top = pos_y_old+'px';
document.getElementById('game-map').appendChild( spot );

N.B. il faut aussi positionner ces images (classe "trace") en absolute ;

Code css :

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

1
2
3
4
5
6
#game-map img#carre, 
#game-map img.trace {
  position: absolute;
  width: 6px;
  height: 6px;
} /* top et left doivent être défini par défaut, et modifiés via le JavaScript */

**psychadelic** · 09/09/2018, 15h25

Envoyé par bull100

La logic au niveau du programme ?
La logic vient de moi, c'est ce que j'avais fait il il y plus de 30 ans sur Amstrad. tres peu de memoire donc il fallait faire un programme tres court. Pas de limite sur la taille du labyrinthe. Il suffit d'ajouter des 0 ou 1 pour les murs. Plus tard j'ajouterai des portes donc, 0, 1, et 2 pour les portes à ouvrir ou pas avec des clés.

OK, donc, pour chaque case il existe 4 infos = ( 0 => pas de mur, 1=> il y a un mur) et ce pour le Nord, Est,Ouest et Sud.
et chaque case du damier renseigné dans ton tableau, même les cases non utilisées, ce qui fait qu'il y a des tas de cases inutilisées ?

pour dessiner, tu prend en compte l'orientation dans la case, et les positions 1 et 7 sont le visuel au premier plan, 2 et 6 au second plan, 3 le 5 le 3e plan et le 4 pour ce qui est au fond mais en tenant compte de sa profondeur, c'est aussi le même pb pour les 2e et 3e plans.

c'est bon, je ne me suis pas trompé sur la logique d'affichage ??

Envoyé par bull100

Merci pour les retouches. Ça fait vraiment plaisir car le programme est très propre et claire

plaisir partagé, ton projet est très sympa

Envoyé par bull100

J'ai testé sur un téléphone, la page ne s'ajuste pas sur le fond gris et je me demande si c'est le fait que le fond gris est trop grand en hauteur ?

non, j'ai pas trop le temps la, mais ce serait plutôt un problème de largeur (?) comme il y a moins de place, il réarrange les éléments?
et ça devrait pouvoir se régler par un min-width:873px; sur le body, (c'est la largeur de la plus grande image de fond - et normalement ce devrait être inutile de faire ça)
ce qui donne:

Code CSS :

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

1
2
3
4
5
6
    body {
      text-align:center;
      background-image:url(visuels/fond.png);
      background-repeat:repeat;
      min-width:873px;
    }

mais j'ai pas testé, pour moi le langage CSS rest encore un truc capricieux, jreaux62 aurait sans doute de éclaircissements à donner

Envoyé par bull100

Tit question, comment puis-je faire pour que l'on puisse jouer à ce jeu uniquement en passant par mon site ? Par exemple en remplaçant "visuels/image.jpg" par "http://bull100.pagesperso-orange.fr/jeu/visuels/image.jpg" est ce que ça suffirait ?

je ne comprends pas trop la question, et je vois pas trop comment on pourrait y jouer autrement que par ton site ??
les lien relatifs ou directs ne changent pas grand chose...

PS: pour le carré jaune, tu peux jouer sur le canal apha pour régler une opacité, soit directement dans ton image de carré, soit par l'utilisatio d'un élement HTML (span ou autre, que tu cale en bloc en lui indicant une couleur rgba)

Invité · 09/09/2018, 15h32

Envoyé par bull100

Tit question, comment puis-je faire pour que l'on puisse jouer à ce jeu uniquement en passant par mon site ? Par exemple en remplaçant "visuels/image.jpg" par "http://bull100.pagesperso-orange.fr/jeu/visuels/image.jpg" est ce que ca suffirait ?

J'avais zappé cette question...

Le code JavaScript est écrit directement dans la page (contrairement à du code PHP, par exemple).
N'importe qui peut l'afficher, et le copier.

C'est ce que j'ai fait ici : https://codepen.io/jreaux62/pen/MqrJvY

Cela dit, j'ai ajouté cette ligne :

Code :

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

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

Ce qui permet d'afficher TES images (celles sur TON serveur).
Mais rien ne m'empêche de les copier... ou d'en utiliser d'autres de mon cru.

On avait cherché des solutions dans cette discussion, mais sans grand succès.

**bull100** · 09/09/2018, 15h45

jreaux62 :
Je suis un peu perdu. Dans tout ce que tu m'as refait c'est pour exemple ? ou est ce que je peux l'utiliser et le mettre dans mon programme ?

est ce qu'il faut que je fasse 3 fichiers (html, Js, Css) ?

Invité · 09/09/2018, 15h54

Ce que je t'ai fourni est fonctionnel.
Je ne me suis occupé que du HTML et CSS, qui sont "tes points faibles"...

La structure HTML est saine.
Le CSS aussi.
(cela dit, je n'ai pas testé sur smatphone)

Je te laisse bien sûr gérer tout le JavaScript !
(les bouts de code JS que j'ai donné ici sont à adapter, bien sûr).

Envoyé par bull100

est ce qu'il faut que je fasse 3 fichiers (html, Js, Css) ?

Si tu veux, car ça permet de bien séparer les 3 langages.
Mais en l’occurrence, ce n'est pas forcément nécessaire.

N.B. une solution pour rendre la lecture moins facile (mais qui n'empêchera pas de copier les code !!) : minifier.

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

Bon du coup ca créer un bug dans le jeu. le déplacement ne se fait plus.

J'ai du allez trop vite dans mes "copier/coller."

Je vais essayer de voir tout ca la semaine prochaine

Encore merci pour tout .

Le code :

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
<!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: 15px;
  background-color: #777;
  font-family: Arial, sans-serif;
  color: #fff;
  text-align: center;
}
#game-header p {
  font-weight: bold;
  padding: 5px;
}
#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: 6px;
  height: 6px;
} /* 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">
		<img src="visuels/titre.png" /><br />
		<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();" src="visuels/fleche3.png" />
				<input type="image" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
				<input type="image" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
			</div>
 
			<div id="game-extras">
				<img src="visuels/bou1.png" id="boussole" /><br />
				<p><a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" id="retour-site" /></a></p>
				<p>© septembre 2018 .........</p>
			</div>
 
		</div>
		<div id="game-footer-right">
 
			<div id="game-map">
				<img src="visuels/parchemin.png" id="parchemin" />
				<img src="visuels/carre.jpg" id="carre" />
			</div>
 
		</div>
 
	</div>
 
</div>
 
  <script defer>
    var
      larg = 20,
      a = [-larg, 1, larg, -1],
      b = [1, larg, -1, -larg],
      c = [larg, -1, -larg, 1],
      d = [ -1, -larg, 1, larg],
      t = 0,
      pos = 610
    ;
    // 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", "0", "0", "0", "1", "1", "1", "0", "1","0", "0", "1","0", "0", "1", "0", "0", "0", "1", "1",
      "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "1", "1","1", "0", "0", "1", "1", "0", "1", "1",
      "1", "1", "1", "0", "1", "0", "0", "0", "1","0", "0", "0","1", "1", "1", "1", "0", "0", "0", "1",
      "1", "1", "1", "0", "1", "1", "1", "1", "1","0", "1", "0","1", "1", "0", "0", "0", "1", "0", "1",
      "1", "0", "0", "0", "1", "1", "1", "1", "1","0", "1", "1","1", "1", "0", "1", "0", "1", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "1","0", "1", "0","0", "0", "0", "1", "0", "0", "0", "1",
      "1", "1", "0", "1", "1", "1", "0", "0", "0","0", "1", "0","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "0", "0", "1", "1", "1", "0", "1", "1","0", "0", "0","1", "1", "0", "0", "0", "0", "0", "1",
      "1", "1", "0", "0", "1", "1", "0", "1", "1","1", "0", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "0", "0", "1", "0", "0", "0","1", "0", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "1", "0", "1", "1", "1", "1","1", "1", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "1", "0", "1", "1", "1", "1","1", "1", "0","1", "1", "0", "0", "0", "0", "0", "1",
      "1", "1", "0", "0", "0", "1", "1", "1", "0","1", "0", "0","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "1", "0", "1", "0", "1", "0", "0", "0","1", "0", "1","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "0","1", "0", "1","1", "0", "0", "1", "0", "0", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "0","0", "0", "0","0", "0", "1", "1", "1", "1", "1", "1",
      "1", "0", "0", "0", "0", "0", "0", "1", "1","1", "1", "1","1", "0", "1", "1", "1", "1", "1", "1",
      "1", "0", "1", "1", "0", "1", "1", "1", "0","0", "0", "0","1", "0", "1", "1", "0", "0", "0", "1",
      "1", "0", "1", "1", "0", "1", "1", "1", "1","1", "1", "0","1", "0", "0", "0", "0", "1", "0", "1",
      "1", "0", "0", "1", "0", "1", "1", "1", "1","1", "0", "0","1", "1", "1", "1", "1", "1", "0", "1",
      "1", "1", "1", "1", "0", "0", "0", "0", "1","1", "1", "0","1", "0", "0", "1", "1", "0", "0", "1",
      "1", "1", "1", "1", "0", "1", "0", "1", "1","1", "0", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "1", "0", "0", "0", "1", "0", "1", "1","1", "1", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "0", "0", "1", "1", "1", "0", "0", "0","0", "0", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "1", "0", "0", "1", "1", "1", "1", "1","1", "1", "1","1", "0", "0", "0", "1", "0", "1", "1",
      "1", "1", "1", "0", "1", "0", "1", "1", "1","1", "1", "1","1", "0", "1", "0", "0", "0", "0", "1",
      "1", "1", "1", "0", "1", "0", "1", "1", "1","1", "1", "1","1", "1", "1", "0", "1", "1", "0", "1",
      "1", "0", "0", "0", "1", "0", "1", "0", "1","0", "0", "0","0", "1", "1", "0", "1", "0", "0", "1",
      "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "1", "1","0", "0", "0", "0", "1", "1", "0", "1",
      "1", "0", "1", "1", "1", "0", "0", "0", "1","0", "1", "1","1", "0", "1", "0", "1", "0", "0", "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")   pos=pos+a[t];
 
   }
    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('bou').src = "visuels/bou"+(t+1)+".png";
    }
    function moveLeft() {
      //t = t-1;
      //if (t==-1) t=3;
      t = (t+3)%4;
      document.getElementById('bou').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==22 && 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é · 09/09/2018, 16h15

Rectification:

Les codes HTML et CSS sont fonctionnels.....
...mais il peut en effet être nécessaire de faire quelques adaptations dans le code JS (suite aux changements de noms des <div>).

Exemple : j'ai mis id="boussole" !
document.getElementById('bou').src = ... -> document.getElementById('boussole').src = ....

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

Bien vu. C'est ce qui créait le Bug

Je vais voir maintenant pour déplacer le carré jaune...

**psychadelic** · 09/09/2018, 17h01

heu, et pour mes questions ? ( https://www.developpez.net/forums/d1.../#post10462254 )
mais rien ne presse, je suis pas trop dispo aujourd’hui, peut être très tard ce soir...

PS: pour la partie plan, je verrai bien un svg (ou sinon canvas mais je maitrise moins), ce qui permet de dessinner le plan dynamiquement en fonction du tableau "mur".
C'est ton code et je respecte cela, mais je peux te proposer une autre manière de faire, si je trouve le temps, parce c'est quand même une belle pièce

**bull100** · 09/09/2018, 17h37

jreaux62 : ça fonctionne ! Bon par contre on voit le carré uniquement lorsque l'on fait un premier déplacement et le <p></p> met un espace entre la boussole et le bouton. C'est dommage.

Apercu : http://bull100.pagesperso-orange.fr/jeu/version1.html

Le code :

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
<!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: 15px;
  background-color: #777;
  font-family: Arial, sans-serif;
  color: #fff;
  text-align: center;
}
#game-header p {
  font-weight: bold;
  padding: 5px;
}
#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: 6px;
  height: 6px;
} /* 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">
		<img src="visuels/titre.png" /><br />
		<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();" src="visuels/fleche3.png" />
				<input type="image" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
				<input type="image" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
			</div>
 
			<div id="game-extras">
				<img src="visuels/bou1.png" id="boussole" />
				<p><a href="http://bull100.pagesperso-orange.fr/marion/marion/accueil.html"><img src="visuels/retour.png" id="retour-site" /></a></p>
				<p>© 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 = 20,
      a = [-larg, 1, larg, -1],
      b = [1, larg, -1, -larg],
      c = [larg, -1, -larg, 1],
      d = [ -1, -larg, 1, larg],
      t = 0,
      pos = 610
    ;
    // 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", "0", "0", "0", "1", "1", "1", "0", "1","0", "0", "1","0", "0", "1", "0", "0", "0", "1", "1",
      "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "1", "1","1", "0", "0", "1", "1", "0", "1", "1",
      "1", "1", "1", "0", "1", "0", "0", "0", "1","0", "0", "0","1", "1", "1", "1", "0", "0", "0", "1",
      "1", "1", "1", "0", "1", "1", "1", "1", "1","0", "1", "0","1", "1", "0", "0", "0", "1", "0", "1",
      "1", "0", "0", "0", "1", "1", "1", "1", "1","0", "1", "1","1", "1", "0", "1", "0", "1", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "1","0", "1", "0","0", "0", "0", "1", "0", "0", "0", "1",
      "1", "1", "0", "1", "1", "1", "0", "0", "0","0", "1", "0","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "0", "0", "1", "1", "1", "0", "1", "1","0", "0", "0","1", "1", "0", "0", "0", "0", "0", "1",
      "1", "1", "0", "0", "1", "1", "0", "1", "1","1", "0", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "0", "0", "1", "0", "0", "0","1", "0", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "1", "0", "1", "1", "1", "1","1", "1", "1","1", "1", "1", "1", "1", "0", "1", "1",
      "1", "1", "1", "1", "0", "1", "1", "1", "1","1", "1", "0","1", "1", "0", "0", "0", "0", "0", "1",
      "1", "1", "0", "0", "0", "1", "1", "1", "0","1", "0", "0","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "1", "0", "1", "0", "1", "0", "0", "0","1", "0", "1","1", "1", "0", "1", "1", "1", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "0","1", "0", "1","1", "0", "0", "1", "0", "0", "0", "1",
      "1", "1", "0", "1", "1", "1", "1", "1", "0","0", "0", "0","0", "0", "1", "1", "1", "1", "1", "1",
      "1", "0", "0", "0", "0", "0", "0", "1", "1","1", "1", "1","1", "0", "1", "1", "1", "1", "1", "1",
      "1", "0", "1", "1", "0", "1", "1", "1", "0","0", "0", "0","1", "0", "1", "1", "0", "0", "0", "1",
      "1", "0", "1", "1", "0", "1", "1", "1", "1","1", "1", "0","1", "0", "0", "0", "0", "1", "0", "1",
      "1", "0", "0", "1", "0", "1", "1", "1", "1","1", "0", "0","1", "1", "1", "1", "1", "1", "0", "1",
      "1", "1", "1", "1", "0", "0", "0", "0", "1","1", "1", "0","1", "0", "0", "1", "1", "0", "0", "1",
      "1", "1", "1", "1", "0", "1", "0", "1", "1","1", "0", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "1", "0", "0", "0", "1", "0", "1", "1","1", "1", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "0", "0", "1", "1", "1", "0", "0", "0","0", "0", "0","1", "0", "1", "1", "1", "0", "1", "1",
      "1", "1", "0", "0", "1", "1", "1", "1", "1","1", "1", "1","1", "0", "0", "0", "1", "0", "1", "1",
      "1", "1", "1", "0", "1", "0", "1", "1", "1","1", "1", "1","1", "0", "1", "0", "0", "0", "0", "1",
      "1", "1", "1", "0", "1", "0", "1", "1", "1","1", "1", "1","1", "1", "1", "0", "1", "1", "0", "1",
      "1", "0", "0", "0", "1", "0", "1", "0", "1","0", "0", "0","0", "1", "1", "0", "1", "0", "0", "1",
      "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "1", "1","0", "0", "0", "0", "1", "1", "0", "1",
      "1", "0", "1", "1", "1", "0", "0", "0", "1","0", "1", "1","1", "0", "1", "0", "1", "0", "0", "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 = 100+((pos-(j*larg))*8)+'px';
   spot.style.top = 0+(j*8)+'px';
document.getElementById('game-map').appendChild( spot );
pos=pos+a[t];
j=parseInt(pos/larg);
var spot = document.createElement('img');
   spot.setAttribute('src','visuels/carre.jpg');
   spot.classList.add('trace');
   spot.style.left = 100+((pos-(j*larg))*8)+'px';
   spot.style.top = 0+(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==22 && 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>

psychadelic : Désolé pour la réponse tardive. Oui tu l'as bien cerné. Pour les variables du laby (0,1) je fais en sorte de tout utiliser. Pour l'affichage du laby je projette ma visions a trois déplacement devant. Ensuite je calcule ce que je devrais afficher au troisième plan, puis au deuxième, puis au premier sans me soucier. Dans cette logique mon premier plan sera donc la priorité d'affichage. Ensuite j'affiche mes dessins en fonction des murs ou pas.

Invité · 09/09/2018, 18h00

Envoyé par bull100

...Bon par contre on voit le carré uniquement lorsque l'on fait un premier deplacement...

Code JavaScript :

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

1
2
3
4
5
6
var spot = document.createElement('img');
   spot.setAttribute('src','visuels/carrenoir.jpg');
   spot.classList.add('trace');
   spot.style.left = 100+((pos-(j*larg))*8)+'px';
   spot.style.top = 0+(j*8)+'px';
document.getElementById('game-map').appendChild( spot );

Ça, c'est valable UNIQUEMENT pour le carré noir : on crée une NOUVELLE IMAGE à CHAQUE déplacement.

Pour le carré blanc, c'est différent :

1- l'image doit être présente au chargement, dans le code HTML :

Code html :

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

        <img src="visuels/carre.jpg" id="carre">

2- Dans le JS :
2a- on initialise la position (juste après la définition de pos = 610;) :

Code JavaScript :

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

1
2
3
4
 var carre = document.getElementById("carre");
    j = parseInt(pos / larg);
    carre.style.left = 100 + (pos - j * larg) * 8 + "px";
    carre.style.top = 0 + j * 8 + "px";

2b- on modifie les paramètres CSS top et left de CETTE IMAGE (on n'en crée pas de nouvelle).
Remplace les lignes 195 à 201 par :

Code JavaScript :

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

1
2
3
    j = parseInt(pos / larg);
   carre.style.left = 100+((pos-(j*larg))*8)+'px';
   carre.style.top = 0+(j*8)+'px';

Ainsi, on n'a qu'UNE SEULE image, qu'on déplace.

Envoyé par bull100

...<p></p> met un espace entre la boussole et le bouton. C'est dommage.

Ca, ce n'est pas difficile :

Code css :

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

1
2
3
4
5
6
#game-extras p {
    text-align: center;
    font-size: 75%;
    padding: 0 5px;
    margin: 0;
}

**bull100** · 09/09/2018, 18h22

Bien content d'avoir fini cette première version ce week-end ! Grace à vous

Je reviens des que j'aurais terminé la deuxième version: Les graphismes. Mais avant j'ai pas mal de taff à rattraper

Savez vous ou je pourrais trouver un TchaT gratuit (opensource) sans pub ?
Ca pourrait être sympa si j'ajoutai un petit Tchat juste en dessous pour savoir qui a réussi à faire le tour du jeu.
Pas un Tchat avec speudo, inscription etc. Mais juste une fenetre ou on peut laissant un petit mot et que ca garde en memoire...

Invité · 09/09/2018, 18h55

Ce n'est pas un chat.

Juste un formulaire.

"script livre d'or"

Livre d'Or PHP avec fichier texte (sans base de données)

**bull100** · 09/09/2018, 20h37

Merci. Par contre je m'y connais encore moins au PHP.
Je vais regarder sur le web. Un truc tout simple style taper du texte dans une fenetre et une fois validé elle s'affiche en permanance dans une autre. Pas de pseudo, mail...
Et de plus je suis sur Orange. Je ne sais même pas si il prend le PHP

Jeu CSS/JS multi-niveaux ?

JavaScript

Discussions similaires

Partager

Partager