Jeu CSS/JS multi-niveaux ?

Invité · 16/09/2018, 22h24

En fait, tu me fais réfléchir...

(Enfin de la créativité dans mon cerveau !)

1- au départ, je masquerais les 3 boutons.
A la place : un grand bouton "Démarrer la quête"

2- je mettrais au contraire plus de végétation (sur plusieurs images superposées) :
Avec des lianes, du lierre, des toiles d'araignée recouvrant la porte !

3- au clic sur le bouton "démarrer"
- on affiche le bouton "tout droit"
- (cerise sur le gâteau) via CSS+JS : on fait disparaitre un à un les obstacles (lierre,...) devant la porte.
- la porte est dégagée : on peut avancer !

**bull100** · 16/09/2018, 23h02

Nom : decoex.jpg
Affichages : 149
Taille : 61,5 Ko

du coup je ne sais pas si tu l'as en pièce jointe. je met le .psd avec les calques dans mon dossier visuels du jeu : "deco.psd"
http://bull100.pagesperso-orange.fr/...suels/deco.psd

Nom : demarrer.png
Affichages : 118
Taille : 11,3 Ko

Nom : demarrer.png
Affichages : 118
Taille : 11,3 Ko

**psychadelic** · 17/09/2018, 03h12

Fichtre, vous avez sacrément avancé...

J'ai trouvé quelques erreurs

la première vient du fait que la mur comme ce en position 1, et non en zéro.
c'est dommage parce que cela ~~invalide~~ complique la fonction modulo ( reste de la division entière), il faut systématiquement retirer 1 pour retrouver les bonnes coordonnées

le labyrinthe fait 32 cases de coté.
s'il commençait en zéro on peut facilement déduire le coordonnées Left et top par le calcul
left = position % 32
top = position / 32 (division entière)

enfin bref dans la fonction flecheb

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// MAP : flèche blanche (position du joueur)
	function flecheb()
	{
		// ----------
		j=parseInt(pos/larg);
		var spot = document.createElement('img');
		spot.setAttribute('src','visuels/carre'+(t+1)+'.jpg');
		spot.classList.add('trace');
		spot.style.left = 4+((pos-(j*larg))*8)+'px';
		spot.style.top = 22+(j*8)+'px';
		document.getElementById('game-map').appendChild( spot );
		// ----------
	}

devrait être écrite en :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
 
  // MAP : flèche blanche (position du joueur)
  function flecheb() {
    var spot = document.createElement('img');
    spot.setAttribute('src', 'visuels/carre' + (t + 1) + '.jpg');
    spot.classList.add('trace');
    spot.style.left = (12 + ((pos-1) % larg) * 8) + 'px';
    spot.style.top = (22 + (Math.floor((pos-1) / larg)) * 8) + 'px';
    document.getElementById('game-map').appendChild(spot);
  }

(les 12 et 22 pixels correspondent au décalage actuellement existant sur l'affichage et correspondent aux 4 et 22 actuels)

et c'est la même chose dans la fonction moveAhead()

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	// -------------------
	// AVANCER
	function moveAhead() {
	  if (mur[pos + a[t]] == "0") {
	    if (pos == 572 && t == 0 && cle2 == 0) rien = rien;
	    if (pos == 912 && t == 2 && cle1 == 0) rien = rien;
	    if (pos == 77 && t == 3 && cle3 == 0) rien = rien;
	    if (pos == 231 && t == 0 && cle4 == 0) rien = rien;
	    else
	      // ----------
	      // MAP : carré noir (cases parcourues)
	      var spot = document.createElement('img');
	    spot.setAttribute('src', 'visuels/carrenoir.jpg');
	    spot.classList.add('trace');
	    spot.style.left = (12 + ((pos - 1) % larg) * 8) + 'px';
	    spot.style.top = (22 + (Math.floor((pos - 1) / larg)) * 8) + 'px';
 
	    document.getElementById('game-map').appendChild(spot);
	    pos = pos + a[t];
	    // ----------
	    checkDoor();
	    checkDoorAnim();
	  }
	}

le pb c'est qu'avec le calcul actuel les positions des carrés de trace seront mal placé si la position est un multiple de 32 (sur le bord à droite) mais actuellement ces positions ne sont pas utilisées.

l'autre soucis, c'est que j'ai l'impression que dans l'absolu il manque des images, comme par exemple si la porte est visible sur le troisième plan , mais pour ça aussi cette configuration n’existe pas...
je me suis fait un schéma pour lister toutes les images possibles :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/*
                            p
                      v /   o   \ v
plan 3........... __o_|/ ___m___ \|_o__
                     ./     .     \.
                     m      .      m
                  v /.      p      .\ v
plan 2....... __o_|/_m__ ___m___ __m_\|_o__
                 ./  .      .      .  \.
                 m   .             .   m
              v /.   .      p      .   .\ v
plan 1.... _o_|/_m_ _m__ ___m___ __m_ _m_\|_o_ 
              /  .   .      .      .   .  \.
             m   .   .      .      .   .   m
            /.   .   .      .      .   .   .\
             .   .   .      .      .   .   .
images       0   1   2      3      4   5   6    ( oui je commence à zéro)
 
=>référencement des images :   N°image + N°plan + type { mur,  ouvert, vide, porte }
 
107=>(3)   i[0] : 0_1_m / 0_1_o / 0_1_v 
 83=>(4)   i[1] : 1_1_m / 1_2_m / 1_2_o / 1_2_v
 51=>(5)   i[2] : 2_1_m / 2_2_m / 2_3_m / 2_3_o / 2_3_v
128=>(7)   i[3] : 3_1_m / 3_1_p / 3_2_m / 3_2_p / 3_3_m / 3_3_o / 3_3_p
 51=>(5)   i[4] : 4_1_m / 4_2_m / 4_3_m / 4_3_o / 4_3_v
 83=>(4)   i[5] : 1_5_m / 1_5_m / 1_5_o / 1_5_v
107=>(3)   i[6] : 6_1_m / 6_1_o / 6_1_v
    =31 images
*/

Sinon, perso, plutôt que de noter en "0" et "1" ce fichu tableau, j'aurai plutôt mis des lettres "n" pour case Normale, "P" pour Porte, "C" pour clé, etc..
mais bon, ça demanderai de revoir beaucoup de code...

ah, et j'oubliais, l'image 07.jpg fait 106 pixels de large, elle devrait en faire 107 comme toutes les autres de sa catégorie.

**psychadelic** · 17/09/2018, 03h21

Sinon, je suis un gros malin

:

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>dessinlaby</title>
  <style>
    * {
      border: 0;
      padding: 0;
      border: 0;
      box-sizing: border-box;
    }
    #game-map {
      position: relative;
      display: block;
      width: 700px;
      height: 700px;
      margin: 22px;
      background-color: rgb(198, 231, 236);
    }
    #game-map div {
      position: absolute;
      display: block;
      width: 20px;
      height: 20px;
      background-color: rgb(52, 25, 78);
      border: 1px solid rgba(128, 128, 128, 0.5);
    }
    .OnPOS { background-color: red !important }
    .OnBRAVO { background-color: yellow !important }
    .OnKEY { background-color: green !important }
    .OnDOOR {background-color: grey !important }
  </style>
</head>
 
<body>
  <div id="game-map"></div>
  <script defer>
    var
      larg = 32,
      pos = 976;
    var mur = [null,
    "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1",
	  "1", "0", "0", "0", "0", "0", "1", "1", "0", "0", "0", "1", "0", "0", "0", "1", "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "0", "0", "0", "1", "1", "1",
	  "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "0", "0", "1", "0", "0", "1", "1", "1", "0", "0", "0", "0", "1", "1", "0", "1", "1", "0", "0", "1", "1",
	  "1", "1", "1", "1", "0", "1", "1", "1", "0", "1", "0", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "1",
	  "1", "1", "0", "0", "0", "0", "1", "1", "0", "0", "0", "1", "0", "0", "1", "0", "0", "0", "0", "1", "1", "1", "0", "0", "0", "0", "1", "0", "0", "1", "1", "1",
	  "1", "1", "1", "1", "1", "0", "0", "1", "1", "1", "0", "1", "1", "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "1", "1", "1", "1", "1", "0", "0", "0", "1",
	  "1", "0", "0", "1", "1", "1", "0", "1", "1", "1", "0", "0", "1", "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "1", "1", "1", "1", "1", "1", "1", "0", "1",
	  "1", "0", "1", "0", "0", "0", "0", "1", "1", "1", "1", "0", "1", "0", "0", "0", "0", "0", "1", "1", "0", "0", "0", "1", "1", "1", "0", "1", "1", "1", "0", "1",
	  "1", "0", "1", "0", "1", "0", "1", "1", "1", "1", "1", "0", "1", "0", "1", "1", "1", "1", "1", "1", "0", "1", "1", "0", "0", "0", "0", "1", "1", "1", "0", "1",
	  "1", "0", "0", "0", "1", "0", "0", "0", "1", "1", "0", "0", "1", "0", "1", "1", "1", "0", "0", "0", "0", "1", "1", "0", "1", "1", "1", "0", "0", "0", "0", "1",
	  "1", "1", "0", "1", "1", "1", "1", "0", "1", "1", "0", "1", "1", "0", "0", "0", "1", "0", "1", "1", "0", "1", "1", "0", "0", "0", "1", "0", "1", "0", "1", "1",
	  "1", "1", "0", "1", "1", "1", "1", "0", "1", "0", "0", "1", "1", "1", "1", "0", "1", "0", "0", "1", "0", "0", "0", "1", "1", "0", "1", "0", "1", "0", "0", "1",
	  "1", "1", "0", "0", "0", "0", "0", "0", "1", "0", "1", "1", "1", "1", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "1", "0", "1", "0", "1", "1", "1", "1",
	  "1", "0", "0", "1", "0", "1", "1", "1", "1", "0", "1", "0", "0", "1", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "0", "1", "0", "0", "1", "1", "1",
	  "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "1", "0", "1", "0", "0", "0", "0", "0", "0", "1", "1", "1", "0", "1", "0", "1", "1", "1", "0", "1", "0", "1",
	  "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "0", "0", "1", "0", "1", "1", "0", "1", "0", "1", "1", "0", "0", "1", "0", "1", "1", "0", "0", "0", "0", "1",
	  "1", "1", "1", "1", "0", "0", "0", "0", "1", "1", "1", "0", "1", "0", "1", "1", "0", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "1", "1",
	  "1", "0", "0", "0", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "1", "1", "0", "1", "0", "0", "0", "0", "1", "0", "0", "0", "0", "0", "0", "1", "1", "1",
	  "1", "0", "1", "1", "1", "1", "0", "0", "0", "1", "1", "0", "1", "0", "0", "0", "0", "1", "1", "0", "1", "0", "1", "0", "1", "0", "1", "1", "0", "1", "1", "1",
	  "1", "0", "1", "1", "1", "1", "0", "1", "0", "1", "0", "0", "1", "1", "0", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "0", "1", "1", "0", "0", "0", "1",
	  "1", "0", "1", "0", "1", "1", "0", "0", "0", "1", "0", "1", "1", "0", "0", "0", "0", "0", "1", "1", "1", "1", "1", "1", "1", "0", "0", "0", "1", "1", "0", "1",
	  "1", "0", "0", "0", "1", "1", "1", "0", "1", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "0", "0", "0", "1", "1", "0", "1", "0", "1", "0", "0", "1",
	  "1", "1", "1", "0", "1", "1", "1", "1", "0", "1", "0", "1", "1", "0", "1", "1", "1", "0", "1", "0", "1", "1", "0", "1", "1", "0", "1", "0", "1", "1", "0", "1",
	  "1", "1", "1", "0", "0", "0", "0", "1", "0", "0", "0", "0", "1", "0", "1", "0", "1", "0", "1", "0", "1", "1", "0", "1", "1", "0", "0", "0", "0", "0", "0", "1",
	  "1", "1", "1", "1", "1", "1", "0", "1", "0", "1", "1", "0", "1", "0", "0", "0", "0", "0", "1", "0", "1", "1", "0", "0", "0", "0", "1", "1", "1", "1", "0", "1",
	  "1", "0", "0", "0", "1", "1", "0", "1", "0", "1", "1", "0", "1", "1", "1", "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "1", "1", "1", "1", "0", "0", "1",
	  "1", "0", "1", "0", "1", "1", "0", "1", "0", "1", "0", "0", "1", "0", "1", "1", "1", "0", "1", "0", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "0", "1",
	  "1", "0", "1", "0", "0", "0", "0", "1", "0", "0", "0", "0", "1", "0", "1", "1", "1", "0", "0", "0", "1", "0", "0", "0", "1", "0", "0", "0", "1", "1", "1", "1",
	  "1", "0", "0", "1", "1", "0", "1", "1", "1", "1", "0", "1", "0", "0", "1", "0", "0", "0", "1", "0", "1", "0", "1", "0", "0", "0", "1", "0", "1", "1", "0", "1",
	  "1", "1", "0", "0", "0", "0", "1", "1", "1", "1", "0", "0", "0", "1", "1", "0", "1", "1", "1", "0", "0", "0", "1", "0", "1", "0", "1", "0", "0", "0", "0", "1",
	  "1", "1", "1", "0", "1", "0", "0", "0", "0", "0", "0", "1", "0", "1", "0", "0", "0", "1", "1", "0", "1", "0", "0", "0", "1", "0", "0", "0", "1", "1", "0", "1",
	  "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"
    ];
 
    var
      Limit = mur.length,
      TheMap = document.getElementById('game-map'),
      CotDIV = 20,
      StartPos = pos;
 
    for (pos = 1; pos < Limit; pos++) {
      if (mur[pos] == "0") {
        let Zdiv = document.createElement('div');
        Zdiv.style.left = (((pos - 1) % larg) * CotDIV) + 'px';
        Zdiv.style.top = ((Math.floor((pos - 1) / larg)) * CotDIV) + 'px';
 
        if (pos == StartPos) Zdiv.className = 'OnPOS';
        if (pos == 34) Zdiv.className = 'OnBRAVO';
        if (pos == 600) Zdiv.className = 'OnKEY';
        if (pos == 752) Zdiv.className = 'OnKEY';
        if (pos == 680) Zdiv.className = 'OnKEY';
        if ((pos == 944) || (pos == 540) || (pos == 76) || (pos == 199)) Zdiv.className = 'OnDOOR';
        TheMap.appendChild(Zdiv);
      }
    }
  </script>
</body>
</html>

Invité · 17/09/2018, 10h28

Bonjour,

Que personne ne bouge !!! (et ne touche à rien)

: je suis en train de ré-organiser TOUT le code (HTML, CSS, JS)...

**bull100** · 17/09/2018, 11h11

Ok

**psychadelic** · 17/09/2018, 12h09

Envoyé par psychadelic

ah, et j'oubliais, l'image 07.jpg fait 106 pixels de large, elle devrait en faire 107 comme toutes les autres de sa catégorie.

oui, mais ça, c'est pas du code

**psychadelic** · 17/09/2018, 12h18

Envoyé par jreaux62

Que personne ne bouge !!! (et ne touche à rien)

: je suis en train de ré-organiser TOUT le code (HTML, CSS, JS)...

Quelque chose comme ça ? (j'avais déjà commencé à y penser, mais manque de temps....

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
  const
    Cardinalité = { NORD: 0, EST: 1, SUD: 2, OUEST: 3 },
    Rotation = { Droite: 1, Gauche: 3, demiTour: 2 },
    avanceCardinaux = [ [0, -1], [+1, 0], [0, +1], [-1, 0] ],
    LargeurGrille = 20;
 
  class Personage {
 
    constructor(Nom, Orientation, pos_X, pos_Y) {
      this.Nom = Nom;
      this.Orientation = Orientation;
      this.Coordonnées_XY = [pos_X, pos_Y];
    }
 
    avancer() {
      this.Coordonnées_XY.forEach((e, i) => {
        this.Coordonnées_XY[i] = e + avanceCardinaux[this.Orientation][i];
      });
    }
 
    tourner(rotation) {
      this.Orientation = (this.Orientation + rotation) % 4;
    }
 
  }
 
  var P_NephI = new Personage('Néphi', Cardinalité.NORD, 0, 0);
 
 
  P_NephI.tourner(Rotation.Droite);
 
  P_NephI.avancer();

Sinon, j'ai aussi commencé à créer un interface html a part pour générer le labyrinthe, mais c'est encore loin d'être au point.
je l'adapterai en fct de ce que tu aura fait...

ah, oui, et

Code JavaScript :

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

1
2
3
4
5
6
7
8
  function getCoordonnées(xPosition) {
    return [Math.floor(xPosition / LargeurGrille), xPosition % LargeurGrille];
  }
 
 
  function getPosition(Coordonnées_XY) {
    return (Coordonnées_XY[0] * LargeurGrille + Coordonnées_XY[1]);
  }

Bien sur dans ces 2 codes, la grille / tableau du labyrinthe commence à la position Zéro. (et non 1 comme actuellement)

Invité · 17/09/2018, 14h39

Hello,

j'ai bien avancé !

Voici la démo : http://www.jerome-reaux-creations.fr...nephitrip.html

@bull100
J'aurais quelques images à te transmettre (je te mettrais un lien vers une archive à télécharger quand j'aurais fini)

Peux-tu DESSINER :

un cadenas + chaine* (.png, fond transparent), à mettre sur les portes verrouillées ?

* genre (mais bien dessiné ! ) (MAIS SANS LA PORTE !! jsute le cadenas)

Nom : porte-cadenas.jpg
Affichages : 133
Taille : 44,5 Ko

ET AUSSI :

Marion (image de fin) : en png (fond transparent)
la STATUE de MARION : idem (sans le cadre de fond), afin de pouvoir la déplacer/animer.

**psychadelic** · 17/09/2018, 14h54

Envoyé par jreaux62

...Voici la démo : ...

marche pas...

Invité · 17/09/2018, 15h02

C'est corrigé.
(ce sont mes images perso... les autres proviennent du site de Bull)

**psychadelic** · 17/09/2018, 15h35

bizare, ça marche pas avec FireFox , mais ça marche avec Chromium... ?
sinon dommage, tu n'a pas pris mes corection sur le calcul de position... (post 103)
il y a aussi un truc qui m'intrigue sur le départ, le petit carré de trace sur la première porte ne s'affiche pas une fois franchie.

Invité · 17/09/2018, 16h04

Envoyé par psychadelic

...sinon dommage, tu n'a pas pris mes corection sur le calcul de position... (post 103)

Ca, ce n'est pas à moi de le faire...

N'oublie pas qu'on est dans le forum CSS !
A la base, on n'est censé ne répondre qu'aux questions CSS !

Envoyé par psychadelic

...il y a aussi un truc qui m'intrigue sur le départ, le petit carré de trace sur la première porte ne s'affiche pas une fois franchie.

Normal, c'est prévu : on saute une case !
(le labyrinthe se ferme, on ne peut plus retourner en arrière)

@psychadelic
N.B. Sinon, je n'y connais RIEN en "orienté objet".
Si tu regardes mon script JS, c'est juste "un objet" *.

* Je suis sûr que ça peut s'améliorer, s'optimiser ou s'écrire autrement, mais je fais ce que je peux !

**psychadelic** · 17/09/2018, 16h19

ha, c'est vrai que le sujet à un peu débordé d'une simple question css pour centrer une div.
A la limite faudrait changer le sujet dans une autre partie du forum, en lui changeant son titre..

mais quand même, changer un calcul erroné en se débarrassant d'une variable disgracieuse (j) le tout pour passer de 2 lignes ou il y en avait 3, c'est pas la révolution....

Invité · 17/09/2018, 16h54

@bull100

Remarques :

1- Pour le positionnement CSS des éléments, j'ai opté finalement pour des position:absolute; !
En effet, ça évite que le éléments soient trop interdépendants (le principe de "rester dans le flux" est bien pour un site web en général, mais pas ici).
Ça permettra de changer (éventuellement) la disposition "paysage" -> "portrait" sans toucher au HTML.

2- Pour le JS, comme je l'ai dit, c'est un "objet", pas de l'"orienté objet".
Par conséquent, c'est certainement optimisable.
Je pense surtout qu'il faudrait gérer autrement les différents cas de figure (là, ça devient une usine à gaz).

A priori, psychadelic est plus apte que moi en JS.

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

heu, disons que je tripote un peu plus que toi les objets en JS, sans plus.
(mon idée de le faire en programmation objet était motivé par l'idée d'avoir plusieurs personnages dans le labyrinthe, un minotaure par exemple, et il aurait eu un parcours répétitif, à ne pas croiser...)

Sinon, pardon, mais j'aurais du commencer par la, tu a superbement simplifié le code, c'est plus clair, concis, etc, franchement chapeau

**bull100** · 17/09/2018, 19h22

Hello, Je viens d'arriver

je regarde

Invité · 17/09/2018, 19h38

Hello,

je viens d'ajouter une icône (près du copyright) : je te laisse tester

http://www.jerome-reaux-creations.fr...nephitrip.html

**bull100** · 17/09/2018, 19h55

hello

L'icone c'est juste une image ou est ce qu'il faut que je change le html, js et css ?
est ce que c'est toujours sur ce lien : https://codepen.io/jreaux62/pen/XPYmWY

T'as fait un boulot de malade

J'adore !!!
Je te fais les dessins tout de suite

Invité · 17/09/2018, 20h25

Oui, j'ai bien bossé !!

Je me suis bien amusé (au point que j'ai oublié de manger ce midi !) !

TOUT est dans cette archive .zip (v2).

Remarques :

1- tu auras remarqué que, quand on est devant une porte et qu'on possède la clé, on affiche le cadenas et la clé durant 1.5 secondes, avant de les masquer.
On peut remplacer par une animation (gif), avec la clé qui tourne DANS le cadenas, et le cadenas qui s'ouvre.
(mais il faut que tu le dessines... si tu as le temps)

2- Le crane (au dessus du titre "JEU") peut aussi être animé (soit avec des yeux qui bougent, soit une légère rotation,...)

3- Après... on peut TOUT imaginer !

Allez.... à table, j'ai faim....

Jeu CSS/JS multi-niveaux ?

JavaScript

Discussions similaires

Partager

Partager