Source de puzzle_v2.html
1: <!DOCTYPE HTML>
2: <html lang="fr"><head>
3: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4:
5: <meta charset="utf-8">
6: <title>Slide Puzzle</title>
7: <style>
8: div#jeu {
9: margin: 0 auto 0 auto;
10: width: 416px;
11: }
12: button.case, button.emptycase {
13: width: 100px;
14: height: 100px;
15: font-size: 200%;
16: float:left;
17: border: solid 1pt black;
18: margin: 1px 2px 1px 2px;
19: }
20: button.emptycase {
21: background-color: inherit;
22: border: none;
23: }
24: hr {
25: clear: both;
26: visibility: hidden;
27: margin: 0;
28: padding: 0;
29: }
30: </style>
31: <script>
32: /* on mémorise l'emplacement de la case vide */
33: let elig = 4;
34: let ecol = 4;
35: let nbclicks = 0;
36: /* Fonction qui échange la case (lig,col) avec la case vide */
37: function move (lig,col) {
38: if (
39: ((elig==lig) && ((col==ecol-1)||(col==ecol+1)))
40: || ((ecol==col) && ((lig==elig-1)||(lig==elig+1)))
41: ) {
42: /* mise à jour du nombre de clics */
43: nbclicks = nbclicks + 1;
44: /* on récupère l'élément compteur */
45: let noeud_compteur = document.getElementById('compteur');
46: /* couper son fils */
47: noeud_compteur.removeChild(noeud_compteur.childNodes[0]);
48: /* créer un nouveau noeud textuel avec la valeur nbclicks */
49: let compteur_txt;
50: if (nbclicks==1) {
51: compteur_txt = document.createTextNode('un seul coup joué');
52: } else {
53: compteur_txt = document.createTextNode(nbclicks+' coups joués');
54: }
55: /* ajouter ce noeud textuel comme fils de l'élément compteur */
56: noeud_compteur.appendChild(compteur_txt);
57: /* on récupère les identifiants des deux boutons concernés */
58: let bname = 'case'+lig+col;
59: let ename = 'case'+elig+ecol;
60: /* on récupère les noeuds correspondant à ces boutons */
61: let bnode = document.getElementById(bname);
62: let enode = document.getElementById(ename);
63: /* on récupère les fils textuels des deux boutons */
64: let bvalue = bnode.removeChild(bnode.childNodes[0]);
65: let evalue = enode.removeChild(enode.childNodes[0]);
66: /* on échange ces fils */
67: bnode.appendChild(evalue);
68: enode.appendChild(bvalue);
69: /* on échange les classes des deux boutons */
70: bnode.setAttribute('class','emptycase');
71: enode.setAttribute('class','case');
72: /* on enlève le "focus" sur le bouton cliqué */
73: bnode.blur();
74: /* on mémorise l'emplacement de la case vide */
75: elig = lig;
76: ecol = col;
77:
78: }
79: }
80: </script>
81: </head><body>
82: <h1>Slide Puzzle</h1>
83: <p id="compteur">Aucun coup joué</p>
84: <div id="jeu">
85: <button id="case11" class="case" onclick="move(1,1);">1</button>
86: <button id="case12" class="case" onclick="move(1,2);">2</button>
87: <button id="case13" class="case" onclick="move(1,3);">3</button>
88: <button id="case14" class="case" onclick="move(1,4);">4</button>
89: <hr>
90: <button id="case21" class="case" onclick="move(2,1);">5</button>
91: <button id="case22" class="case" onclick="move(2,2);">6</button>
92: <button id="case23" class="case" onclick="move(2,3);">7</button>
93: <button id="case24" class="case" onclick="move(2,4);">8</button>
94: <hr>
95: <button id="case31" class="case" onclick="move(3,1);">9</button>
96: <button id="case32" class="case" onclick="move(3,2);">10</button>
97: <button id="case33" class="case" onclick="move(3,3);">11</button>
98: <button id="case34" class="case" onclick="move(3,4);">12</button>
99: <hr>
100: <button id="case41" class="case" onclick="move(4,1);">13</button>
101: <button id="case42" class="case" onclick="move(4,2);">14</button>
102: <button id="case43" class="case" onclick="move(4,3);">15</button>
103: <button id="case44" class="emptycase" onclick="move(4,4);"> </button>
104: <hr>
105: </div>
106: </body></html>