Jeu CSS/JS multi-niveaux ?

**bull100** · 07/09/2018, 20h43

Bonjour

Je me lance, juste pour le fun, sur la programmation en javascript et html. Je vais essayé de faire une petit jeu.
Je vais avoir quelques sprites à afficher et j'ai trouvé comment les placer en x,y. Par contre j'aimerai que mes sprites puissent être également centré suivant la largeur de la page. Quelqu'un peut m'aider, svp ?

Ex :

Code HTML :

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

1
2
3
<div align="center" style="background-image: url(visuels/fond.jpg); width: 800px; height: 400px"> 
<div style="position:absolute; left:500; top:40;"><img src="visuels/ess.png"  alt="ess"></div>
</div>

mais ca ne se centre pas dans la page !?

pour résumer : Mes sprites seront dans ma fenetre 800 x 400 et j'aimerai que cette fenetre soit centré dans la page html.

Pat.

Invité · 07/09/2018, 21h10

Bonjour,

Envoyé par bull100

...mais ca ne se centre pas dans la page !?....

Tu m'étonnes, Elton...

1- supprime align="center", qui est obsolète depuis le siècle dernier.
2- remplace-le dans le style css par margin:0 auto;.

Et OUBLIE les position:absolute;, surtout si que tu ne sais pas l'utiliser...

Je t'invite à LIRE et ETUDIER les cours et tutoriels pour apprendre le CSS.

**bull100** · 07/09/2018, 22h05

Merci

Pour le moment j'ai récupéré un visuel sur le web. Je le dessinerai plus tard.

J'ai fait un essai pour le déplacement. j'ai juste changé la première image lorsque l'on click sur la flèche. Par contre je ne comprend pas pourquoi il y a un espace entre les deux premiers visuels ? Est ce à cause du "#" ?

Programme :

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function avance() {
document.image01.src = "visuels/02.jpg";
}
</script>
 
<div style="background-image: url(visuels/fond.jpg); margin: 0 auto;  width: 846px; height: 406px"> 
 
<img src="visuels/01.jpg" name="image01" style="border: none;">
<img src="visuels/02.jpg" style="border: none;"><img src="visuels/03.jpg"><img src="visuels/04.jpg"><img src="visuels/05.jpg"><img src="visuels/06.jpg"><img src="visuels/07.jpg">
<br><a href="#" onclick="avance();"><img style="border: none;" src="visuels/fleche.png"></a>
 
</div>

**bull100** · 08/09/2018, 14h35

Je vais refaire les dessins.

Par contre je n'ai toujours pas trouvé comment retirer les bandes blanches entre chaque sprites.

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
<script>
var larg = 12;
var a = new Array(-larg, 1, larg, -1)
var b = new Array(1, larg, -1, -larg)
var c = new Array(larg, -1, -larg, 1)
var d = new Array( -1, -larg, 1, larg)
 
t=0
var pos = 65;
var mur = new objet (
"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","1", "1", "1",
"1", "0", "0", "0", "0", "1", "0", "0", "0","0", "0", "0",
"1", "0", "1", "1", "0", "1", "1", "0", "1","1", "1", "0",
"1", "0", "1", "0", "0", "0", "1", "0", "1","0", "0", "0",
"1", "1", "1", "1", "1", "1", "1", "1", "1","1", "1", "1")
 
function avance() {
if (mur[pos+a[t]]=="0")  pos=pos+a[t];
}
function tourne() {
t=t+1
if (t==4) t=0;
}
function tourne2() {
t=t-1
if (t==-1) t=3;
}
function affiche() {
// 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";
document.image01.src = "visuels/"+im01+".jpg";
document.image02.src = "visuels/"+im02+".jpg";
document.image03.src = "visuels/"+im03+".jpg";
document.image04.src = "visuels/"+im04+".jpg";
document.image05.src = "visuels/"+im05+".jpg";
document.image06.src = "visuels/"+im06+".jpg";
document.image07.src = "visuels/"+im07+".jpg";
}
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}
 
 
</script>
 
<div style="margin: 0 auto;  width: 846px; height: 406px"> 
 
<img src="visuels/01.jpg" name="image01" style="border: none;">
<img src="visuels/02.jpg" name="image02" style="border: none;">
<img src="visuels/03.jpg" name="image03" style="border: none;">
<img src="visuels/04.jpg" name="image04" style="border: none;">
<img src="visuels/05.jpg" name="image05" style="border: none;">
<img src="visuels/06.jpg" name="image06" style="border: none;">
<img src="visuels/07.jpg" name="image07" style="border: none;">
<script>affiche();
</script>
<br>
<a href="#" onclick="tourne2(); affiche();"><img style="border: none;" src="visuels/fleche3.png"></a>
<a href="#" onclick="avance(); affiche();"><img style="border: none;" src="visuels/fleche.png"></a>
<a href="#" onclick="tourne(); affiche();"><img style="border: none;" src="visuels/fleche2.png"></a>
 
</div>

**psychadelic** · 08/09/2018, 15h02

Pour enlever les espaces à l'affichage sur tes images, il faut coder ainsi :

Code html :

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

1
2
3
4
5
6
7
8
 
<img src="visuels/01.jpg" name="image01" /><
 img src="visuels/02.jpg" name="image02" /><
 img src="visuels/03.jpg" name="image03"  /><
 img src="visuels/04.jpg" name="image04"  /><
 img src="visuels/05.jpg" name="image05"  /><
 img src="visuels/06.jpg" name="image06"  /><
 img src="visuels/07.jpg" name="image07"  />

parce que bien sur, le navigateur prends en compte le retour à la ligne (entre le /> et le <img suivant )et l’interprète comme un espace.

**bull100** · 08/09/2018, 15h13

Super. Merci

Invité · 08/09/2018, 15h13

Bonjour,

je suis épaté : je ne m'attendais pas à ça

Bon.
Il faut mettre un peu d'ordre, et séparer les codes HTML et CSS.
On va en profiter pour :

renommer les fonctions JavaScript,
et remplacer les liens <a> par des <imput type="image"

Je te conseille aussi d'indenter ton code. Ce sera plus facile à lire.

Ce qui donne :

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title></title>
<script>
var larg = 12;
var a = new Array(-larg, 1, larg, -1)
var b = new Array(1, larg, -1, -larg)
var c = new Array(larg, -1, -larg, 1)
var d = new Array( -1, -larg, 1, larg)
 
t=0
var pos = 65;
var mur = new objet (
        "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","1", "1", "1",
        "1", "0", "0", "0", "0", "1", "0", "0", "0","0", "0", "0",
        "1", "0", "1", "1", "0", "1", "1", "0", "1","1", "1", "0",
        "1", "0", "1", "0", "0", "0", "1", "0", "1","0", "0", "0",
        "1", "1", "1", "1", "1", "1", "1", "1", "1","1", "1", "1")
 
function moveAhead() {
        if (mur[pos+a[t]]=="0")  pos=pos+a[t];
}
function moveRight() {
        t=t+1;
        if (t==4) t=0;
}
function moveLeft() {
        t=t-1;
        if (t==-1) t=3;
}
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";
        document.image01.src = "visuels/"+im01+".jpg";
        document.image02.src = "visuels/"+im02+".jpg";
        document.image03.src = "visuels/"+im03+".jpg";
        document.image04.src = "visuels/"+im04+".jpg";
        document.image05.src = "visuels/"+im05+".jpg";
        document.image06.src = "visuels/"+im06+".jpg";
        document.image07.src = "visuels/"+im07+".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>
<style>
body { text-align:center; }
#game-grid { display:inline-block; position:relative; margin:0 auto; }
#game-grid img { display:inline-block; float:left; border:none; }
 
#game-grid input { position:absolute; }
#game-grid input.moveLeft { left:0; bottom:0; }
#game-grid input.moveAhead { left:45%; bottom:0; }
#game-grid input.moveRight { right:0; bottom:0; }
 
</style>
 
</head>
<body>
 
<div id="game-grid"> 
	<img src="visuels/01.jpg" name="image01">
	<img src="visuels/02.jpg" name="image02">
	<img src="visuels/03.jpg" name="image03">
	<img src="visuels/04.jpg" name="image04">
	<img src="visuels/05.jpg" name="image05">
	<img src="visuels/06.jpg" name="image06">
	<img src="visuels/07.jpg" name="image07">
 
	<input type="image" class="moveLeft" onclick="moveLeft(); displayGrid();" src="visuels/fleche3.png" />
	<input type="image" class="moveAhead" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
	<input type="image" class="moveRight" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
 
</div>
 
</body>
</html>

Invité · 08/09/2018, 15h26

Une variante :

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
 
body { text-align:center; }
#game-grid { display:inline-block; position:relative; margin:0 auto; }
#game-grid img { display:inline-block; float:left; border:none; }
 
#game-grid input { position:absolute; }
#game-grid input.moveLeft { left:0; bottom:45%; }
#game-grid input.moveAhead { left:45%; bottom:45%; }
#game-grid input.moveRight { right:0; bottom:45%; }
 
#game-grid input { opacity:0.0; }
#game-grid img:nth-child(1):hover ~ input.moveLeft, #game-grid input.moveLeft:hover { opacity:0.5; }
#game-grid img:nth-child(4):hover ~ input.moveAhead, #game-grid input.moveAhead:hover { opacity:0.5; }
#game-grid img:nth-child(7):hover ~ input.moveRight, #game-grid input.moveRight:hover { opacity:0.5; }

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
<div id="game-grid"> 
	<img src="visuels/01.jpg" name="image01" onclick="moveLeft(); displayGrid();">
	<img src="visuels/02.jpg" name="image02">
	<img src="visuels/03.jpg" name="image03">
	<img src="visuels/04.jpg" name="image04" onclick="moveAhead(); displayGrid();">
	<img src="visuels/05.jpg" name="image05">
	<img src="visuels/06.jpg" name="image06">
	<img src="visuels/07.jpg" name="image07" onclick="moveRight(); displayGrid();">
 
	<input type="image" class="moveLeft" onclick="moveLeft(); displayGrid();" src="visuels/fleche3.png" />
	<input type="image" class="moveAhead" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
	<input type="image" class="moveRight" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
 
</div>

**bull100** · 08/09/2018, 15h37

C'est super, merci !

Je vais garder ta première version car ca sera plus simple pour moi pour apporter des modifs.
Je n'y connais pas grand chose en css ou javascript. Juste des restes qui remonte de programmation en basic sur amstrad (plus de 20 ans)

A partir de la logic du basic je regarde ce que je peux faire en javascript. Mais modestement, c'est vraiment pour le fun

vraiment au plus simple.

En tout cas un grand merci. Je reviens des que j'ai refait les dessins qui seront moins beau puisque je vais y apporter avant tout mon style

**ProgElecT** · 08/09/2018, 16h32

Salut

Désolé bull100 de m’immiscer dans ta discussion, je suis comme tout le monde, j’essaie d'apprendre des autres en lisant toutes les discussions, et là je ne comprend plus

Envoyé par psychadelic

Pour enlever les espaces à l'affichage sur tes images, il faut coder ainsi :

Code HTML :

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

1
2
3
4
5
6
7
8
 
<img src="visuels/01.jpg" name="image01" /><
 img src="visuels/02.jpg" name="image02" /><
 img src="visuels/03.jpg" name="image03"  /><
 img src="visuels/04.jpg" name="image04"  /><
 img src="visuels/05.jpg" name="image05"  /><
 img src="visuels/06.jpg" name="image06"  /><
 img src="visuels/07.jpg" name="image07"  />

. . . . .

Envoyé par jreaux62

Bonjour,

je suis épaté : je ne m'attendais pas à ça

. . . . . .

Donc j'ai fait un petit programme pour vérifier, ben chez moi cela ne fonctionne pas

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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	</head>
 
	<body>
		<img src="image1.jpg" name="image01" /><
		img src="image2.jpg" name="image02" /><
		img src="image3.jpg" name="image03" /><
		img src="image4.jpg" name="image04" /><
		img src="image5.jpg" name="image05" /><
		img src="image6.jpg" name="image06" /><
		img src="image7.jpg" name="image07" /><
		img src="image8.jpg" name="image08" />
	</body>
 
</html>

Ai je raté quelque chose?

Invité · 08/09/2018, 16h49

Envoyé par ProgElecT

...ben chez moi cela ne fonctionne pas...

Tu sais que "cela ne fonctionne pas" n'aide en rien.
Merci de préciser.

Pour ma part, j'ai fourni 2 codes...... qui fonctionnent.
(à part les noms des fonctions, je n'ai pas touché au JavaScript).

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

Oui, ca fonctionne également tres bien de mon coter

**ProgElecT** · 08/09/2018, 18h01

Envoyé par jreaux62

Tu sais que "cela ne fonctionne pas" n'aide en rien.
Merci de préciser.

Avec ce

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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	</head>
 
	<body>
		<img src="image1.jpg" name="image01" /><
		img src="image2.jpg" name="image02" /><
		img src="image3.jpg" name="image03" /><
		img src="image4.jpg" name="image04" /><
		img src="image5.jpg" name="image05" /><
		img src="image6.jpg" name="image06" /><
		img src="image7.jpg" name="image07" /><
		img src="image8.jpg" name="image08" />
	</body>
 
</html>

Capture d'écran (identique sous FireFox, Opera, IE, Safari, Chrome et Edge)

Envoyé par jreaux62

.........
Pour ma part, j'ai fourni 2 codes...... qui fonctionnent.
(à part les noms des fonctions, je n'ai pas touché au JavaScript).

Je n'ai pas essayé, c'est la syntaxe de psychadelic, que j’expérimentais, car cela était la première fois que je voyais cette façon de faire.
Ton commentaire, jreaux62,je n'arrivai pas à savoir si cela était de l'ironie, ou que le code de psychadelic n'était pas bon.

Invité · 08/09/2018, 18h16

@ProgElecT
Il suffisait de le dire.

En effet, sa syntaxe ne fonctionne pas.
Le code n'est pas correctement interprété.

Par contre celle-ci est parfaitement valide :

Code html :

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

1
2
3
4
5
6
7
8
	<img src="visuels/01.jpg" name="image01" /><!--
	--><img src="visuels/02.jpg" name="image02" /><!--
	--><img src="visuels/03.jpg" name="image03" /><!--
	--><img src="visuels/04.jpg" name="image04" /><!--
 
	--><img src="visuels/05.jpg" name="image05" /><!--
	--><img src="visuels/06.jpg" name="image06" /><!--
	--><img src="visuels/07.jpg" name="image07" />

Ajouter  entre les balises permet de ne pas tenir compte des sauts de ligne.
Et donc, de ne pas générer un espace*.

* Cet espace est dû au fait que les balises <img>** sont de type inline par défaut.
(c'est aussi valable pour les inline-block).

Pour ma part, j'avais résolu le problème avec un float:left;.

Invité · 08/09/2018, 18h26

@bull100
Comme recommandé dans la doc, il faut remplacer l'attribut name par id (ce qui demande de modifier aussi le code JavaScript) :

Code html :

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

1
2
	<img src="visuels/01.jpg" id="image01"  />
...

En remplaçant les

Code JavaScript :

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

document.image01.src = ...

par :

Code JavaScript :

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

document.getElementById('image01').src = ...

**bull100** · 08/09/2018, 19h04

Merci

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

**psychadelic** · 08/09/2018, 19h32

Sympa, perso je préfère ce graphisme

**bull100** · 08/09/2018, 20h12

jreaux62 : j'ai remplacé les 'name". Merci

Pour placer un ecran gris en arriere plan comme ceci, comment puis-je proceder ?
J'aimerai faire en sorte que sur les tablettes ou tel la page soit cadré uniquement sur la largeur du fond gris (700 de large) et sur des écrans plus grand que ce soit centré et on voit les losanges ? Est ce possible ?

Nom : Capture.png
Affichages : 282
Taille : 454,2 Ko

Nom : Capture.png
Affichages : 282
Taille : 454,2 Ko

Aperçu : http://bull100.pagesperso-orange.fr/jeu/version1.html

Je voulais placer la rose des vents à droite des flèches mais je n'ai pas compris comment positionner les objets. Pourrais tu m'expliquer stp ?

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title></title>
<script>
var larg = 20;
var a = new Array(-larg, 1, larg, -1)
var b = new Array(1, larg, -1, -larg)
var c = new Array(larg, -1, -larg, 1)
var d = new Array( -1, -larg, 1, larg)
 
t=0
var pos = 610;
var mur = new objet (
"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")
 
function moveAhead() {
        if (mur[pos+a[t]]=="0")  pos=pos+a[t];
}
function moveRight() {
        t=t+1;
        if (t==4) t=0;
        document.getElementById('bou').src = "visuels/bou"+(t+1)+".png";
}
function moveLeft() {
        t=t-1;
        if (t==-1) t=3;
         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";
        document.getElementById('image01').src = "visuels/"+im01+".jpg";
        document.getElementById('image02').src = "visuels/"+im02+".jpg";
        document.getElementById('image03').src = "visuels/"+im03+".jpg";
        document.getElementById('image04').src = "visuels/"+im04+".jpg";
        document.getElementById('image05').src = "visuels/"+im05+".jpg";
        document.getElementById('image06').src = "visuels/"+im06+".jpg";
        document.getElementById('image07').src = "visuels/"+im07+".jpg";
      if (pos==22&&t==2)  document.getElementById('image04').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>
<style>
body { text-align:center;}
#game-grid { display:inline-block; position:relative; margin:0 auto; }
#game-grid img { display:inline-block; float:left; border:0; }
 
#game-grid input { position:absolute; }
#game-grid input.moveLeft { left:32%; bottom:0; }
#game-grid input.moveAhead { left:45%; bottom:0; }
#game-grid input.moveRight { right:30%; bottom:0; }
 
</style>
 
</head>
<body background="visuels/fond.png">
 <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">
 
	<input type="image" class="moveLeft" onclick="moveLeft(); displayGrid();" src="visuels/fleche3.png" />
	<input type="image" class="moveAhead" onclick="moveAhead(); displayGrid();" src="visuels/fleche.png" />
	<input type="image" class="moveRight" onclick="moveRight(); displayGrid();" src="visuels/fleche2.png" />
	<br><img src="visuels/bou1.png" id="bou">
 
</div>
 
</body>
</html>

**psychadelic** · 09/09/2018, 02h11

Inintéressant, mais ça reste limité à un déplacement sur 10 cases... (dans une version précédente)
j'ai du mal à comprendre la logique du truc, existe t-il un nom pour ce genre d'algorithme, et y a t-il une forme documentée / explicative ??

sinon, pour tes questions (fond gris, rose des vents à droite)
Voila ma proposition (j'ai fait quelques modifs mineures dans ton code, rien de dramatique et quelques optimisations... )

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
<!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 { display:block;  position: absolute; right: 0; bottom: -90px;  }
    #game-buttons { display:block; position:relative; margin:0 auto; height: 100px;}
    #game-buttons input { margin: 0 7px; display:inline-block; border:3px solid transparent; border-radius: 15px; }
    #game-buttons input:hover { border-color:yellow }
</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" />
    </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>

**bull100** · 09/09/2018, 09h06

Envoyé par psychadelic

Inintéressant, mais ça reste limité à un déplacement sur 10 cases... (dans une version précédente)
j'ai du mal à comprendre la logique du truc, existe t-il un nom pour ce genre d'algorithme, et y a t-il une forme documentée / explicative ??

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.

Merci pour les retourches. Ca fait vraiment plaisir car le programme est tres propre et claire

J'ai testé sur un telephone, 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 ?

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 ?

Jeu CSS/JS multi-niveaux ?

JavaScript

Discussions similaires

Partager

Partager