Merge branch 'master' of https://git.fermdez.net/fermdez/Juegos

Mejora en hoja de estilos
Corrección de ruta de juego.
2025-08-22 12:30:04 +02:00 · 2025-08-22 12:24:04 +02:00 · 2025-08-22 01:41:14 +02:00 · 2025-08-22 00:47:48 +02:00 · 2025-08-22 00:47:25 +02:00 · 2025-08-22 00:43:19 +02:00
9 changed files with 328 additions and 46 deletions
--- a/README.md
+++ b/README.md
@@ -1,3 +1,30 @@
-# Juegos
+# `Juegos` 🎲

-Repositorio con mini-juegos online usando HTML, CSS y JS.
+> Colección de juegos ligeros, educativos y de entretenimiento listos para jugar en tu navegador.  
+> Cada juego se encuentra en su propio directorio con su propio código.
+
+## 🕹️ Índice de Juegos
+
+| Juego                            | Descripción                                             | Enlace                                        |
+|-----------------------------------|---------------------------------------------------------|-----------------------------------------------|
+| [3-en-raya](3-en-raya/)           | Tres en línea clásico para dos jugadores.                | [Jugar](https://games.fermdez.net/3-en-raya/index.html)                 |
+| [3-en-raya-computer](3-en-raya-computer/) | Tres en línea contra la máquina (IA).                | [Jugar](https://games.fermdez.net/3-en-raya-computer/index.html)        |
+| [4-en-raya](4-en-raya/)           | Conecta 4 fichas en línea antes que tu adversario (o IA).| [Jugar](https://games.fermdez.net/4-en-raya/index.html)                 |
+| [adivina](adivina/)               | Adivina el número secreto en pocos intentos.             | [Jugar](https://games.fermdez.net/adivina/index.html)                   |
+| [banderas](banderas/)             | Empareja banderas y países del mundo.                    | [Jugar](https://games.fermdez.net/banderas/index.html)                  |
+| [buscaminas](buscaminas/)         | Evita las minas y revela el tablero.                     | [Jugar](https://games.fermdez.net/buscaminas/index.html)                |
+| [ladrillos](ladrillos/)           | Rompe los ladrillos controlando la paleta y la bola.     | [Jugar](https://games.fermdez.net/ladrillos/index.html)                 |
+| [memoria](memoria/)               | Encuentra todas las parejas en el clásico juego de memoria.| [Jugar](https://games.fermdez.net/memoria/index.html)                 |
+| [memoria-v2](memoria-v2/)         | Versión alternativa del juego de memoria, más visual.    | [Jugar](https://games.fermdez.net/memoria-v2/index.html)                |
+| [piedra-papel-tijera](piedra-papel-tijera/) | Juega al clásico piedra, papel o tijera contra la máquina.| [Jugar](https://games.fermdez.net/piedra-papel-tijera/index.html)  |
+| [pong](pong/)                     | El Pong clásico, desafía a la IA usando las flechas.     | [Jugar](https://games.fermdez.net/pong/index.html)                      |
+| [puzle-numeros](puzle-numeros/)   | Ordena los números deslizando las piezas.                | [Jugar](https://games.fermdez.net/puzle-numeros/index.html)             |
+| [reflejos](reflejos/)             | Prueba tu tiempo de reacción, haz clic lo más rápido posible.| [Jugar](https://games.fermdez.net/reflejos/index.html)            |
+| [serpiente](serpiente/)           | Come puntos para crecer y evita chocar contigo mismo.    | [Jugar](https://games.fermdez.net/serpiente/index.html)                 |
+| [simon-dice](simon-dice/)         | Recuerda y repite la secuencia de colores (Simon Dice).  | [Jugar](https://games.fermdez.net/simon-dice/index.html)                |
+| [topo](topo/)                     | Haz clic en el topo cuando aparezca y suma puntos.       | [Jugar](https://games.fermdez.net/topo/index.html)                      |
+
+## 📝 Licencia 
+Este proyecto está bajo la licencia `GNU General Public License`.  
+> [!NOTE]
+> Consulte el archivo [LICENCIA](LICENSE) para ver el texto completo de la licencia.
--- a/banderas/index.html
+++ b/banderas/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <title>Empareja la Bandera</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>Empareja la Bandera</h1>
+  <p>Haz clic en una bandera y después en el país correspondiente. ¿Puedes emparejar todas?</p>
+  <div id="score">Aciertos: <span id="score-value"></span> / <span id="score-total"></span></div>
+  <div id="game">
+    <div class="flags" id="flags"></div>
+    <div class="countries" id="countries"></div>
+  </div>
+  <button id="restart-btn">Reiniciar</button>
+  <div id="status"></div>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/banderas/script.js
+++ b/banderas/script.js
@@ -0,0 +1,141 @@
+// Lista completa con país y siglas según ISO 3166-1 alpha-2
+const countryList = [
+  { name: "España", code: "ES" }, { name: "Francia", code: "FR" }, { name: "Alemania", code: "DE" }, { name: "Italia", code: "IT" },
+  { name: "Portugal", code: "PT" }, { name: "Reino Unido", code: "GB" }, { name: "Estados Unidos", code: "US" }, { name: "Canadá", code: "CA" },
+  { name: "México", code: "MX" }, { name: "Brasil", code: "BR" }, { name: "Argentina", code: "AR" }, { name: "Chile", code: "CL" },
+  { name: "Japón", code: "JP" }, { name: "China", code: "CN" }, { name: "Australia", code: "AU" }, { name: "Rusia", code: "RU" },
+  { name: "Sudáfrica", code: "ZA" }, { name: "Nueva Zelanda", code: "NZ" }, { name: "India", code: "IN" }, { name: "Egipto", code: "EG" },
+  { name: "Grecia", code: "GR" }, { name: "Turquía", code: "TR" }, { name: "Ucrania", code: "UA" }, { name: "Suecia", code: "SE" },
+  { name: "Noruega", code: "NO" }, { name: "Dinamarca", code: "DK" }, { name: "Finlandia", code: "FI" }, { name: "Irlanda", code: "IE" },
+  { name: "Bélgica", code: "BE" }, { name: "Polonia", code: "PL" }, { name: "Suiza", code: "CH" }, { name: "Países Bajos", code: "NL" }
+];
+
+function getFlagEmoji(code) {
+  // Las banderas se generan a partir de letras usando unicode, no por siglas textuales
+  // Solo funcionan para países con código alpha-2 y script latino
+  if (!code || code.length !== 2) return "";
+  return String.fromCodePoint(
+    ...code.toUpperCase().split("").map(c => 0x1F1E6 + c.charCodeAt(0) - 65)
+  );
+}
+
+// Para elegir N países aleatorios distintos con bandera
+function pickRandomCountries(list, n) {
+  const chosen = [];
+  const used = {};
+  while (chosen.length < n && list.length > 0) {
+    let idx = Math.floor(Math.random() * list.length);
+    let c = list[idx];
+    let flag = getFlagEmoji(c.code);
+    if (flag && !used[c.code]) {
+      chosen.push({name: c.name, code: c.code, flag});
+      used[c.code] = true;
+    }
+    list.splice(idx,1);
+  }
+  return chosen;
+}
+
+let flagsDiv = document.getElementById('flags');
+let countriesDiv = document.getElementById('countries');
+let statusDiv = document.getElementById('status');
+let scoreSpan = document.getElementById('score-value');
+let scoreTotal = document.getElementById('score-total');
+let restartBtn = document.getElementById('restart-btn');
+
+let pairs = [], flags = [], countries = [], selectedFlag = null, selectedCountry = null, score = 0, totalPairs = 12;
+
+function shuffle(arr) {
+  for (let i = arr.length-1; i>0; i--) {
+    const j = Math.floor(Math.random() * (i+1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+}
+
+function startGame() {
+  let fullList = countryList.slice(); // copia
+  pairs = pickRandomCountries(fullList, totalPairs);
+  flags = pairs.map(o=>o);
+  countries = pairs.map(o=>o);
+  shuffle(flags); shuffle(countries);
+  score = 0;
+  scoreSpan.textContent = score;
+  scoreTotal.textContent = pairs.length;
+  selectedFlag = selectedCountry = null;
+  renderFlags();
+  renderCountries();
+  statusDiv.textContent = 'Empareja todas las banderas con su país';
+}
+
+function renderFlags() {
+  flagsDiv.innerHTML = '';
+  flags.forEach((p, i) => {
+    const d = document.createElement('div');
+    d.className = 'flag';
+    d.textContent = p.flag;
+    d.setAttribute('tabindex', 0);
+    d.onclick = () => selectFlag(i);
+    if (p.matched) d.classList.add('matched');
+    if (selectedFlag === i) d.classList.add('selected');
+    flagsDiv.appendChild(d);
+  });
+}
+
+function renderCountries() {
+  countriesDiv.innerHTML = '';
+  countries.forEach((p, i) => {
+    const d = document.createElement('div');
+    d.className = 'country';
+    d.textContent = p.name;
+    d.setAttribute('tabindex', 0);
+    d.onclick = () => selectCountry(i);
+    if (p.matched) d.classList.add('matched');
+    if (selectedCountry === i) d.classList.add('selected');
+    countriesDiv.appendChild(d);
+  });
+}
+
+function selectFlag(i) {
+  if (flags[i].matched) return;
+  selectedFlag = i;
+  renderFlags();
+  if (selectedCountry !== null) checkMatch();
+}
+
+function selectCountry(i) {
+  if (countries[i].matched) return;
+  selectedCountry = i;
+  renderCountries();
+  if (selectedFlag !== null) checkMatch();
+}
+
+function checkMatch() {
+  const flagObj = flags[selectedFlag];
+  const countryObj = countries[selectedCountry];
+  if (flagObj.code === countryObj.code) {
+    flags[selectedFlag].matched = true;
+    countries[selectedCountry].matched = true;
+    score++;
+    scoreSpan.textContent = score;
+    statusDiv.textContent = '¡Correcto!';
+    renderFlags();
+    renderCountries();
+    if (score === pairs.length) {
+      statusDiv.textContent = '¡Has emparejado todas las banderas! 🎉';
+    }
+  } else {
+    statusDiv.textContent = 'No es correcto, intenta otra vez.';
+    setTimeout(() => {
+      statusDiv.textContent = '';
+      selectedFlag = selectedCountry = null;
+      renderFlags();
+      renderCountries();
+    }, 850);
+    return;
+  }
+  selectedFlag = null;
+  selectedCountry = null;
+}
+
+restartBtn.onclick = startGame;
+startGame();
--- a/banderas/styles.css
+++ b/banderas/styles.css
@@ -0,0 +1,76 @@
+body {
+  background: #eaf4f4;
+  font-family: Arial, sans-serif;
+  text-align: center;
+  color: #22223b;
+}
+h1 {
+  margin-top: 32px;
+  color: #23698f;
+}
+#score {
+  font-size: 1.18em;
+  margin-bottom: 10px;
+  color: #23698f;
+}
+#game {
+  display: flex;
+  justify-content: center;
+  gap: 45px;
+  margin: 30px auto 30px auto;
+}
+.flags, .countries {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+}
+.flag, .country {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 1px 6px #bbb;
+  padding: 8px 12px;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: background .21s, box-shadow .18s;
+  border: 2px solid #f4f9fa;
+  outline: none;
+}
+.flag.selected, .country.selected {
+  background: #82cfff;
+  border-color: #23698f;
+  box-shadow: 0 0 0 2px #23698f;
+}
+.flag.matched, .country.matched {
+  background: #b4f7ab;
+  color: #333;
+  border-color: #3fb950;
+  cursor: default;
+  box-shadow: 0 0 0 2px #3fb950;
+}
+#restart-btn {
+  background: #23698f;
+  color: #fff;
+  font-size: 1em;
+  border: none;
+  border-radius: 7px;
+  padding: 8px 30px;
+  cursor: pointer;
+  margin-bottom: 12px;
+  transition: background .18s;
+}
+#restart-btn:hover {
+  background: #031c34;
+}
+#status {
+  font-size: 1.12em;
+  min-height: 2em;
+  color: #23698f;
+  margin-bottom: 10px;
+}
+@media (max-width: 850px) {
+  #game { flex-direction: column; gap: 32px;}
+  .flags, .countries { grid-template-columns: repeat(2,1fr);}
+}
+@media (max-width: 520px) {
+  .flags, .countries { grid-template-columns: 1fr;}
+}
--- a/index.html
+++ b/index.html
@@ -2,9 +2,19 @@
 <html lang="es">
 <head>
  <meta charset="UTF-8">
+  <meta name='author' content='Fernando Méndez' />
+  <meta name='description' content='Página web de juegos online de Fernando Méndez.'>
  <title>FerMdez - Games</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700,400&display=swap" rel="stylesheet">
+  <link rel='icon' href='./media/favicon.ico' sizes='192x192' />
+  <meta name='keywords' content='fermdez, juegos, games, mini-juegos, fermdez juegos, fermdez games'/>
+  <meta property='og:type' content='website' />
+  <meta property='og:site_name' content='FerMdez' />
+  <meta property='og:title' content='Fernando Méndez' />
+  <meta property='og:description' content='Página web de juegos online de Fernando Méndez.' />
+  <meta property='og:image' content='https://games.fermdez.net/media/favicon.ico' />
+  <meta property='og:url' content='https://games.fermdez.net/' />
  <style>
    body {
      background: linear-gradient(120deg, #9cebfc 0%, #e9defa 100%);
@@ -235,7 +245,7 @@
        <div class="game-icon">🐍</div>
        <div class="game-title">Snake Game</div>
        <div class="game-desc">Haz crecer la serpiente comiendo puntos, ¡no choques con la pared!</div>
-        <a class="play-btn" href="snake/index.html" target="_blank">Jugar
+        <a class="play-btn" href="serpiente/" target="_blank">Jugar
          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
@@ -263,6 +273,14 @@
          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
+      <div class="game-card">
+        <div class="game-icon">🇪🇸</div>
+        <div class="game-title">Banderas</div>
+        <div class="game-desc">Empereja la bandera con su país correspondiente.</div>
+        <a class="play-btn" href="banderas/" target="_blank">Jugar
+          <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+        </a>
+      </div>
    </div>
  </main>
 </body>
--- a/media/favicon.ico
+++ b/media/favicon.ico
--- a/piedra-papel-tijera/script.js
+++ b/piedra-papel-tijera/script.js
@@ -18,7 +18,7 @@ function playRound(userChoice) {
  const computerChoice = computerPlay();

  let resultMsg = `Tu elección: ${emoji(userChoice)} ${capitalize(userChoice)}<br>
-                   Computadora: ${emoji(computerChoice)} ${capitalize(computerChoice)}<br>`;
+                   Máquina: ${emoji(computerChoice)} ${capitalize(computerChoice)}<br>`;

  if (userChoice === computerChoice) {
    resultMsg += "<strong>¡Empate!</strong>";
@@ -33,7 +33,7 @@ function playRound(userChoice) {
  } else {
    computerScore++;
    computerScoreSpan.textContent = computerScore;
-    resultMsg += "<strong>La computadora gana esta ronda.</strong>";
+    resultMsg += "<strong>La máquina gana esta ronda.</strong>";
  }

  resultDiv.innerHTML = resultMsg;
--- a/simon-dice/styles.css
+++ b/simon-dice/styles.css
@@ -5,7 +5,6 @@ html {
 *, *:before, *:after {
  box-sizing: inherit;
 }
-
 body {
  background: #e1f5fe;
  font-family: Arial, sans-serif;
@@ -13,38 +12,36 @@ body {
  color: #222;
  margin: 0;
  min-height: 100vh;
+  line-height: 1.5;
 }

-/* Encabezado */
 h1 {
  margin-top: 2rem;
  color: #01579b;
-  font-size: clamp(1.3rem, 5vw, 2.5rem);
+  font-size: clamp(2rem, 6vw, 3rem); /* más grande en mobile */
 }

-/* Panel de botones Simon */
 #game-container {
-  margin: 2.2rem auto 1rem auto;
+  margin: 1.5rem auto 1rem auto;
  width: 100%;
-  max-width: 340px;
+  max-width: 340px; /* se aumenta en móvil */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.2em;
  justify-content: center;
  align-items: center;
-  padding: 0.8em;
+  padding: 1em;
  border-radius: 1.2em;
  background: #ffffffdd;
  box-shadow: 0 2px 14px #bbbe;
-  aspect-ratio: 1 / 1; /* el panel siempre es cuadrado */
+  aspect-ratio: 1 / 1;
 }

-/* Botón Simon */
 .color-btn {
  width: 100%;
  height: 100%;
-  border-radius: 1.1em;
+  border-radius: 1.2em;
  box-shadow: 0 2px 8px #bbb;
  cursor: pointer;
  transition: filter 0.2s, border 0.2s;
@@ -53,7 +50,6 @@ h1 {
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
-  /* background colors asignados por id */
 }
 #green   { background: #43a047;}
 #red     { background: #e53935;}
@@ -64,9 +60,8 @@ h1 {
  border: 3px solid #333;
 }

-/* Estado y botón inicio */
 #status {
-  font-size: clamp(1em, 2vw, 1.15em);
+  font-size: clamp(1.1em, 2.5vw, 1.3em);
  min-height: 2em;
  margin-bottom: 1em;
  color: #01579b;
@@ -75,62 +70,67 @@ h1 {
 #start-btn {
  background: #01579b;
  color: #fff;
-  font-size: clamp(1em, 2vw, 1.13em);
+  font-size: clamp(1.2em, 2.5vw, 1.5em);
  border: none;
-  border-radius: 0.6em;
-  padding: 0.5em 2em;
+  border-radius: 0.8em;
+  padding: 0.7em 2.5em;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px #01579b33;
-  margin-bottom: 1.4em;
-}
-#start-btn:hover,
-#start-btn:active {
-  background: #263238;
+  margin-bottom: 2em;
 }

 /* ==== Pantallas pequeñas/móviles ==== */
-@media (max-width: 600px) {
+@media (max-width: 728px) {
+  html {
+    font-size: 20px;
+  }
  h1 {
    margin-top: 6vw;
-    font-size: clamp(1.1em, 7vw, 2em);
+    font-size: clamp(2em, 9vw, 2.6em); /* mucho más grande */
+    margin-bottom: 4vw;
  }
  #game-container {
-    max-width: 96vw;
-    gap: 6vw;
-    border-radius: 6vw;
-    padding: 2vw;
+    max-width: 92vw;        /* que el panel ocupe casi toda la pantalla */
+    gap: 7vw;               /* separa más los botones */
+    border-radius: 7vw;
+    padding: 3vw;
+    margin-top: 5vw;        /* menos espacio arriba */
+    margin-bottom: 2vw;
  }
  .color-btn {
-    border-radius: 5vw;
-    box-shadow: 0 2px 6px #bbb;
+    border-radius: 7vw;
+    box-shadow: 0 2px 12px #bbb;
+    min-width: 0;
+    min-height: 0;
  }
  #start-btn {
-    font-size: clamp(1em, 8vw, 1.4em);
-    padding: 1em 13vw;
+    font-size: clamp(1em, 7vw, 2em);
+    padding: 1.2em 10vw;     /* botón grande, fácil de clicar */
    border-radius: 5vw;
-    margin-bottom: 6vw;
+    margin-bottom: 4vw;
  }
  #status {
-    font-size: clamp(1em, 7vw, 1.3em);
-    margin-bottom: 5vw;
+    font-size: clamp(1em, 6vw, 1.7em);
+    margin-bottom: 3vw;
  }
 }

 /* ==== Pantallas muy pequeñas ==== */
@media (max-width: 350px) {
+  html { font-size: 17px; }
  #game-container {
-    max-width: 93vw;
-    gap: 3vw;
-    padding: 1vw;
-    border-radius: 10vw;
+    max-width: 96vw;
+    gap: 6vw;
+    padding: 2vw;
+    border-radius: 9vw;
  }
  .color-btn {
    border-radius: 8vw;
  }
  #start-btn {
-    padding: 0.8em 3vw;
+    padding: 1em 4vw;
    border-radius: 8vw;
-    font-size: clamp(0.9em, 13vw, 1.1em);
+    font-size: clamp(1em, 10vw, 1.5em);
  }
 }
--- a/topo/index.html
+++ b/topo/index.html
@@ -8,7 +8,7 @@
 <body>
  <h1>Atrapa el Topo</h1>
  <p>Haz clic en el topo cuando aparezca. ¡Consigue la mejor puntuación en 30 segundos!</p>
-  <div id="score">Puntaje: <span id="score-value">0</span></div>
+  <div id="score">Puntuación: <span id="score-value">0</span></div>
  <div id="timer">Tiempo: <span id="timer-value">30</span>s</div>
  <div id="grid"></div>
  <button id="start-btn">¡Empezar!</button>
Author	SHA1	Message	Date
fermdez	bd76741bd2	Merge branch 'master' of https://git.fermdez.net/fermdez/Juegos	2025-08-22 12:30:04 +02:00
fermdez	e2f1ba810f	Mejora en hoja de estilos	2025-08-22 12:24:04 +02:00
Fernando Méndez	80d2a8b3a9	Corrección de ruta de juego.	2025-08-22 01:41:14 +02:00
fermdez	b7a9b4ada9	Añadido favicon.	2025-08-22 00:47:48 +02:00
fermdez	0fa61a28d9	Mejora de etiquetas en página principal.	2025-08-22 00:47:25 +02:00
fermdez	e31ee45261	Mejoras de sintaxis.	2025-08-22 00:43:19 +02:00
fermdez	2b8c8799ad	Corrección de errata.	2025-08-22 00:25:08 +02:00
fermdez	aebd696259	Añadido juego de las banderas.	2025-08-21 23:59:34 +02:00
fermdez	3d963c8468	Mejora en README.	2025-08-21 23:59:22 +02:00