fermdez/Juegos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Compare commits

base: fermdez:90b2643d8d745965ec597f092097b0c941a7a882
Branches Tags
fermdez:master
fermdez:v1
...
compare: fermdez:master
Branches Tags
fermdez:master
fermdez:v1

9 Commits
90b2643d8d ... master

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
9 changed files with 328 additions and 46 deletions
Expand all files Collapse all files

31
README.md
View File

@@ -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.

20
banderas/index.html Normal file
View File

@@ -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>

141
banderas/script.js Normal file
View File

@@ -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();

76
banderas/styles.css Normal file
View File

@@ -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;}
}

20
index.html
View File

@@ -2,9 +2,19 @@
<html lang="es"> <html lang="es">
<head> <head>
<meta charset="UTF-8"> <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> <title>FerMdez - Games</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <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 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> <style>
body { body {
background: linear-gradient(120deg, #9cebfc 0%, #e9defa 100%); background: linear-gradient(120deg, #9cebfc 0%, #e9defa 100%);
@@ -235,7 +245,7 @@
<div class="game-icon">🐍</div> <div class="game-icon">🐍</div>
<div class="game-title">Snake Game</div> <div class="game-title">Snake Game</div>
<div class="game-desc">Haz crecer la serpiente comiendo puntos, ¡no choques con la pared!</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> <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a> </a>
</div> </div>
@@ -263,6 +273,14 @@
<svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg> <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a> </a>
</div> </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> </div>
</main> </main>
</body> </body>

BIN
media/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

4
piedra-papel-tijera/script.js
View File

@@ -18,7 +18,7 @@ function playRound(userChoice) {
const computerChoice = computerPlay(); const computerChoice = computerPlay();
let resultMsg = `Tu elección: ${emoji(userChoice)} ${capitalize(userChoice)}<br> 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) { if (userChoice === computerChoice) {
resultMsg += "<strong>¡Empate!</strong>"; resultMsg += "<strong>¡Empate!</strong>";
@@ -33,7 +33,7 @@ function playRound(userChoice) {
} else { } else {
computerScore++; computerScore++;
computerScoreSpan.textContent = computerScore; computerScoreSpan.textContent = computerScore;
resultMsg += "<strong>La computadora gana esta ronda.</strong>"; resultMsg += "<strong>La máquina gana esta ronda.</strong>";
} }
resultDiv.innerHTML = resultMsg; resultDiv.innerHTML = resultMsg;

80
simon-dice/styles.css
View File

@@ -5,7 +5,6 @@ html {
*, *:before, *:after { *, *:before, *:after {
box-sizing: inherit; box-sizing: inherit;
} }
body { body {
background: #e1f5fe; background: #e1f5fe;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -13,38 +12,36 @@ body {
color: #222; color: #222;
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
line-height: 1.5;
} }
/* Encabezado */
h1 { h1 {
margin-top: 2rem; margin-top: 2rem;
color: #01579b; 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 { #game-container {
margin: 2.2rem auto 1rem auto; margin: 1.5rem auto 1rem auto;
width: 100%; width: 100%;
max-width: 340px; max-width: 340px; /* se aumenta en móvil */
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);
gap: 1.2em; gap: 1.2em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0.8em; padding: 1em;
border-radius: 1.2em; border-radius: 1.2em;
background: #ffffffdd; background: #ffffffdd;
box-shadow: 0 2px 14px #bbbe; box-shadow: 0 2px 14px #bbbe;
aspect-ratio: 1 / 1; /* el panel siempre es cuadrado */ aspect-ratio: 1 / 1;
} }
/* Botón Simon */
.color-btn { .color-btn {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 1.1em; border-radius: 1.2em;
box-shadow: 0 2px 8px #bbb; box-shadow: 0 2px 8px #bbb;
cursor: pointer; cursor: pointer;
transition: filter 0.2s, border 0.2s; transition: filter 0.2s, border 0.2s;
@@ -53,7 +50,6 @@ h1 {
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
/* background colors asignados por id */
} }
#green { background: #43a047;} #green { background: #43a047;}
#red { background: #e53935;} #red { background: #e53935;}
@@ -64,9 +60,8 @@ h1 {
border: 3px solid #333; border: 3px solid #333;
} }
/* Estado y botón inicio */
#status { #status {
font-size: clamp(1em, 2vw, 1.15em); font-size: clamp(1.1em, 2.5vw, 1.3em);
min-height: 2em; min-height: 2em;
margin-bottom: 1em; margin-bottom: 1em;
color: #01579b; color: #01579b;
@@ -75,62 +70,67 @@ h1 {
#start-btn { #start-btn {
background: #01579b; background: #01579b;
color: #fff; color: #fff;
font-size: clamp(1em, 2vw, 1.13em); font-size: clamp(1.2em, 2.5vw, 1.5em);
border: none; border: none;
border-radius: 0.6em; border-radius: 0.8em;
padding: 0.5em 2em; padding: 0.7em 2.5em;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.2s;
box-shadow: 0 2px 8px #01579b33; box-shadow: 0 2px 8px #01579b33;
margin-bottom: 1.4em; margin-bottom: 2em;
}
#start-btn:hover,
#start-btn:active {
background: #263238;
} }
/* ==== Pantallas pequeñas/móviles ==== */ /* ==== Pantallas pequeñas/móviles ==== */
@media (max-width: 600px) { @media (max-width: 728px) {
html {
font-size: 20px;
}
h1 { h1 {
margin-top: 6vw; 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 { #game-container {
max-width: 96vw; max-width: 92vw; /* que el panel ocupe casi toda la pantalla */
gap: 6vw; gap: 7vw; /* separa más los botones */
border-radius: 6vw; border-radius: 7vw;
padding: 2vw; padding: 3vw;
margin-top: 5vw; /* menos espacio arriba */
margin-bottom: 2vw;
} }
.color-btn { .color-btn {
border-radius: 5vw; border-radius: 7vw;
box-shadow: 0 2px 6px #bbb; box-shadow: 0 2px 12px #bbb;
min-width: 0;
min-height: 0;
} }
#start-btn { #start-btn {
font-size: clamp(1em, 8vw, 1.4em); font-size: clamp(1em, 7vw, 2em);
padding: 1em 13vw; padding: 1.2em 10vw; /* botón grande, fácil de clicar */
border-radius: 5vw; border-radius: 5vw;
margin-bottom: 6vw; margin-bottom: 4vw;
} }
#status { #status {
font-size: clamp(1em, 7vw, 1.3em); font-size: clamp(1em, 6vw, 1.7em);
margin-bottom: 5vw; margin-bottom: 3vw;
} }
} }
/* ==== Pantallas muy pequeñas ==== */ /* ==== Pantallas muy pequeñas ==== */
@media (max-width: 350px) { @media (max-width: 350px) {
html { font-size: 17px; }
#game-container { #game-container {
max-width: 93vw; max-width: 96vw;
gap: 3vw; gap: 6vw;
padding: 1vw; padding: 2vw;
border-radius: 10vw; border-radius: 9vw;
} }
.color-btn { .color-btn {
border-radius: 8vw; border-radius: 8vw;
} }
#start-btn { #start-btn {
padding: 0.8em 3vw; padding: 1em 4vw;
border-radius: 8vw; border-radius: 8vw;
font-size: clamp(0.9em, 13vw, 1.1em); font-size: clamp(1em, 10vw, 1.5em);
} }
} }

2
topo/index.html
View File

@@ -8,7 +8,7 @@
<body> <body>
<h1>Atrapa el Topo</h1> <h1>Atrapa el Topo</h1>
<p>Haz clic en el topo cuando aparezca. ¡Consigue la mejor puntuación en 30 segundos!</p> <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="timer">Tiempo: <span id="timer-value">30</span>s</div>
<div id="grid"></div> <div id="grid"></div>
<button id="start-btn">¡Empezar!</button> <button id="start-btn">¡Empezar!</button>