Abschlussprojekt

Juego de Memory

  • 32
  • 0
  • 0

Introducción

Modifique el juego de Memory para que tenga más niveles y movimientos. Intente tambien modificar el cronometro pero me di cuenta que iba a tener que modificar muchas cosas asi que lo deje de lado

Juego de Memory 1

Materiales

Para este proyecto utilize visual studio code

Juego de Memory 1

Juego de Memory

Tome el juego completo y modifique el archivo de variables-globales.js para agregar nuevos iconos y modificar el codigo,

Juego de Memory 1

index.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Domestika</title>
<link
href="https://fonts.googleapis.com/css?family=Archivo|Archivo+Narrow:400,600"
rel="stylesheet"
/>
<link href="css/site.css" rel="stylesheet" />
<link href="css/estilos.css" rel="stylesheet" />
</head>

<body>
<div id="bienvenida" class="bienvenida">
<h1>👋 ¡Hola! 👋</h1>
<div class="bienvenida-botones">
<button id="juego-normal">¡Quiero jugar!</button>
<button id="juego-relax">Modo relax</button>
</div>
</div>
<header class="cabecera">
<div class="contadores">
<div class="contador-item">
<h4 class="cabecera-titulo">Movimientos</h4>
<div class="cabecera-num">
<span id="mov">00</span>/<span id="mov-total">20</span>
</div>
</div>
<div id="cronometro" class="contador-item">
<h4 class="cabecera-titulo">Tiempo</h4>
<div class="cabecera-num">
<span id="minutos">00</span>:<span id="segundos">00</span>
</div>
</div>
</div>
<div class="nivel">
<h4 class="cabecera-titulo">Nivel</h4>
<div class="cabecera-num"><span id="nivel">01</span></div>
</div>
<button id="control-nivel" class="control-nivel">…</button>
</header>
<main>
<div id="mesa" class="mesa"></div>
<div id="subeNivel" class="sube-nivel">
<div class="modal">
<h2>¡Muy bien!</h2>
<button id="subir">Siguiente nivel</button>
<button class="reiniciar">Reiniciar</button>
</div>
</div>
<div id="gameOver" class="game-over">
<div class="modal">
<h2>¡Oh no!</h2>
<p>Te has quedado sin movimientos 😭</p>
<button class="reiniciar">Reiniciar</button>
</div>
</div>
<div id="timeOver" class="game-over">
<div class="modal">
<h2>¡Oh no!</h2>
<p>Te has quedado sin tiempo 😭</p>
<button class="reiniciar">Reiniciar</button>
</div>
</div>
<div id="endGame" class="end-game">
<div class="modal">
<h2>¡Enhorabuena!</h2>
<p>Has superado todos los niveles 🏆</p>
<button class="reiniciar">Reiniciar</button>
</div>
</div>
</main>
<div class="selecciona-nivel">
<button id="cierra-niveles" class="cierra-niveles">&times;</button>
<ul></ul>
</div>

<audio
src="sonidos/acierto.mp3"
class="sonido"
id="sonido-acierto"
preload="auto"
></audio>
<audio
src="sonidos/error.mp3"
class="sonido"
id="sonido-error"
preload="auto"
></audio>
<audio
src="sonidos/carta.mp3"
class="sonido"
id="sonido-carta"
preload="auto"
></audio>

<script src="js/variables-globales.js"></script>
<script src="js/descubrir-comparar.js"></script>
<script src="js/baraja-reparte.js"></script>
<script src="js/acierto-error.js"></script>
<script src="js/contador.js"></script>
<script src="js/cronometro.js"></script>
<script src="js/finalizar.js"></script>
<script src="js/cambia-nivel.js"></script>
<script src="js/game-over.js"></script>
<script src="js/menu-niveles.js"></script>
<script src="js/iniciar.js"></script>
<script src="js/comienza-juego.js"></script>
</body>
</html>

Juego de Memory 1

estilos.css

body {
font-size: 2rem;
display: flex;
flex-direction: column;
position: relative;
}

.bienvenida {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
z-index: 1;
}

.bienvenida.visible{
display: flex;
}

.bienvenida h1 {
font-family: var(--font-display);
text-transform: uppercase;
font-size: 5rem;
margin-top: 0;
}

.bienvenida-botones {
display: flex;
}

.bienvenida button {
padding: 1rem 3rem;
margin: 0 1rem;
min-width: 20rem;
}

.cabecera {
padding: 0.5rem 2rem;
background: white;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: baseline;
}

.cabecera-titulo {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
line-height: 1;
margin: 0;
color: rgba(0, 0, 0, 0.4);
}

.cabecera-num {
font-family: var(--font-display);
color: var(--hotpink);
font-weight: 400;
font-size: 3.5rem;
line-height: 0.9;
}

.contadores {
display: flex;
}

.contador-item {
margin-right: 2rem;
}

main {
flex-grow: 1;
display: flex;
justify-content: center;
position: relative;
}

.mesa {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
max-width: 56rem;
margin: auto;
}

.tarjeta {
width: 6rem;
height: 6rem;
margin: 0.5rem;
border-radius: 0.3em;
background-image: var(--gradient);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25), 4px 4px 10px rgba(0, 0, 0, 0.2);
position: relative;
transition: 0.3s;
cursor: pointer;
backface-visibility: hidden;
transform-style: preserve-3d;
}

.tarjeta__contenido {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: rotateY(-180deg);
backface-visibility: hidden;
background-color: white;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25), 4px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 0.3em;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
padding-top: 0.4rem;
}

.tarjeta__contenido::selection {
background: transparent;
}

.tarjeta.descubierta {
transform: rotateY(-180deg);
}

@keyframes error {
10%,
90% {
transform: rotateY(-180deg) translateX(-1px);
}
20%,
80% {
transform: rotateY(-180deg) translateX(2px);
}
30%,
50%,
70% {
transform: rotateY(-180deg) translateX(-4px);
}
40%,
60% {
transform: rotateY(-180deg) translateX(4px);
}
}

@keyframes acierto {
from {
transform: rotateY(-180deg) scale3d(1, 1, 1);
opacity: 1;
}

25% {
transform: rotateY(-180deg) scale3d(1.1, 1.1, 1.1);
opacity: 1;
}

to {
transform: rotateY(-180deg) scale3d(1, 1, 1);
opacity: 0;
}
}

.acertada {
pointer-events: none;
}

.acertada .tarjeta__contenido {
animation: acierto 1.3s ease-in-out forwards;
}

.error {
animation: error 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.sube-nivel,
.game-over,
.end-game {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: var(--gradient);
}

.sube-nivel.visible,
.game-over.visible,
.end-game.visible{
display: flex;
}

.modal {
background: white;
padding: 3rem 3rem 1rem;
margin: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 10px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25), 4px 4px 10px rgba(0, 0, 0, 0.2);
}

.modal h2 {
color: var(--orange);
font-family: var(--font-display);
margin: 0;
}

.modal p {
font-size: 1.5rem;
}

.modal button {
margin: 3rem 0;
}

button {
cursor: pointer;
border: 0;
background-image: var(--gradient);
padding: 0.75rem 4rem;
border-radius: 5rem;
color: white;
font-family: var(--font-display);
font-weight: 600;
text-transform: uppercase;
font-size: 1.5rem;
line-height: 1;
transition: 0.3s;
}

button:hover,
button:focus {
opacity: 0.9;
outline: 0;
}

.modal .reiniciar {
color: var(--hotpink);
background: transparent;
border: 0;
text-transform: capitalize;
font-family: var(--font);
font-size: 1rem;
margin: 0;
}

.sonido{
display: none;
}

.cronometro-oculto{
display: none;
}

.control-nivel{
position: absolute;
font-size: .8rem;
top: 2.9rem;
right: .5rem;
padding: 0;
width: 1.1rem;
height: 1.1rem;
line-height: .68rem;
display: flex;
justify-content: center;
background: var(--hotpink);
}

.control-oculto{
display: none;
}

.selecciona-nivel{
background-color: var(--hotpink);
position: fixed;
width: 250px;
right: 0;
top: 0;
bottom: 0;
transform: translateX(250px);
transition: transform .3s;
padding: 1rem 2rem;
}

.selecciona-nivel.visible{
transform: translateX(0);
}

.selecciona-nivel button{
background: transparent;
padding: 0;
}

.selecciona-nivel ul{
list-style: none;
padding-left: 0;
}

.selecciona-nivel li{
margin-bottom: 1rem;
text-align: center;
}

.cierra-niveles{
position: absolute;
top: 0.5rem;
right: 1rem;
font-size: 2rem;
font-family: sans-serif;
font-weight: 300;
}

Juego de Memory 1

site.css

:root {
--bg: #fafafa;
--font: "Archivo", sans-serif;
--font-display: "Archivo Narrow", sans-serif;
--hotpink: #e94057;
--orange: #f27121;
--gradient: linear-gradient(35deg, var(--orange), var(--hotpink));
}

*{
box-sizing: border-box;
}

body {
margin: auto;
min-height: 100vh;
background: var(--bg);
font-family: var(--font);
}

Juego de Memory 1

acierto-error.js

function acierto(lasTarjetas) {
lasTarjetas.forEach(function(elemento) {
elemento.classList.add("acertada");
});
document.querySelector("#sonido-acierto").play();
}

function error(lasTarjetas) {
lasTarjetas.forEach(function(elemento) {
elemento.classList.add("error");
});

document.querySelector("#sonido-error").play();

setTimeout(function() {
lasTarjetas.forEach(function(elemento) {
elemento.classList.remove("descubierta");
elemento.classList.remove("error");
});
}, 1000);
}

Juego de Memory 1

baraja-reparte.js

function barajaTarjetas(lasTarjetas) {
var resultado;
var totalTarjetas = lasTarjetas.concat(lasTarjetas);
resultado = totalTarjetas.sort(function() {
return 0.5 - Math.random();
});
return resultado;
}

function reparteTarjetas(lasTarjetas) {
var mesa = document.querySelector("#mesa");
var tarjetasBarajadas = barajaTarjetas(lasTarjetas);
mesa.innerHTML = "";

tarjetasBarajadas.forEach(function(elemento) {
var tarjeta = document.createElement("div");

tarjeta.innerHTML =
"<div class='tarjeta' data-valor= " +
elemento +
">" +
"<div class='tarjeta__contenido'>" +
elemento +
"</div>" +
"</div>";

mesa.appendChild(tarjeta);
});
}

Juego de Memory 1

cambia-nivel.js

function subeNivel() {
nivelActual++;
}

function actualizaNivel() {
var nivelTexto = nivelActual + 1;
if (nivelTexto < 10) {
nivelTexto = "0" + nivelTexto;
}
document.querySelector("#nivel").innerText = nivelTexto;
}

function cargaNuevoNivel() {
subeNivel();
actualizaNivel();
iniciar();
}

Juego de Memory 1

comienza-juego.js

// Escribimos los niveles dinámicamente
escribeNiveles();

// Asignamos eventos iniciales
document.querySelectorAll(".reiniciar").forEach(function(elemento) {
elemento.addEventListener("click", reiniciar);
});

document
.querySelector("#juego-normal")
.addEventListener("click", iniciaJuegoNormal);
document
.querySelector("#juego-relax")
.addEventListener("click", iniciaJuegoRelax);

document
.querySelector("#control-nivel")
.addEventListener("click", muestraMenuNiveles);
document
.querySelector("#cierra-niveles")
.addEventListener("click", ocultaMenuNiveles);

document.querySelectorAll(".nivel").forEach(function(elemento) {
elemento.addEventListener("click", cambiaNivel);
});

document.querySelector("#subir").addEventListener("click", cargaNuevoNivel);

document.querySelector("body").addEventListener("click", clickFueraDeMenu);

document.addEventListener("keydown", teclaEscCierraMenu);

//Mostramos pantalla de bienvenida
document.querySelector("#bienvenida").classList.add("visible");

Juego de Memory 1

contador.js

function actualizaContador() {
var movimientosTexto;
movimientos++;
movimientosTexto = movimientos;

if (movimientos > niveles[nivelActual].movimientosMax && !modoRelax) {
gameOver();
return;
}

if (movimientos < 10) {
movimientosTexto = "0" + movimientos;
}
document.querySelector("#mov").innerText = movimientosTexto;
}

function maxContador() {
var movimientosMaxTexto = niveles[nivelActual].movimientosMax;
if (movimientosMaxTexto < 10) {
movimientosMaxTexto = "0" + movimientosMaxTexto;
}
document.querySelector("#mov-total").innerText = movimientosMaxTexto;
}

Juego de Memory 1

cronometro.js

function iniciaCronometro() {
var segundos = 10;
var minutos = 0;
var segundosTexto;
var minutosTexto;

function actualizaContador() {
segundos--;
if (segundos < 0) {
segundos = 59;
minutos--;
}
if (minutos < 0) {
segundos = 0;
minutos = 0;
clearInterval(cronometro);
timeOver();
}
segundosTexto = segundos;
minutosTexto = minutos;
if (segundos < 10) {
segundosTexto = "0" + segundos;
}
if (minutos < 10) {
minutosTexto = "0" + minutos;
}
document.querySelector("#minutos").innerText = minutosTexto;
document.querySelector("#segundos").innerText = segundosTexto;
}
cronometro = setInterval(actualizaContador, 1000);
}

Juego de Memory 1

descubrir-comparar.js

function descubrir() {
var descubiertas;
var tarjetasPendientes;
var totalDescubiertas = document.querySelectorAll(
".descubierta:not(.acertada)"
);

if (totalDescubiertas.length > 1) {
return;
}

this.classList.add("descubierta");
document
.querySelector("#sonido-carta")
.cloneNode()
.play();

descubiertas = document.querySelectorAll(".descubierta:not(.acertada)");
if (descubiertas.length < 2) {
return;
}

comparar(descubiertas);
actualizaContador();
tarjetasPendientes = document.querySelectorAll(".tarjeta:not(.acertada)");
if (tarjetasPendientes.length === 0) {
setTimeout(finalizar, 1000);
}
}

function comparar(tarjetasAComparar) {
if (
tarjetasAComparar[0].dataset.valor === tarjetasAComparar[1].dataset.valor
) {
acierto(tarjetasAComparar);
} else {
error(tarjetasAComparar);
}
}

Juego de Memory 1

finalizar.js

function finalizar() {
clearInterval(cronometro);
if (nivelActual < niveles.length - 1) {
document.querySelector("#subeNivel").classList.add("visible");
} else {
document.querySelector("#endGame").classList.add("visible");
}
}

Juego de Memory 1

game-over.js

function gameOver() {
clearInterval(cronometro);
document.querySelector("#gameOver").classList.add("visible");
}

function timeOver() {
document.querySelector("#timeOver").classList.add("visible");
}

Juego de Memory 1

iniciar.js

function iniciar() {
movimientos = 0;
reparteTarjetas(niveles[nivelActual].tarjetas);
document.querySelector("#mov").innerText = "00";
maxContador();
document.querySelector(".selecciona-nivel").classList.remove("visible");
document.querySelector("#endGame").classList.remove("visible");
document.querySelector("#timeOver").classList.remove("visible");
document.querySelector("#gameOver").classList.remove("visible");
document.querySelector("#subeNivel").classList.remove("visible");

document.querySelectorAll(".tarjeta").forEach(function(elemento) {
elemento.addEventListener("click", descubrir);
});

if (!modoRelax) {
iniciaCronometro();
} else {
document.querySelector("#cronometro").classList.add("cronometro-oculto");
}
}

function reiniciar() {
nivelActual = 0;
actualizaNivel();
iniciar();
}

function iniciaJuegoNormal() {
modoRelax = false;
document.querySelector("#bienvenida").classList.remove("visible");
iniciar();
document.querySelector(".control-nivel").classList.add("control-oculto");
}

function iniciaJuegoRelax() {
modoRelax = true;
document.querySelector("#bienvenida").classList.remove("visible");
iniciar();
}

Juego de Memory 1

menu-niveles.js

function escribeNiveles() {
var menuNiveles = document.querySelector(".selecciona-nivel ul");
niveles.forEach(function(elemento, indice) {
var controlNivel = document.createElement("li");
controlNivel.innerHTML =
"<button class='nivel' data-nivel=" +
indice +
">Nivel " +
(indice + 1) +
"</button>";
menuNiveles.appendChild(controlNivel);
});
}

function cambiaNivel() {
var nivel = parseInt(this.dataset.nivel);
nivelActual = nivel;
actualizaNivel();
iniciar();
}

function muestraMenuNiveles(evento) {
evento.stopPropagation();
document.querySelector(".selecciona-nivel").classList.toggle("visible");
}

function ocultaMenuNiveles() {
document.querySelector(".selecciona-nivel").classList.remove("visible");
}

function clickFueraDeMenu(evento) {
if (evento.target.closest(".selecciona-nivel")) {
return;
}
document.querySelector(".selecciona-nivel").classList.remove("visible");
}

function teclaEscCierraMenu(evento) {
console.log(evento.key);
if (evento.key === "Escape") {
ocultaMenuNiveles();
}
}

Juego de Memory 1

variables-globales.js

var modoRelax = false;
var movimientos = 0;
var cronometro;
var grupoTarjetas = [
["🐵","🐶"],
["🐺","🐱"],
["🦁","🐯","🦒","🦊"],
["🦝","🐮","🐷","🐗"],
["🐭","🐹","🐰","🐻","🐨","🐼"],
["🐸","🦓","🐴","🦄","🐔","🐲"],
];
var nivelActual = 0;
var niveles = [
{
tarjetas: grupoTarjetas[0],
movimientosMax: 3
},
{
tarjetas: grupoTarjetas[0].concat(grupoTarjetas[1]),
movimientosMax: 8
},
{
tarjetas: grupoTarjetas[0].concat(grupoTarjetas[1], grupoTarjetas[2]),
movimientosMax: 12
},
{
tarjetas: grupoTarjetas[0].concat(
grupoTarjetas[1],
grupoTarjetas[2],
grupoTarjetas[3]
),
movimientosMax: 25
},
{
tarjetas: grupoTarjetas[0].concat(
grupoTarjetas[1],
grupoTarjetas[2],
grupoTarjetas[3],
grupoTarjetas[4]
),
movimientosMax: 50
},
{
tarjetas: grupoTarjetas[0].concat(
grupoTarjetas[1],
grupoTarjetas[2],
grupoTarjetas[3],
grupoTarjetas[4],
grupoTarjetas[5]
),
movimientosMax: 75
},
{
tarjetas: grupoTarjetas[0].concat(
grupoTarjetas[1],
grupoTarjetas[2],
grupoTarjetas[3],
grupoTarjetas[4],
grupoTarjetas[5],
grupoTarjetas[6]
),
movimientosMax: 100
}
];

Juego de Memory 1
Gefällt mir
Pinterest
In Favoriten speichern

Weitere Projekte von sjc22031977

+0 Kommentare

Melden Sie sich an oder melden Sie sich kostenlos an, um zu kommentieren

Einloggen Kostenlos beitreten