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>

Jeu CSS/JS multi-niveaux ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager