Como le dije a un usuario en el otro tema, me puse a desarrollar un pequeño juego en demostración sobre el típico juego de cartas de memorias usando Javascript, no es nada difícil de entenderlo, espero que les sea de utilidad en su camino al aprendizaje.
Aquí os dejo el código:
<html>
<head>
<title>Joaquin A.</title>
<style>
body{
background-color: black;
}
#tablero {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: gray;
}
#tablero > div.pieza{
width: 40px;
height: 40px;
margin: 5px;
background-color: black;
cursor: pointer;
float: left;
}
#copy {
color: white;
margin: 10px;
position: fixed;
bottom: 0;
}
</style>
<script>
/*
Juego de Memoria en Javascript: Desarrollado por Joaquin A.
*/
var aciertos = 0;
var errores = 0;
var primero = '';
var segundo = '';
var turno = 1;
var puedoseleccionar = true;
var piezas = new Array();
// Configuración de colores
var colores = new Array ('green', 'blue', 'orange', 'red', 'purple', 'brown', 'yellow', 'white');
function agregarPiezas() {
document.getElementById("tablero").innerHTML = '';
for (var c = 0; c < colores.length; c++) {
// Agregamos un par de cada color
piezas.push(colores[c]);
piezas.push(colores[c]);
}
mostrarPiezas();
}
function mostrarPiezas() {
// Ordenamos las piezas...
piezas.ordenar();
cont = document.getElementById("tablero");
// Las vamos agregando al DOM...
for ( var p = 0; p < piezas.length; p++) {
pcont = document.createElement("div");
pcont.setAttribute("id","pieza-" + p);
pcont.setAttribute("class","pieza");
pcont.setAttribute("onclick","seleccionarPieza(" + p + ")");
cont.appendChild(pcont);
}
}
function seleccionarPieza(p) {
if (puedoseleccionar == true) {
// Mostramos el color de la pieza
var seleccionado = document.getElementById("pieza-" + p);
seleccionado.setAttribute("style","background-color:" + piezas[p]);
// Debug: console.log(piezas[p]);
// Validamos si es la primera o segunda pieza del turno
if (turno == 1) {
primero = p;
turno = 2;
} else if (turno == 2 && primero != p) {
segundo = p;
comprobarPiezas();
}
}
}
function comprobarPiezas() {
// Evitamos que el usuario pueda seleccionar mientras se muestra el color de ambas piezas
puedoseleccionar = false;
var selprimero = document.getElementById("pieza-" + primero);
var selsegundo = document.getElementById("pieza-" + segundo);
// Comprobamos si son iguales
if (piezas[primero] == piezas[segundo]) {
// Removemos los eventos para evitar seleccionarlas nuevamente
selprimero.removeAttribute("onclick");
selsegundo.removeAttribute("onclick");
// Al ser correcto, se le agrega un acierto
aciertos++;
// Mostramos el color y las eliminamos despues de e segundo
setTimeout(function(t) {
selprimero.setAttribute("style","background-color: gray");
selsegundo.setAttribute("style","background-color: gray");
puedoseleccionar = true;
}, 1000);
// Comprobamos si ha ganado
comprobarVictoria();
} else {
errores++;
// Volvemos a la normalidad despues de 1 segundo
setTimeout(function(t) {
selprimero.setAttribute("style","background-color: black");
selsegundo.setAttribute("style","background-color: black");
puedoseleccionar = true;
}, 1000);
}
turno = 1;
}
function comprobarVictoria(){
// Si la cantidad de aciertos corresponde a la cantidad de colores, has ganado.
if (aciertos >= colores.length) {
alert('¡Victoria!, aciertos: ' + aciertos + ', errores: ' + errores);
// Reiniciamos todo para volver a empezar
aciertos = 0;
errores = 0;
primero = '';
segundo = '';
turno = 1;
puedoseleccionar = true;
piezas = new Array();
agregarPiezas();
}
}
Array.prototype.ordenar = function() {
// Procedemos a ordenar de forma aleatoria las piezas
for (var i = this.length-1; i > 0; i--) {
var j = Math.floor(i * Math.random());
var tmp = this[j];
this[j] = this[i];
this[i] = tmp;
}
return this;
}
</script>
</head>
<body onload="agregarPiezas();">
<div id="tablero"></div>
<div id="copy">Desarrollado por Joaquin A.</div>
</body>
</html>
Nota: Se puede hacer muchísimo mejor, pero eso es a gusto de ustedes, esto es solo una demostración.
