tirage de carte .

**King_T** · 22/03/2011, 15h25

Salut

je cherche comment reproduire ce système de tirage de carte ici.

je bloque complètement.
merci pour votre aide.

**nadox** · 22/03/2011, 16h16

Bonjour,

Je ne crois pas avoir compris ce qui te bloque... à moins que .... tu ne l'as pas précisé ?

**nox75** · 22/03/2011, 16h17

Qu'est ce qui te bloque exactement ?
Qu'as-tu essayé ?
Qu'as-tu obtenu ?

Si tu souhaites une réponse en phase avec ton besoin, il faut préciser ta question

**Willpower** · 23/03/2011, 10h42

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
<body>
<img id=image_de_la_carte1 src=http://profile.ak.fbcdn.net/hprofile-ak-snc4/195281_750599009_7762928_q.jpg />
<img id=image_de_la_carte2 src=http://profile.ak.fbcdn.net/hprofile-ak-snc4/195281_750599009_7762928_q.jpg />
<img id=image_de_la_carte3 src=http://profile.ak.fbcdn.net/hprofile-ak-snc4/195281_750599009_7762928_q.jpg />
<img id=image_de_la_carte4 src=http://profile.ak.fbcdn.net/hprofile-ak-snc4/195281_750599009_7762928_q.jpg />
<img id=image_de_la_carte5 src=http://profile.ak.fbcdn.net/hprofile-ak-snc4/195281_750599009_7762928_q.jpg />
<br/>
<input type=button id=pioche value="piocher une carte" />
<script type="text/javascript">
 
function $(id){return document.getElementById(id);};
 
var cartes = [
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/187641_836390170_4350300_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/173501_554630434_2353797_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/187544_1614031862_2863165_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/195672_585519149_3582184_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/186146_100000707581849_7544680_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/161588_531361345_7144949_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/49947_612427245_2039770_q.jpg',
        'http://profile.ak.fbcdn.net/hprofile-ak-snc4/49941_603487346_1227300_q.jpg'
        ];
 
var nombreDeCartesTirees = 0;
 
 
function pioche(){
  if(nombreDeCartesTirees >= 5) {
    alert('toutes les cartes ont deja été tirées'); return;
  }
  $('image_de_la_carte'+ ++nombreDeCartesTirees).src = cartes.splice(Math.floor(Math.random() * cartes.length),1)[0];
}
 
$('pioche').onclick = pioche;
 
</script>
 
</body>

**Willpower** · 23/03/2011, 12h41

version avec une seule image de cartes à jouer (et donc un seul chargement lors du chargement de la page).

Code :

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
 
<!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>