Clásico juego de memoria con javascript
Estoy usando un código que encontré en la red para un juego de memoria (el clásico juego de destapar imágenes de dos en dos y tratar de hacer las parejas).
Podés verlo en funcionamiento en:
http://www.tunait.com/javascript/scripts/juegos/memoria.htm
El código es:
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
<script language="JavaScript">
/*****************************************************************************
Juego de Memoria. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
http://javascript.tunait.com
[email protected]
******************************************************************************/
var directorio = "imagenes" //directorio o ruta a donde se guardan las imágenes
var numImagenes = 29 //cantidad de imágenes que existan em el directorio
perder = 20 //Numero de intentos a los que se pierde
//***No tocar el código a partir de aquí
var nums=new Array()
var cant = 8
var acrtos = 0
var intentos = 0
gana = false
perdio = false
function numero(){
var num = Math.ceil(Math.random() *numImagenes);
return num}
nums[0] = numero()
for(m=1;m<=(cant-1);m++)
{
nums[m] = comprueba(numero())
}
function comprueba(nume)
{
var repe = false
for(t=0;t<nums.length;t++)
{
if(nume == nums[t])
{
repe = true; break
}
}
if(repe == false)
{
return nume
}
else
{
m--
comprueba(numero())
}
}
var lista = new Array()
largo = nums.length
for(w = 0; w < largo ; w++)
{
nums[largo + w] = nums[w]
}
var numero = 0
function comprueba2(numerito)
{
if(nums[numerito] == null)
{
if(numerito == nums.length-1)
{
numerito = 0
numerito2 = numerito
comprueba2(numerito2)
}
else
{
numerito += 1
numerito2 = numerito
comprueba2(numerito2)
}
}
else{
numero = numerito
return numerito
}
}
for(q=0; q < nums.length; q++)
{
if(q == nums.length-1)
{
for(e=0;e < nums.length; e++)
{
if(nums[e] != null)
{
lista[q] = nums[e];
break
}
}
}
else
{
numerin = Math.floor(Math.random() * nums.length-1)
numerin = comprueba2(numerin)
lista[q] = nums[numero]
nums[numero] = null
}
}
var imagenes = new Array()
for(n=0;n<lista.length;n++)
{
imagenes[n] = new Image()
imagencilla = eval('"' + lista[n] + '.gif"')
imagenes[n].src = directorio + "/" + imagencilla
}
s = 1
document.writeln ('<table align="center">')
document.writeln ('<tr align="center">')
for(p=1; p<=nums.length;p++)
{
if(s > 4){document.write ('</tr><tr>');s=1}
document.write ('<td id="' + lista[p-1] + '"><a href="#" onclick="this.blur();return false">')
document.write ('<img id="' + lista[p-1] + '" onclick="gira(this,this.id)" src="' + directorio + '/dorso.gif" width="71" height="81">')
document.writeln ('</a></td>')
s++
}
document.writeln ('</table>')
cont = 0
var gi1,gi2
function gira(cual,carta)
{
if(perdio == true)
{
document.formu.visor.value="Juego Finalizado"
setTimeout('document.location.reload()',2000)
}
if(cual != gi1){cont++}
if(cont < 3)
{
cual.src = directorio + "/" + carta + ".gif"
if(cont==1){gi1 = cual;}
else{gi2 = cual; comp()}
}
}
function comp()
{
if(gi1.src == gi2.src)
{
setTimeout("gi1.style.borderColor='red'",200)
setTimeout("gi2.style.borderColor='red'",400)
gi1.onclick=null;gi2.onclick=null
intentos++
document.formu.visor.value = "Intentos: " + intentos
acrtos++
if(acrtos == cant)
{
finJuego('gana')
gana = true
}
cont = 0
}
else
{
setTimeout("restaura()",1500)
}
}
function restaura()
{
gi1.src = directorio + "/" + "dorso.gif" ; gi1 =""
setTimeout('gi2.src = directorio + "/dorso.gif";gi2=""',200)
cont = 0
intentos ++
document.formu.visor.value = "Intentos: " + intentos
if(intentos >= perder)
{
cont = 4
finJuego('pierde')
perdio = true
}
}
function finJuego(cual)
{
if(navigator.appName == "Netscape")
{
anchoVentana = window.innerWidth
altoVentana = window.innerHeight
}
else
{
anchoVentana = document.body.scrollWidth
altoVentana = document.body.scrollHeight
}
document.getElementById('gana').style.top=(altoVentana -100)/2
document.getElementById('gana').style.left =(anchoVentana -200)/2
if(cual == 'pierde'){document.getElementById('mensaje').innerHTML = 'Agotaste tus ' + perder + ' intentos<br> Perdiste :-(';cont='perdio'}
document.getElementById('gana').style.visibility = 'visible'
}
function cierra()
{document.getElementById('gana').style.visibility='hidden'}
</script>
<style type="text/css">
<!--
.formato {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
border: 1px solid #990000;
}
.alertas {
font-family: Tahoma, Verdana, Arial;
font-size: 14px;
font-weight: bold;
color: #E7E7CF;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #FFFFFF;
background-color: #A65353;
}
.botoncillo {
font-size: 10px;
font-weight: bold;
color: #990000;
background-color: #CCCC99;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFCCCC;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #FFCCCC;
font-family: Tahoma, Verdana, Arial;
cursor: hand;
}
.botoncillo2 {
font-size: 10px;
font-weight: bold;
color: #990000;
background-color: #E7E7CF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-right-color: #FFFFCC;
border-bottom-color: #FFFFCC;
border-left-color: #666666;
font-family: Tahoma, Verdana, Arial;
Cursor:...
Podés verlo en funcionamiento en:
http://www.tunait.com/javascript/scripts/juegos/memoria.htm
El código es:
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
<script language="JavaScript">
/*****************************************************************************
Juego de Memoria. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
http://javascript.tunait.com
[email protected]
******************************************************************************/
var directorio = "imagenes" //directorio o ruta a donde se guardan las imágenes
var numImagenes = 29 //cantidad de imágenes que existan em el directorio
perder = 20 //Numero de intentos a los que se pierde
//***No tocar el código a partir de aquí
var nums=new Array()
var cant = 8
var acrtos = 0
var intentos = 0
gana = false
perdio = false
function numero(){
var num = Math.ceil(Math.random() *numImagenes);
return num}
nums[0] = numero()
for(m=1;m<=(cant-1);m++)
{
nums[m] = comprueba(numero())
}
function comprueba(nume)
{
var repe = false
for(t=0;t<nums.length;t++)
{
if(nume == nums[t])
{
repe = true; break
}
}
if(repe == false)
{
return nume
}
else
{
m--
comprueba(numero())
}
}
var lista = new Array()
largo = nums.length
for(w = 0; w < largo ; w++)
{
nums[largo + w] = nums[w]
}
var numero = 0
function comprueba2(numerito)
{
if(nums[numerito] == null)
{
if(numerito == nums.length-1)
{
numerito = 0
numerito2 = numerito
comprueba2(numerito2)
}
else
{
numerito += 1
numerito2 = numerito
comprueba2(numerito2)
}
}
else{
numero = numerito
return numerito
}
}
for(q=0; q < nums.length; q++)
{
if(q == nums.length-1)
{
for(e=0;e < nums.length; e++)
{
if(nums[e] != null)
{
lista[q] = nums[e];
break
}
}
}
else
{
numerin = Math.floor(Math.random() * nums.length-1)
numerin = comprueba2(numerin)
lista[q] = nums[numero]
nums[numero] = null
}
}
var imagenes = new Array()
for(n=0;n<lista.length;n++)
{
imagenes[n] = new Image()
imagencilla = eval('"' + lista[n] + '.gif"')
imagenes[n].src = directorio + "/" + imagencilla
}
s = 1
document.writeln ('<table align="center">')
document.writeln ('<tr align="center">')
for(p=1; p<=nums.length;p++)
{
if(s > 4){document.write ('</tr><tr>');s=1}
document.write ('<td id="' + lista[p-1] + '"><a href="#" onclick="this.blur();return false">')
document.write ('<img id="' + lista[p-1] + '" onclick="gira(this,this.id)" src="' + directorio + '/dorso.gif" width="71" height="81">')
document.writeln ('</a></td>')
s++
}
document.writeln ('</table>')
cont = 0
var gi1,gi2
function gira(cual,carta)
{
if(perdio == true)
{
document.formu.visor.value="Juego Finalizado"
setTimeout('document.location.reload()',2000)
}
if(cual != gi1){cont++}
if(cont < 3)
{
cual.src = directorio + "/" + carta + ".gif"
if(cont==1){gi1 = cual;}
else{gi2 = cual; comp()}
}
}
function comp()
{
if(gi1.src == gi2.src)
{
setTimeout("gi1.style.borderColor='red'",200)
setTimeout("gi2.style.borderColor='red'",400)
gi1.onclick=null;gi2.onclick=null
intentos++
document.formu.visor.value = "Intentos: " + intentos
acrtos++
if(acrtos == cant)
{
finJuego('gana')
gana = true
}
cont = 0
}
else
{
setTimeout("restaura()",1500)
}
}
function restaura()
{
gi1.src = directorio + "/" + "dorso.gif" ; gi1 =""
setTimeout('gi2.src = directorio + "/dorso.gif";gi2=""',200)
cont = 0
intentos ++
document.formu.visor.value = "Intentos: " + intentos
if(intentos >= perder)
{
cont = 4
finJuego('pierde')
perdio = true
}
}
function finJuego(cual)
{
if(navigator.appName == "Netscape")
{
anchoVentana = window.innerWidth
altoVentana = window.innerHeight
}
else
{
anchoVentana = document.body.scrollWidth
altoVentana = document.body.scrollHeight
}
document.getElementById('gana').style.top=(altoVentana -100)/2
document.getElementById('gana').style.left =(anchoVentana -200)/2
if(cual == 'pierde'){document.getElementById('mensaje').innerHTML = 'Agotaste tus ' + perder + ' intentos<br> Perdiste :-(';cont='perdio'}
document.getElementById('gana').style.visibility = 'visible'
}
function cierra()
{document.getElementById('gana').style.visibility='hidden'}
</script>
<style type="text/css">
<!--
.formato {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
border: 1px solid #990000;
}
.alertas {
font-family: Tahoma, Verdana, Arial;
font-size: 14px;
font-weight: bold;
color: #E7E7CF;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #FFFFFF;
background-color: #A65353;
}
.botoncillo {
font-size: 10px;
font-weight: bold;
color: #990000;
background-color: #CCCC99;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFCCCC;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #FFCCCC;
font-family: Tahoma, Verdana, Arial;
cursor: hand;
}
.botoncillo2 {
font-size: 10px;
font-weight: bold;
color: #990000;
background-color: #E7E7CF;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666666;
border-right-color: #FFFFCC;
border-bottom-color: #FFFFCC;
border-left-color: #666666;
font-family: Tahoma, Verdana, Arial;
Cursor:...
1 respuesta
Respuesta de krlosnow
1
No puedo cambiar el numero de imagenes que estaran en el directiorio imagenes porque? si le pongo por ejemplo 9 imagenes se cae - Renzo Castillo