Source de memory-v1.html
1: <!DOCTYPE html>
2: <html lang="fr">
3: <head>
4: <meta charset="utf-8" />
5: <title>Memory</title>
6: <style>
7: div.jeu {
8: height: 520px;
9: width: 520px;
10: margin: 2em auto 2em auto;
11: }
12: div.case {
13: height: 100px;
14: width: 100px;
15: border: 1px solid black;
16: float: left;
17: margin: 10px;
18: background-color: #9999FF;
19: }
20: img {
21: height: 100px;
22: width: 100px;
23: visibility: hidden;
24: }
25: hr {
26: clear: both;
27: visibility: hidden;
28: }
29: </style>
30: <script>
31: var precedente = -1;
32: var attente = 0;
33: var img;
34: var imgp;
35:
36: function cachephotos () {
37: img.style.visibility = 'hidden';
38: imgp.style.visibility = 'hidden';
39: attente = 0;
40: }
41:
42: function clic (n) {
43: if (attente != 1) {
44: img = document.getElementById('img'+n);
45: img.style.visibility = 'visible';
46: if (precedente<0) {
47: precedente = n;
48: } else {
49: imgp = document.getElementById('img'+precedente);
50: if (imgp.src==img.src) {
51: } else {
52: attente = 1;
53: setTimeout('cachephotos();',800);
54: }
55: precedente = -1;
56: }
57: }
58: }
59:
60: function initgame () {
61: for (var i=1 ; i<=200 ; i++) {
62: var n1 = Math.ceil(16*Math.random());
63: var n2 = Math.ceil(16*Math.random());
64: var img1 = document.getElementById('img'+n1);
65: var img2 = document.getElementById('img'+n2);
66: var src1 = img1.src;
67: var src2 = img2.src;
68: img1.src = src2;
69: img2.src = src1;
70: }
71: }
72: </script>
73: </head>
74:
75: <body onload="initgame();">
76:
77: <h1>Jeu de memory</h1>
78:
79: <div class="jeu">
80: <div class="case" onclick="clic(1);"><img id="img1" src="images/chat.jpg" /></div>
81: <div class="case" onclick="clic(2);"><img id="img2" src="images/chat.jpg" /></div>
82: <div class="case" onclick="clic(3);"><img id="img3" src="images/chien.jpg" /></div>
83: <div class="case" onclick="clic(4);"><img id="img4" src="images/chien.jpg" /></div>
84: <hr />
85: <div class="case" onclick="clic(5);"><img id="img5" src="images/grenouille.jpg" /></div>
86: <div class="case" onclick="clic(6);"><img id="img6" src="images/grenouille.jpg" /></div>
87: <div class="case" onclick="clic(7);"><img id="img7" src="images/autruche.jpg" /></div>
88: <div class="case" onclick="clic(8);"><img id="img8" src="images/autruche.jpg" /></div>
89: <hr />
90: <div class="case" onclick="clic(9);"><img id="img9" src="images/souris.jpg" /></div>
91: <div class="case" onclick="clic(10);"><img id="img10" src="images/souris.jpg" /></div>
92: <div class="case" onclick="clic(11);"><img id="img11" src="images/sanglier.jpg" /></div>
93: <div class="case" onclick="clic(12);"><img id="img12" src="images/sanglier.jpg" /></div>
94: <hr />
95: <div class="case" onclick="clic(13);"><img id="img13" src="images/cochon.jpg" /></div>
96: <div class="case" onclick="clic(14);"><img id="img14" src="images/cochon.jpg" /></div>
97: <div class="case" onclick="clic(15);"><img id="img15" src="images/lapin.jpg" /></div>
98: <div class="case" onclick="clic(16);"><img id="img16" src="images/lapin.jpg" /></div>
99: </div>
100:
101: </body>
102: </html>