Memorama virtual
Necesito hacer un memorama virtual, el cual lo voy a presentar en una clase de historia con ayuda de una computadora y un reproductor de imágenes, esas imágenes llevan letras y una imagen con relación al tema, como la puedo hacer que programa puedo usar para crear ese memorama virtual. Ya estando la imagen que se puedad voltear las imágenes con el ratón de la computadora
1 Respuesta
Respuesta de davidcortesb
1
Lo mejor en este caso es que uses Javascript. Te he hecho un código simple para que veas la idea. Se muestran las cartas y se voltean al pulsar. Ahora queda hacer que la distribución sea aleatoria, detectar cuando las dos pulsaciones sean sobre cartas iguales, etc. pero la base está aquí:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Memorama</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.memorama img{
cursor: hand;
cursor: pointer;
}
-->
</style>
<script type="text/javascript">
memorama = new Array("paquete.png", "vcss.png", "vcss.png", "paquete.png")
function vuelta(obj) {
var nombre = obj.name;
if (obj.src.indexOf("carta.png") >= 0) // Si estaba del revés
obj.src = memorama[nombre-1]; // Se muestra la carta
else // sino
obj.src = "carta.png" // se muestra el revés
}
</script>
</head>
<body>
<table class="memorama" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img name="1" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
<td><img name="2" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
</tr>
<tr>
<td><img name="3" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
<td><img name="4" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Memorama</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.memorama img{
cursor: hand;
cursor: pointer;
}
-->
</style>
<script type="text/javascript">
memorama = new Array("paquete.png", "vcss.png", "vcss.png", "paquete.png")
function vuelta(obj) {
var nombre = obj.name;
if (obj.src.indexOf("carta.png") >= 0) // Si estaba del revés
obj.src = memorama[nombre-1]; // Se muestra la carta
else // sino
obj.src = "carta.png" // se muestra el revés
}
</script>
</head>
<body>
<table class="memorama" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><img name="1" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
<td><img name="2" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
</tr>
<tr>
<td><img name="3" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
<td><img name="4" src="carta.png" width="64" height="64" alt="" onClick="vuelta(this)"></td>
</tr>
</table>
</body>
</html>
