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

Compare commits

base: fermdez:aebd69625904e5dfa12438c5c9ba796f05630030
Branches Tags
fermdez:master
fermdez:v1
..
compare: fermdez:master
Branches Tags
fermdez:master
fermdez:v1

7 Commits
aebd696259 ... 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
5 changed files with 54 additions and 44 deletions
Expand all files Collapse all files

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

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>