git initial

domini-code · Sep 30, 2024 · 1304b70 · 1304b70
commit 1304b70
Show file tree

Hide file tree

Showing 6 changed files with 362 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,129 @@
+:root {
+  --primary-color: #4caf50;
+  --primary-hover: #45a049;
+  --primary-active: #3e8e41;
+  --background-color: #f0f0f0;
+  --card-background: #ddd;
+  --card-flipped: #fff;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: var(--background-color);
+}
+
+.container {
+  text-align: center;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 1.25rem;
+}
+
+h1.title {
+  margin-bottom: 1.25rem;
+}
+
+.game-info {
+  display: flex;
+  margin-bottom: 1.25rem;
+  gap: 0.8rem;
+}
+
+.game-info span {
+  /* display: grid;
+  grid-template-columns: repeat(4, 1fr); */
+  flex: 1;
+  text-align: center;
+}
+
+.start-stop-btn {
+  background-color: var(--primary-color);
+  border: none;
+  color: white;
+  padding: 1rem 2rem;
+  text-align: center;
+  text-decoration: none;
+  display: inline-flex;
+  font-size: 1rem;
+  margin: 1rem 0.0625rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  transition: background-color 0.3s ease;
+}
+
+.start-stop-btn:hover {
+  background-color: var(--primary-hover);
+}
+
+.start-stop-btn:active {
+  background-color: var(--primary-active);
+}
+
+.game-board {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.625rem;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+.card {
+  aspect-ratio: 3/4;
+  background-color: var(--card-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* font-size: 0; */
+  cursor: pointer;
+  transition: transform 0.3s, background-color 0.3s;
+  border-radius: 0.3rem;
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+  background-color: var(--card-flipped);
+  font-size: 2rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.game-board.fade-out {
+  animation: fadeOut 0.5s ease-in-out;
+}
+
+@media (max-width: 37.5rem) {
+  .game-board {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
diff --git a/ejercicios/prueba.css b/ejercicios/prueba.css
@@ -0,0 +1,29 @@
+* {
+  box-sizing: border-box;
+}
+
+p {
+  color: rgb(255, 123, 0);
+  font-size: 20px;
+  text-decoration: none;
+}
+
+.container {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 100vh;
+  border: 2px solid black;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  background-color: brown;
+  margin: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: 20px;
+  font-weight: bold;
+}
diff --git a/ejercicios/prueba.html b/ejercicios/prueba.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="prueba.css">
+  <title>Clase de CSS </title>
+</head>
+
+<body>
+
+  <div id="container" class="container">
+    <p class="title">Esto es un párrafo</p>
+    <p class="title">Esto es otro párrafo</p>
+    <!-- <div class="box">Box 1</div>
+    <div class="box">Box 2</div>
+    <div class="box">Box 3</div> -->
+    <button id="changeTitle">Cambiar</button>
+  </div>
+  <script src="prueba.js"></script>
+</body>
+
+</html>
diff --git a/ejercicios/prueba.js b/ejercicios/prueba.js
@@ -0,0 +1,27 @@
+const content = document.getElementById('container');
+console.log(content)
+
+const firstParagraph = document.querySelector('.title');
+console.log(firstParagraph.textContent)
+
+const allParagraphs = document.querySelectorAll('.title')
+console.log(allParagraphs)
+
+
+const button = document.getElementById('changeTitle');
+
+
+button.addEventListener('click', () => {
+  firstParagraph.textContent = 'Holaaaaaaa';
+  firstParagraph.style.color = 'red';
+  firstParagraph.style.fontSize = '25px';
+})
+
+
+firstParagraph.addEventListener('mouseover', () => {
+  firstParagraph.style.backgroundColor = 'red';
+})
+
+firstParagraph.addEventListener('mouseout', () => {
+  firstParagraph.style.backgroundColor = 'white';
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MemoriZar - El Juego de Memoria</title>
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+
+<body>
+  <div class="container">
+    <h1 class="title">MemoriZar</h1>
+    <div id="game-info" class="game-info hidden">
+      <span id="moves" class="moves">Movimientos: 0</span>
+      <span id="timer" class="timer">Tiempo: 0s</span>
+      <span id="score" class="score">Puntuación: 0</span>
+    </div>
+    <button id="start-stop-btn" class="start-stop-btn"> Iniciar Juego</button>
+    <div id="game-board" class="game-board "></div>
+  </div>
+  <script src="js/app.js"></script>
+</body>
+
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,128 @@
+const EMOJIS = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'];
+const CARDS = [...EMOJIS, ...EMOJIS];
+
+const gameBoard = document.getElementById('game-board');
+const movesElement = document.getElementById('moves');
+const timerElement = document.getElementById('timer');
+const scoreElement = document.getElementById('score');
+const startStopBtn = document.getElementById('start-stop-btn');
+const gameInfoElement = document.getElementById('game-info');
+
+
+let gameState = {
+  flippedCards: [],
+  moves: 0,
+  score: 0,
+  timer: 0,
+  intervalId: null,
+  isGameRunning: false,
+};
+
+const shuffleArray = (array) => {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+};
+
+
+const createCard = (emoji) => {
+  const card = document.createElement('div');
+  card.classList.add('card');
+  card.dataset.emoji = emoji;
+  card.addEventListener('click', () => flipCard(card));
+  return card;
+}
+
+flipCard = (card) => {
+  if (!gameState.isGameRunning || gameState.flippedCards.length >= 2 || card.classList.contains('flipped')) return;
+
+  card.classList.add('flipped');
+  card.textContent = card.dataset.emoji;
+  gameState.flippedCards.push(card);
+
+  if (gameState.flippedCards.length === 2) {
+    gameState.move++;
+    updateMovesDisplay();
+    setTimeout(checkMatch, 500);
+  }
+}
+
+
+const checkMatch = () => {
+  const [card1, card2] = gameState.flippedCards;
+
+  if (card1.dataset.emoji === card2.dataset.emoji) {
+    // gameState.score = gameState.score + 10;
+    gameState.score += 10;
+    updateMovesDisplay();
+    if (document.querySelectorAll('.flipped').length === CARDS.length) {
+      endGame();
+    }
+  } else {
+    [card1, card2].forEach((card) => {
+      card.classList.remove('flipped');
+      card.textContent = '';
+    })
+  }
+  gameState.flippedCards = [];
+}
+
+
+const updateMovesDisplay = () => movesElement.textContent = `Movimientos: ${gameState.moves}`;
+const updateScoreDisplay = () => scoreElement.textContent = `Puntuación: ${gameState.score}`;
+const updateTimerDisplay = () => timerElement.textContent = `Tiempo: ${gameState.timer}`;
+
+
+const startTimer = () => {
+  gameState.intervalId = setInterval(() => {
+    gameState.timer++;
+    updateTimerDisplay();
+  }, 1000);
+}
+
+
+const startGame = () => {
+  gameState = { ...gameState, flippedCards: [], moves: 0, timer: 0, isGameRunning: true };
+  shuffleArray(CARDS);
+  gameBoard.innerHTML = '';
+  CARDS.forEach((emoji) => gameBoard.appendChild(createCard(emoji)));
+  updateMovesDisplay();
+  updateScoreDisplay();
+  updateTimerDisplay();
+  startTimer();
+
+  startStopBtn.textContent = 'Detener juego';
+  gameInfoElement.classList.remove('hidden');
+
+  gameBoard.classList.remove('hidden', 'fade-out');
+}
+
+const stopGame = () => {
+  gameState.isGameRunning = false;
+  clearInterval(gameState.intervalId);
+  startStopBtn.textContent = 'Iniciar Juego';
+
+  gameInfoElement.classList.add('hidden');
+  gameBoard.classList.add('fade-out');
+  setTimeout(() => gameBoard.classList.add('hidden', 500));
+}
+
+const endGame = () => {
+  clearInterval(gameState.intervalId);
+  const finalScore = gameState.score + Math.max(0, 1000 - gameState.timer * 10 - gameState.moves * 5);
+  alert(`!Juego terminado!  Puntuación final:${finalScore}`);
+  stopGame();
+}
+
+
+const startStopGame = () => gameState.isGameRunning ? stopGame() : startGame();
+
+
+startStopBtn.addEventListener('click', startStopGame);
+
+
+document.getElementById('start-stop-btn').addEventListener('click', () => {
+  gameInfoElement.classList.remove('hidden');
+  startGame();
+})