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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
.carte{
width:47px;
height:67px;
overflow:hidden;
float:left;
margin:5px;
}
img{
position:relative;
top:-268px;
left:-92px;
}
</style>
</head>
<body>
<div class="carte"><img id=image_de_la_carte1 src=http://a21.idata.over-blog.com/0/51/39/34/jeu-de-cartes.jpg /></div>
<div class="carte"><img id=image_de_la_carte2 src=http://a21.idata.over-blog.com/0/51/39/34/jeu-de-cartes.jpg /></div>
<div class="carte"><img id=image_de_la_carte3 src=http://a21.idata.over-blog.com/0/51/39/34/jeu-de-cartes.jpg /></div>
<div class="carte"><img id=image_de_la_carte4 src=http://a21.idata.over-blog.com/0/51/39/34/jeu-de-cartes.jpg /></div>
<div class="carte"><img id=image_de_la_carte5 src=http://a21.idata.over-blog.com/0/51/39/34/jeu-de-cartes.jpg /></div>
<br/><br/><br/><br/><br/>
<input type=button id=pioche value="piocher une carte" />
<script type="text/javascript">
function $(id){return document.getElementById(id);};
var cartes = [
'as de treffle','deux de treffle','trois de treffle','quatre de treffle','cinq de treffle','six de treffle','sept de treffle','huit de treffle','neuf de treffle','dix de treffle','valet de treffle','dame de treffle','roi de treffle',
'as de carreau','deux de carreau','trois de carreau','quatre de carreau','cinq de carreau','six de carreau','sept de carreau','huit de carreau','neuf de carreau','dix de carreau','valet de carreau','dame de carreau','roi de carreau',
'as de coeur','deux de coeur','trois de coeur','quatre de coeur','cinq de coeur','six de coeur','sept de coeur','huit de coeur','neuf de coeur','dix de coeur','valet de coeur','dame de coeur','roi de coeur',
'as de pique','deux de pique','trois de pique','quatre de pique','cinq de pique','six de pique','sept de pique','huit de pique','neuf de pique','dix de pique','valet de pique','dame de pique','roi de pique',
];
var nombreDeCartesTirees = 0;
function getPos(str){
str = str.replace('as',0).replace('deux',46).replace('trois',92).replace('quatre',138).replace('cinq',184).replace('six',230).replace('sept',276).replace('huit',323).replace('neuf',369).replace('dix',415).replace('valet',461).replace('dame',507).replace('roi',553).replace('treffle',0).replace('carreau',67).replace('coeur',134).replace('pique',201);
return {x:parseInt(str.split(' ')[0]),y:parseInt(str.split(' ')[2])};
}
function pioche(){
if(nombreDeCartesTirees >= 5) {
alert('toutes les cartes ont deja été tirées'); return;
}
var pos = getPos(cartes.splice(Math.floor(Math.random() * cartes.length),1)[0]);
$('image_de_la_carte'+ ++nombreDeCartesTirees).style.left = -pos.x + 'px';
$('image_de_la_carte'+ nombreDeCartesTirees).style.top = -pos.y + 'px';
}
$('pioche').onclick = pioche;
</script>
</body>
</html> |
