I am doing a Memorama, it works well, two cards are uncovered if they are the same, they remain uncovered, otherwise 3 seconds pass and they are hidden again.
But as I do, if Player 1, make no mistake and add the pairs of Player 1, in the corresponding field, otherwise move to Player 2 and if this hits a pair, add it to your field otherwise, move to Player 1.
Here code:
HTML:
<html>
<head>
<meta charset="utf-8">
<title> Memorama </title>
<link href="Memorama.css" rel="stylesheet" type="text/css">
<script src="Memorama.js" type="text/javascript"></script>
</head>
<body>
<center>
<p class="encabezado"> Juego de Memoria - 2 JUGADORES </p>
<form name="forma">
<table align="center" border="1px" width="50%" height="20" bgcolor="#1481C0">
<tr>
<td>
<table align="center" width="500" height="20">
<tr>
<td><img src="cartas/0.jpg" id="1a" alt="0" height="70" onClick="evento('1');"></td>
<td><img src="cartas/0.jpg" id="2a" alt="0" height="70" onClick="evento('2');"></td>
<td><img src="cartas/0.jpg" id="3a" alt="0" height="70" onClick="evento('3');"></td>
<td><img src="cartas/0.jpg" id="4a" alt="0" height="70" onClick="evento('4');"></td>
<td><img src="cartas/0.jpg" id="5a" alt="0" height="70" onClick="evento('5');"></td>
<td><img src="cartas/0.jpg" id="6a" alt="0" height="70" onClick="evento('6');"></td>
<td><img src="cartas/0.jpg" id="7a" alt="0" height="70" onClick="evento('7');"></td>
<td><img src="cartas/0.jpg" id="8a" alt="0" height="70" onClick="evento('8');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="9a" alt="0" height="70" onClick="evento('9');"></td>
<td><img src="cartas/0.jpg" id="10a" alt="0" height="70" onClick="evento('10');"></td>
<td><img src="cartas/0.jpg" id="11a" alt="0" height="70" onClick="evento('11');"></td>
<td><img src="cartas/0.jpg" id="12a" alt="0" height="70" onClick="evento('12');"></td>
<td><img src="cartas/0.jpg" id="13a" alt="0" height="70" onClick="evento('13');"></td>
<td><img src="cartas/0.jpg" id="14a" alt="0" height="70" onClick="evento('14');"></td>
<td><img src="cartas/0.jpg" id="15a" alt="0" height="70" onClick="evento('15');"></td>
<td><img src="cartas/0.jpg" id="16a" alt="0" height="70" onClick="evento('16');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="17a" alt="0" height="70" onClick="evento('17');"></td>
<td><img src="cartas/0.jpg" id="18a" alt="0" height="70" onClick="evento('18');"></td>
<td><img src="cartas/0.jpg" id="19a" alt="0" height="70" onClick="evento('19');"></td>
<td><img src="cartas/0.jpg" id="20a" alt="0" height="70" onClick="evento('20');"></td>
<td><img src="cartas/0.jpg" id="21a" alt="0" height="70" onClick="evento('21');"></td>
<td><img src="cartas/0.jpg" id="22a" alt="0" height="70" onClick="evento('22');"></td>
<td><img src="cartas/0.jpg" id="23a" alt="0" height="70" onClick="evento('23');"></td>
<td><img src="cartas/0.jpg" id="24a" alt="0" height="70" onClick="evento('24');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="25a" alt="0" height="70" onClick="evento('25');"></td>
<td><img src="cartas/0.jpg" id="26a" alt="0" height="70" onClick="evento('26');"></td>
<td><img src="cartas/0.jpg" id="27a" alt="0" height="70" onClick="evento('27');"></td>
<td><img src="cartas/0.jpg" id="28a" alt="0" height="70" onClick="evento('28');"></td>
<td><img src="cartas/0.jpg" id="29a" alt="0" height="70" onClick="evento('29');"></td>
<td><img src="cartas/0.jpg" id="30a" alt="0" height="70" onClick="evento('30');"></td>
<td><img src="cartas/0.jpg" id="31a" alt="0" height="70" onClick="evento('31');"></td>
<td><img src="cartas/0.jpg" id="32a" alt="0" height="70" onClick="evento('32');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="33a" alt="0" height="70" onClick="evento('33');"></td>
<td><img src="cartas/0.jpg" id="34a" alt="0" height="70" onClick="evento('34');"></td>
<td><img src="cartas/0.jpg" id="35a" alt="0" height="70" onClick="evento('35');"></td>
<td><img src="cartas/0.jpg" id="36a" alt="0" height="70" onClick="evento('36');"></td>
<td><img src="cartas/0.jpg" id="37a" alt="0" height="70" onClick="evento('37');"></td>
<td><img src="cartas/0.jpg" id="38a" alt="0" height="70" onClick="evento('38');"></td>
<td><img src="cartas/0.jpg" id="39a" alt="0" height="70" onClick="evento('39');"></td>
<td><img src="cartas/0.jpg" id="40a" alt="0" height="70" onClick="evento('40');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="41a" alt="0" height="70" onClick="evento('41');"></td>
<td><img src="cartas/0.jpg" id="42a" alt="0" height="70" onClick="evento('42');"></td>
<td><img src="cartas/0.jpg" id="43a" alt="0" height="70" onClick="evento('43');"></td>
<td><img src="cartas/0.jpg" id="44a" alt="0" height="70" onClick="evento('44');"></td>
<td><img src="cartas/0.jpg" id="45a" alt="0" height="70" onClick="evento('45');"></td>
<td><img src="cartas/0.jpg" id="46a" alt="0" height="70" onClick="evento('46');"></td>
<td><img src="cartas/0.jpg" id="47a" alt="0" height="70" onClick="evento('47');"></td>
<td><img src="cartas/0.jpg" id="48a" alt="0" height="70" onClick="evento('48');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="49a" alt="0" height="70" onClick="evento('49');"></td>
<td><img src="cartas/0.jpg" id="50a" alt="0" height="70" onClick="evento('50');"></td>
<td><img src="cartas/0.jpg" id="51a" alt="0" height="70" onClick="evento('51');"></td>
<td><img src="cartas/0.jpg" id="52a" alt="0" height="70" onClick="evento('52');"></td>
<td><img src="cartas/0.jpg" id="53a" alt="0" height="70" onClick="evento('53');"></td>
<td><img src="cartas/0.jpg" id="54a" alt="0" height="70" onClick="evento('54');"></td>
<td><img src="cartas/0.jpg" id="55a" alt="0" height="70" onClick="evento('55');"></td>
<td><img src="cartas/0.jpg" id="56a" alt="0" height="70" onClick="evento('56');"></td>
</tr>
<tr>
<td><img src="cartas/0.jpg" id="57a" alt="0" height="70" onClick="evento('57');"></td>
<td><img src="cartas/0.jpg" id="58a" alt="0" height="70" onClick="evento('58');"></td>
<td><img src="cartas/0.jpg" id="59a" alt="0" height="70" onClick="evento('59');"></td>
<td><img src="cartas/0.jpg" id="60a" alt="0" height="70" onClick="evento('60');"></td>
<td><img src="cartas/0.jpg" id="61a" alt="0" height="70" onClick="evento('61');"></td>
<td><img src="cartas/0.jpg" id="62a" alt="0" height="70" onClick="evento('62');"></td>
<td><img src="cartas/0.jpg" id="63a" alt="0" height="70" onClick="evento('63');"></td>
<td><img src="cartas/0.jpg" id="64a" alt="0" height="70" onClick="evento('64');"></td>
</tr>
</table>
</td>
<td valign="top">
<table>
<tr>
<td><input type="button" value="¡JUGAR!" onClick="aleatorio();"></td>
<td><input type="button" value="¡OCULTAR!" onClick="ocultar();"></td>
</tr>
<tr>
<td><input name="jugador1" type="text" size="50" class="campo" value="Turno del Jugador Uno" readonly="true"></td><br><br>
</tr>
<tr>
<td align="center"> PARES DEL JUGADOR 1 : </td>
</tr>
<tr>
<td align="center"><input name="jugador1" type="text" size="30" class="campo" value=0 readonly="true"></td>
</tr>
<br><br>
<tr>
<td align="center">Para iniciar haga click en cualquiera de las cartas, es turno del JUGADOR 1</td>
</tr>
<tr>
<td><input name="jugador1" type="text" size="50" class="campog" value="Turno del Jugador Dos" readonly="true"></td><br>
</tr>
<tr>
<td align="center"> PARES DEL JUGADOR 2 : </td>
</tr>
<tr>
<td align="center"><input name="jugador2" type="text" size="30" class="campog" value=0 readonly="true"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
JAVASCRIPT:
vectorImagen = new Array(65);
var valor1=0;
var valor2=0;
var turno=0;
var pares;
jugador=1;
function aleatorio()
{
var i=0;
for(i=0;i<33;i++)
{
vectorImagen[i]=i+".JPG";
}
var k=1;
for(i=33;i<65;i++)
{
vectorImagen[i]=k+".JPG";
k++;
}
var aux="";
for(i=1;i<65;i++)
{
var alea = Math.round(Math.random()*63)+1;
aux = vectorImagen[i];
vectorImagen[i]=vectorImagen[alea];
vectorImagen[alea]=aux;
}
for(i=1;i<65;i++)
{
document.getElementById(i+"a").src="cartas/"+vectorImagen[i];
}
}
function ocultar()
{
for(i=1;i<65;i++)
{
document.getElementById(i+"a").src="cartas/0.JPG";
}
}
function evento(valor)
{
if(turno==0)
{
valor1=valor;
turno=1;
document.getElementById(valor1+"a").src="cartas/"+vectorImagen[valor1];
}
else
{
valor2=valor;
turno=0;
document.getElementById(valor2+"a").src="cartas/"+vectorImagen[valor2];
if(vectorImagen[valor1]==vectorImagen[valor2])
{
}
else
{
setTimeout(doSomething, 1500);
}
}
}
function doSomething() {
document.getElementById(valor1+"a").src="cartas/0.JPG";
document.getElementById(valor2+"a").src="cartas/0.JPG";
}