Añadidos juegos
This commit is contained in:
18
topo/index.html
Normal file
18
topo/index.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Atrapa el Topo</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<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="timer">Tiempo: <span id="timer-value">30</span>s</div>
|
||||
<div id="grid"></div>
|
||||
<button id="start-btn">¡Empezar!</button>
|
||||
<div id="end-message"></div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
79
topo/script.js
Normal file
79
topo/script.js
Normal file
@@ -0,0 +1,79 @@
|
||||
const gridDiv = document.getElementById('grid');
|
||||
const scoreSpan = document.getElementById('score-value');
|
||||
const timerSpan = document.getElementById('timer-value');
|
||||
const startBtn = document.getElementById('start-btn');
|
||||
const endMessageDiv = document.getElementById('end-message');
|
||||
|
||||
const TOTAL_TIME = 30;
|
||||
const GRID_SIZE = 16;
|
||||
const MOLE_SYMBOL = '🦦';
|
||||
|
||||
let score = 0, moleIdx = null, timer = TOTAL_TIME, intervalId, moleTimeoutId, playing = false;
|
||||
|
||||
function createGrid() {
|
||||
gridDiv.innerHTML = '';
|
||||
for (let i = 0; i < GRID_SIZE; i++) {
|
||||
const cell = document.createElement('div');
|
||||
cell.className = 'cell';
|
||||
cell.dataset.idx = i;
|
||||
cell.onclick = () => hitCell(i);
|
||||
gridDiv.appendChild(cell);
|
||||
}
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
score = 0;
|
||||
timer = TOTAL_TIME;
|
||||
scoreSpan.textContent = score;
|
||||
timerSpan.textContent = timer;
|
||||
endMessageDiv.textContent = '';
|
||||
startBtn.disabled = true;
|
||||
playing = true;
|
||||
createGrid();
|
||||
spawnMole();
|
||||
intervalId = setInterval(() => {
|
||||
timer--;
|
||||
timerSpan.textContent = timer;
|
||||
if (timer <= 0) endGame();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function endGame() {
|
||||
playing = false;
|
||||
clearInterval(intervalId);
|
||||
clearTimeout(moleTimeoutId);
|
||||
startBtn.disabled = false;
|
||||
removeMole();
|
||||
endMessageDiv.innerHTML = `¡Fin del juego! Tu puntaje: <b>${score}</b>`;
|
||||
}
|
||||
|
||||
function spawnMole() {
|
||||
removeMole();
|
||||
if (!playing) return;
|
||||
moleIdx = Math.floor(Math.random() * GRID_SIZE);
|
||||
const cell = gridDiv.children[moleIdx];
|
||||
cell.classList.add('mole');
|
||||
cell.textContent = MOLE_SYMBOL;
|
||||
moleTimeoutId = setTimeout(spawnMole, Math.floor(Math.random() * 700) + 600); // aparecer entre 0.6-1.3s
|
||||
}
|
||||
|
||||
function removeMole() {
|
||||
if (moleIdx !== null) {
|
||||
const cell = gridDiv.children[moleIdx];
|
||||
cell.classList.remove('mole');
|
||||
cell.textContent = '';
|
||||
moleIdx = null;
|
||||
}
|
||||
}
|
||||
|
||||
function hitCell(idx) {
|
||||
if (!playing) return;
|
||||
if (idx === moleIdx) {
|
||||
score++;
|
||||
scoreSpan.textContent = score;
|
||||
removeMole();
|
||||
}
|
||||
}
|
||||
|
||||
startBtn.onclick = startGame;
|
||||
createGrid();
|
||||
143
topo/styles.css
Normal file
143
topo/styles.css
Normal file
@@ -0,0 +1,143 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #fae3d9;
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
color: #22223b;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Encabezado */
|
||||
h1 {
|
||||
margin-top: 2rem;
|
||||
color: #9a8c98;
|
||||
font-size: clamp(1.5rem, 5vw, 2.7rem);
|
||||
}
|
||||
|
||||
/* Score y timer flexibles */
|
||||
#score, #timer {
|
||||
font-size: clamp(1em, 2vw, 1.18em);
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
/* Tablero de celdas adaptativo y cuadrado */
|
||||
#grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
gap: 1em;
|
||||
justify-content: center;
|
||||
margin: 1.6em auto 0.8em auto;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
aspect-ratio: 1/1;
|
||||
background: #f5ebe3;
|
||||
border-radius: 1.2em;
|
||||
padding: 1em;
|
||||
box-shadow: 0 2px 10px #bbb7;
|
||||
}
|
||||
|
||||
/* Celdas circulares */
|
||||
.cell {
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 10px #bbb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: clamp(1.5em, 6vw, 2.4em);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
.cell.mole {
|
||||
background: #b5838d;
|
||||
}
|
||||
|
||||
/* Botón start flexible */
|
||||
#start-btn {
|
||||
background: #9a8c98;
|
||||
color: #fff;
|
||||
font-size: clamp(1em, 2vw, 1.18em);
|
||||
border: none;
|
||||
border-radius: 0.6em;
|
||||
padding: 0.6em 2em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #b5838d44;
|
||||
transition: background 0.2s;
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
#start-btn:hover, #start-btn:active {
|
||||
background: #22223b;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Mensaje final */
|
||||
#end-message {
|
||||
font-size: clamp(1em, 2vw, 1.15em);
|
||||
margin-top: 1.1em;
|
||||
min-height: 2em;
|
||||
color: #b5838d;
|
||||
}
|
||||
|
||||
/* ==== Pantallas móviles ==== */
|
||||
@media (max-width: 600px) {
|
||||
h1 {
|
||||
margin-top: 6vw;
|
||||
font-size: clamp(1.1em, 7vw, 2.1em);
|
||||
}
|
||||
#grid {
|
||||
max-width: 97vw;
|
||||
gap: 4vw;
|
||||
padding: 2vw;
|
||||
border-radius: 7vw;
|
||||
margin-top: 6vw;
|
||||
margin-bottom: 6vw;
|
||||
}
|
||||
.cell {
|
||||
font-size: clamp(1.1em, 10vw, 2.8em);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#start-btn {
|
||||
font-size: clamp(1em, 8vw, 1.5em);
|
||||
padding: 1em 13vw;
|
||||
border-radius: 5vw;
|
||||
margin-bottom: 6vw;
|
||||
}
|
||||
#score, #timer {
|
||||
font-size: clamp(1em, 7vw, 1.3em);
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
#end-message {
|
||||
font-size: clamp(1em, 7vw, 1.3em);
|
||||
margin-top: 5vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==== Pantallas muy pequeñas ==== */
|
||||
@media (max-width: 350px) {
|
||||
#grid {
|
||||
max-width: 92vw;
|
||||
gap: 2vw;
|
||||
border-radius: 13vw;
|
||||
padding: 1vw;
|
||||
}
|
||||
.cell {
|
||||
font-size: clamp(0.8em, 12vw, 1.2em);
|
||||
}
|
||||
#start-btn {
|
||||
font-size: clamp(0.9em, 10vw, 1.1em);
|
||||
padding: 0.7em 3vw;
|
||||
border-radius: 8vw;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user