Source de puzzle_v1.html
1: <!DOCTYPE HTML>
2: <html lang="fr"><head>
3: <meta charset="utf-8">
4: <title>Slide Puzzle</title>
5: <style>
6: div#jeu {
7: margin: 0 auto 0 auto;
8: width: 416px;
9: }
10: button.case, button.emptycase {
11: width: 100px;
12: height: 100px;
13: font-size: 200%;
14: float:left;
15: border: solid 1pt black;
16: margin: 1px 2px 1px 2px;
17: }
18: button.emptycase {
19: background-color: inherit;
20: border: none;
21: }
22: hr {
23: clear: both;
24: visibility: hidden;
25: margin: 0;
26: padding: 0;
27: }
28: </style>
29: <script>
30: /* on mémorise l'emplacement de la case vide */
31: var elig = 4;
32: var ecol = 4;
33: /* Fonction qui échange la case (lig,col) avec la case vide */
34: function move (lig,col) {
35: /* on récupère les identifiants des deux boutons concernés */
36: var bname = 'case'+lig+col;
37: var ename = 'case'+elig+ecol;
38: /* on récupère les noeuds correspondant à ces boutons */
39: var bnode = document.getElementById(bname);
40: var enode = document.getElementById(ename);
41: /* on récupère les fils textuels des deux boutons */
42: var bvalue = bnode.removeChild(bnode.childNodes[0]);
43: var evalue = enode.removeChild(enode.childNodes[0]);
44: /* on échange ces fils */
45: bnode.appendChild(evalue);
46: enode.appendChild(bvalue);
47: /* on échange les classes des deux boutons */
48: bnode.setAttribute('class','emptycase');
49: enode.setAttribute('class','case');
50: /* on enlève le "focus" sur le bouton cliqué */
51: bnode.blur();
52: /* on mémorise l'emplacement de la case vide */
53: elig = lig;
54: ecol = col;
55: }
56: </script>
57: </head>
58: <body>
59: <h1>Slide Puzzle</h1>
60: <div id="jeu">
61: <button id="case11" class="case" onclick="move(1,1);">1</button>
62: <button id="case12" class="case" onclick="move(1,2);">11</button>
63: <button id="case13" class="case" onclick="move(1,3);">8</button>
64: <button id="case14" class="case" onclick="move(1,4);">5</button>
65: <hr>
66: <button id="case21" class="case" onclick="move(2,1);">7</button>
67: <button id="case22" class="case" onclick="move(2,2);">10</button>
68: <button id="case23" class="case" onclick="move(2,3);">4</button>
69: <button id="case24" class="case" onclick="move(2,4);">6</button>
70: <hr>
71: <button id="case31" class="case" onclick="move(3,1);">13</button>
72: <button id="case32" class="case" onclick="move(3,2);">9</button>
73: <button id="case33" class="case" onclick="move(3,3);">2</button>
74: <button id="case34" class="case" onclick="move(3,4);">14</button>
75: <hr>
76: <button id="case41" class="case" onclick="move(4,1);">15</button>
77: <button id="case42" class="case" onclick="move(4,2);">12</button>
78: <button id="case43" class="case" onclick="move(4,3);">3</button>
79: <button id="case44" class="emptycase" onclick="move(4,4);"> </button>
80: <hr>
81: </div>
82: </body></html>