Bonjour,
J'ai fait un petit jeu de memory en JS.
Il se passe un truc inattendu sous FF : quand je clique sur une image il la met en surbrillance. En fait, elle est recouverte d'un "voile" bleu.
Connaissez-vous ce comportement et savez-vous comment l'éviter ?
Je n'avais jamais remarqué ça avant. Je n'arrive pas à trouver ce qui déclenche ça sous FF.
Tout se passe bien sur IE.
Le jeu est là pour test :
http://esbkarate.free.fr/memory/
Le css :
(le code n'est pas très lisible dans mon message, il est dispo sur la source de la page).
Merci[/i][/i][/i][/i][/i]
Modifié par astree (01 Jun 2010 - 10:49)
J'ai fait un petit jeu de memory en JS.
Il se passe un truc inattendu sous FF : quand je clique sur une image il la met en surbrillance. En fait, elle est recouverte d'un "voile" bleu.
Connaissez-vous ce comportement et savez-vous comment l'éviter ?
Je n'avais jamais remarqué ça avant. Je n'arrive pas à trouver ce qui déclenche ça sous FF.
Tout se passe bien sur IE.
Le jeu est là pour test :
http://esbkarate.free.fr/memory/
Le css :
h1 {
font-size: 1.4em;
}
table{
margin: auto;
border: silver;
border-style: solid;
border-width: 1px;
}
td{
width: 110px;
height: 110px;
}
#globale{
margin: auto;
text-align: center;
}
.cache{
background-repeat: no-repeat;
background-position: center center;
background-image: url(images/dos.gif);
cursor:pointer;
}
.pas_vue{
visibility: hidden;
}
.visible{
background: white;
visibility: visible;
}
.vide{
background: white none;
}
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Memory</title>
<link rel="stylesheet" type="text/css" href="memory.css" title="mon style"/>
<script type="text/javascript">
//LES VARIABLES
var tabbase = new Array(20);
var tabdonne = new Array();
var nbr = 20
var alea
var deuxfois
var carte1="";
var carte2="";
var visibles = 0;
var numero="";
var essai= 0;
var trouvees = 0;
var controle=true;
//remplissage
for(var i=0; i<20;i++){
tabbase[i] = i;
for(var c=0; c<10;c++){
tabbase[c] = "images/carte"+c+".gif";
}
for(var d=10; d<20;d++){
deuxfois = d - 10;
tabbase[d] = "images/carte"+deuxfois+".gif";
}
}
//mélange
for(var i=0; i<nbr; i++){
tabdonne[i] = tabbase[i];
}
while( nbr> 0){
alea = Math.floor(Math.random() * nbr);
nbr--;
tire = tabdonne[alea];
for( i= alea; i < nbr; i++){
tabdonne[i] = tabdonne[i+1]
}
tabdonne[nbr] = tire;
}
//distribuer
function donne(){
for(var i = 0 ; i<20; i++){
var affiche = '<img src ="'+tabdonne[i]+'" class="pas_vue" id="c'+i+'" />';
document.getElementById("t"+i).innerHTML = affiche ;
}
}
//le clic sur les cartes
function clic(numero){
if(visibles==0){
if(document.images[numero].className == 'pas_vue'){//si la carte est face cachee
if(controle==true){//pour controler les moments où le joueur peut retourner une carte
document.images[numero].className = 'visible';//on la rend visible
carte1=document.images[numero];// on la stocke dans une variable pour la comparer avec la 2ème
visibles=1;
numero="";
}
}
}else if(visibles==1){//on a deja clique, il existe une carte1
if(document.images[numero].className == 'pas_vue'){//si la carte est face cachee
if(controle==true){
document.images[numero].className = 'visible';
carte2=document.images[numero];
visibles=0;
controle=false;//apres le 2e clic, controle sera remis à true par le setTimeout ou ligne 106, apres elimination de la paire
}
if(carte1.src != carte2.src){//les cartes sont differentes
setTimeout("carte1.className = 'pas_vue'; carte2.className = 'pas_vue'; controle=true;",1000);//un peu de temps pour memoriser
essai ++;//comteur de coups
}else if(carte1.src == carte2.src){//elles sont égales
essai ++;
trouvees = trouvees + 2;
carte1.src="images/blanc.gif";
carte2.src="images/blanc.gif";
controle=true;
if(trouvees == 20){//toutes les cartes on été trouvées
document.getElementById("resultat").className = "visible";
alert("Bravo vous avez réussi en " +essai+ " coups");
document.getElementById("coups").innerHTML = "voulez-vous rejouer ?";
}
}
}
}
}
//onload
function lancement(){
donne();
}
//ça nous a plu on recommence [smile]
function recharger(){
window.location="valerie_memory.html";
}
</script></head>
<body onload="lancement()";>
<div id="globale">
<h1>Jeux de Memory</h1>
<p>Trouvez les paires pour éliminer toutes les cartes</p>
<table>
<tr>
<td id="t0" class="cache" onclick="clic(0)"> </td>
<td id="t1" class="cache" onclick="clic(1)"> </td>
<td id="t2" class="cache" onclick="clic(2)"> </td>
<td id="t3" class="cache" onclick="clic(3)"> </td>
</tr>
<tr>
<td id="t4" class="cache" onclick="clic(4)"> </td>
<td id="t5" class="cache" onclick="clic(5)"> </td>
<td id="t6" class="cache" onclick="clic(6)"> </td>
<td id="t7" class="cache" onclick="clic(7)"> </td>
</tr>
<tr>
<td id="t8" class="cache" onclick="clic(8)"> </td>
<td id="t9" class="cache" onclick="clic(9)"> </td>
<td id="t10" class="cache" onclick="clic(10)"> </td>
<td id="t11" class="cache" onclick="clic(11)"> </td>
</tr>
<tr>
<td id="t12" class="cache" onclick="clic(12)"> </td>
<td id="t13" class="cache" onclick="clic(13)"> </td>
<td id="t14" class="cache" onclick="clic(14)"> </td>
<td id="t15" class="cache" onclick="clic(15)"> </td>
</tr>
<tr>
<td id="t16" class="cache" onclick="clic(16)"> </td>
<td id="t17" class="cache" onclick="clic(17)"> </td>
<td id="t18" class="cache" onclick="clic(18)"> </td>
<td id="t19" class="cache" onclick="clic(19)"> </td>
</tr>
</table>
<p id="coups">Bonne chance !</p>
<input type="button" id="resultat" class="pas_vue" value="Rejouer" onclick="recharger()"/>
</div>
</body>
</html>(le code n'est pas très lisible dans mon message, il est dispo sur la source de la page).
Merci[/i][/i][/i][/i][/i]
Modifié par astree (01 Jun 2010 - 10:49)
