Os dejo el codigo:
Código PHP:
<?php
$imagen_formato='png'; // Case sensitive
$imagenes[0]='1';
$imagenes[1]='2';
$imagenes[2]='3';
$imagenes[3]='4';
$imagenes[4]='5';
$imagenes[5]='6';
$imagenes[6]='7';
$imagenes[7]='8';
$imagenes[8]='9';
$imagenes[9]='10';
$imagenes[10]='11';
$imagenes[11]='12';
$imagenes[12]='13';
$imagenes[13]='14';
$imagenes[14]='15';
$imagenes[15]='16';
$imagenes[16]='17';
$imagenes[17]='18';
$imagenes2=$imagenes;
$imagenes= array_merge($imagenes, $imagenes2);
shuffle($imagenes);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Memotest, CSS.</title>
<link rel="stylesheet" type="text/css" media="all" href="memotest.css">
<link rel="stylesheet" href="js/themes/light/light.modal.css" type="text/css" media="screen" title="light" />
<script src="js/jquery-1.2.3.pack.js" type="text/javascript"></script>
<script src="js/jquery.timer.js" type="text/javascript"></script>
<script src="js/ui.core.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).ready(function(){
function memotest(i, imagen){
if( $(".s-"+imagen).hasClass('seleccionada')){
// Si ya hay una imagen del par ya seleccionada (o sea, elige la 2da correctamente)
$(".c-"+imagen).removeClass("abierto"); // Quitamos el cover del Bg, para mostrar la ficha
$(".s-"+imagen).addClass("encontrada"); // se marca el div de la ficha como encontrada
$(".c-"+imagen).addClass("trabado");
var w = $(".encontrada");
// Congratulation message / Mensaje de felicitacion.
if(w.length == 36){
$.timer(600, function (timer) {
$("#win").jqm().jqmShow();
timer.stop();
});
}
}else if( $(".ficha-cover").hasClass("abierto") ){
// Si no hay coincidencia, y hay alguna abierta:
$("#s-"+i).addClass("seleccionada"); // for the record... / lo grabamos.
$("#c-"+i).addClass("abierto"); // display:none;
// if no coincidence, hide items after 400ms / Si no acierta, espera 400ms para ocultar la ficha
$.timer(400, function (timer) {
$(".ficha").removeClass("seleccionada"); // not selected anymore / ya no esta seleccionada.
$(".ficha-cover").removeClass("abierto"); // chau display:none;
timer.stop();
});
}else{
// Si elige la primer ficha (de dos)
$("#s-"+i).addClass("seleccionada"); // for the record... / lo grabamos.
$("#c-"+i).addClass("abierto"); // display:none;
}
}
// Assign onClick to items / Asigna onClick a las fichas ('.ficha-cover').
<? foreach($imagenes as $i => $imagen){ ?>
$("#c-<?=$i?>").click( function(){ memotest('<?=$i?>', '<?=$imagen?>');});
<? }?>
});
</script>
<style type="text/css">
<?
$class_img=array();
foreach($imagenes as $i => $imagen){
if(!in_array($imagen, $class_img)){
$class_img[]=$imagen;
?>
.s-<?=$imagen?> {
background-image:url(img/64/<?=$imagen?>.<?=$imagen_formato?>);
}
<?
}
}?>
</style>
</head>
<body>
<div align="center">
<div class="memotest" style="width:600px;">
<div style="margin-top:5px; height:262px;">
<? foreach($imagenes as $i => $imagen){ ?>
<div class="ficha s-<?=$imagen?>" id="s-<?=$i?>"><div class="ficha-cover c-<?=$imagen?>" id="c-<?=$i?>"> </div>
</div>
<? }?>
</div>
</div>
</div>
<div class="jqmWindow jqmClose" id="win">
<img src="img/128/22.png" border="0" style="float:left; margin:5px;" />
<b>Memotest superado! / Memotest passed!</b>
<ul>
<li><a href="index.php" target="_self" title="Jugar otra vez / Play Again">Jugar otra vez! / Play Again!</a></li>
</ul>
</div>
</body>
</html> Código PHP:
<? foreach($imagenes as $i => $imagen){ ?> Gracias
