aigroz
Nouveau membre
Bonjour,
J'essaie d'installer un script pour le jeu de Memory. Tout fonctionne. Alors, j'ai essayé de le "customiser", en rajoutant des cartes et en changeant leur taille.
Mission accomplie...MAIS, quand les cartes se retournent, les images sont étirées et déformées alors qu'elles devraient avoir la même taille que les dos des cartes. (vous pouvez voir ce que cela fait en situation réelle à l'adresse suivante:
Voyez-vous une solution?
Je vous remercie par avance pour vos réponses.
Voici le code de la page.
J'essaie d'installer un script pour le jeu de Memory. Tout fonctionne. Alors, j'ai essayé de le "customiser", en rajoutant des cartes et en changeant leur taille.
Mission accomplie...MAIS, quand les cartes se retournent, les images sont étirées et déformées alors qu'elles devraient avoir la même taille que les dos des cartes. (vous pouvez voir ce que cela fait en situation réelle à l'adresse suivante:
Vous devez être connecté pour voir les liens.
Je ne trouve pas ce que je pourrais modifier pour éviter cet effet.Voyez-vous une solution?
Je vous remercie par avance pour vos réponses.
Voici le code de la page.
Code:
<html>
<head>
<title>Memory</title>
</head>
<body>
<center><h1>MEMORY</h1>
<table width='80%'>
<tr>
<td width="15%" height="132">
<center>
<img src='dos.jpg' onclick='joue(0)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(1)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onClick='joue(2)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(3)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(4)' width="100" height="125">
</center>
</td>
<td height="132">
<div align="center"><img src='dos.jpg' onClick='joue(5)' width="100" height="125"></div>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(6)' width="100" height="125">
</center>
</td>
</tr>
<tr>
<td width="13%" height="132">
<center>
<img src='dos.jpg' onclick='joue(7)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(8)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(9)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(10)' width="100" height="125">
</center>
</td>
<td height="132">
<center>
<img src='dos.jpg' onClick='joue(11)' width="100" height="125">
</center>
</td>
<td height="132">
<div align="center"><img src='dos.jpg' onClick='joue(12)' width="100" height="125"></div>
</td>
<td height="132">
<center>
<img src='dos.jpg' onclick='joue(13)' width="100" height="125">
</center>
</td>
</tr>
<tr>
<td height="130" width="13%">
<center>
<img src='dos.jpg' onclick='joue(14)' width="100" height="125">
</center>
</td>
<td height="130">
<center>
<img src='dos.jpg' onclick='joue(15)' width="100" height="125">
</center>
</td>
<td height="130">
<center>
<img src='dos.jpg' onclick='joue(16)' width="100" height="125">
</center>
</td>
<td height="130">
<center>
<img src='dos.jpg' onclick='joue(17)' width="100" height="125">
</center>
</td>
<td height="130">
<center>
<img src='dos.jpg' onclick='joue(18)' width="100" height="125">
</center>
</td>
<td height="130">
<div align="center"><img src='dos.jpg' onClick='joue(19)' width="100" height="125"></div>
</td>
<td height="130">
<center>
<img src='dos.jpg' onclick='joue(20)' width="100" height="125">
</center>
</td>
</tr>
<tr>
<td height="125" width="13%">
<center>
<img src='dos.jpg' onclick='joue(21)' width="100" height="125">
</center>
</td>
<td height="125">
<center>
<img src='dos.jpg' onclick='joue(22)' width="100" height="125">
</center>
</td>
<td height="125">
<center>
<img src='dos.jpg' onclick='joue(23)' width="100" height="125">
</center>
</td>
<td height="125">
<center>
<img src='dos.jpg' onclick='joue(24)' width="100" height="125">
</center>
</td>
<td height="125">
<center>
<img src='dos.jpg' onclick='joue(25)' width="100" height="125">
</center>
</td>
<td>
<div align="center"><img src='dos.jpg' onClick='joue(26)' width="100" height="125"></div>
</td>
<td>
<center>
<img src='dos.jpg' onclick='joue(27)' width="100" height="125">
</center>
</td>
</tr>
</table>
</center>
<script language='javascript'>
img=new Array(30);
for (i=0;i<15;i++){
img[i]=i+1;
img[i+15]=i+1;
}
for (i=0;i<30;i++){
a=rnd(30);
b=img[a];
img[a]=img[i];
img[i]=b;
}
nombre=0;
points=0;
tentatives=0;
function joue(i){
if (img[i]!=-1){
if (nombre==0){
nombre=1;
case1=i;
change(i,img[i]+'.jpg',0);
}else if (nombre==1){
case2=i;
change(i,img[i]+'.jpg',0);
if (img[case1]==img[case2]){
points++;
img[case1]=-1;
img[case2]=-1;
if (points==9){
alert("Vous avez gagné en "+tentatives+" clicks...");
}
}else{
setTimeout("change("+case1+",'dos.jpg',0);change("+case2+",'dos.jpg',0);", 1000);
}
nombre=0;
}
tentatives++;
}
}
function change(image, j, avancement)
{
if (avancement<10){
document.images[image].width=90-avancement*10;
}else if (avancement==10){
document.images[image].src=j;
}else if (avancement<23){
document.images[image].width=(avancement-10)*10;
}
avancement++;
if (avancement<23)setTimeout("change("+image+", '"+j+"', "+avancement+");",10);
}
function rnd(n)
{
var temp = Math.random();
if (temp==1) temp=0.9;
return Math.floor(temp * n);
}
</script>
</body>
</html>
