Compare commits
7 Commits
aebd696259
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| bd76741bd2 | |||
| e2f1ba810f | |||
| 80d2a8b3a9 | |||
| b7a9b4ada9 | |||
| 0fa61a28d9 | |||
| e31ee45261 | |||
| 2b8c8799ad |
12
index.html
12
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>
|
||||
|
||||
BIN
media/favicon.ico
Normal file
BIN
media/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user