Añadidos juegos
This commit is contained in:
25
reflejos/index.html
Normal file
25
reflejos/index.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Juego: ¡Haz click al Círculo!</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>¡Haz click al Círculo!</h1>
|
||||
<div id="game-info">
|
||||
<span>Puntuación: <span id="score">0</span></span> |
|
||||
<span>Tiempo: <span id="timer">20</span> s</span>
|
||||
</div>
|
||||
<div id="game-area"></div>
|
||||
<button id="start-btn">Empezar Juego</button>
|
||||
|
||||
<div id="game-over" class="hidden">
|
||||
<h2>¡Juego Terminado!</h2>
|
||||
<p>Tu puntuación fue: <span id="final-score"></span></p>
|
||||
<button onclick="startGame()">Jugar de nuevo</button>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
84
reflejos/script.js
Normal file
84
reflejos/script.js
Normal file
@@ -0,0 +1,84 @@
|
||||
const gameArea = document.getElementById('game-area');
|
||||
const scoreSpan = document.getElementById('score');
|
||||
const timerSpan = document.getElementById('timer');
|
||||
const startBtn = document.getElementById('start-btn');
|
||||
const gameOverDiv = document.getElementById('game-over');
|
||||
const finalScoreSpan = document.getElementById('final-score');
|
||||
|
||||
let score = 0;
|
||||
let timer = 20; // duración del juego en segundos
|
||||
let interval, timeout;
|
||||
let playing = false;
|
||||
|
||||
function startGame() {
|
||||
score = 0;
|
||||
timer = 20;
|
||||
scoreSpan.textContent = score;
|
||||
timerSpan.textContent = timer;
|
||||
gameArea.innerHTML = '';
|
||||
gameOverDiv.classList.add('hidden');
|
||||
startBtn.disabled = true;
|
||||
playing = true;
|
||||
|
||||
// Iniciar contador regresivo
|
||||
interval = setInterval(() => {
|
||||
timer--;
|
||||
timerSpan.textContent = timer;
|
||||
if (timer <= 0) {
|
||||
endGame();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
spawnCircle();
|
||||
}
|
||||
|
||||
function endGame() {
|
||||
playing = false;
|
||||
clearInterval(interval);
|
||||
clearTimeout(timeout);
|
||||
gameArea.innerHTML = '';
|
||||
startBtn.disabled = false;
|
||||
|
||||
// Mostrar resultado final
|
||||
finalScoreSpan.textContent = score;
|
||||
gameOverDiv.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function spawnCircle() {
|
||||
if (!playing || timer <= 0) return;
|
||||
|
||||
// Crear círculo y posicionarlo aleatoriamente
|
||||
const circle = document.createElement('div');
|
||||
circle.className = 'circle';
|
||||
|
||||
// Cálculo de posición dentro de gameArea
|
||||
const areaRect = gameArea.getBoundingClientRect();
|
||||
const radius = 25; // la mitad de 50px
|
||||
const maxLeft = gameArea.clientWidth - circle.offsetWidth;
|
||||
const maxTop = gameArea.clientHeight - circle.offsetHeight;
|
||||
const left = Math.floor(Math.random() * maxLeft);
|
||||
const top = Math.floor(Math.random() * maxTop);
|
||||
|
||||
circle.style.left = left + 'px';
|
||||
circle.style.top = top + 'px';
|
||||
|
||||
// Evento de clic
|
||||
circle.onclick = function() {
|
||||
score++;
|
||||
scoreSpan.textContent = score;
|
||||
gameArea.removeChild(circle);
|
||||
spawnCircle();
|
||||
};
|
||||
|
||||
gameArea.appendChild(circle);
|
||||
|
||||
// Si no lo clickean en 1.2s, desaparece y aparece otro
|
||||
timeout = setTimeout(() => {
|
||||
if (playing && gameArea.contains(circle)) {
|
||||
gameArea.removeChild(circle);
|
||||
spawnCircle();
|
||||
}
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
startBtn.onclick = startGame;
|
||||
129
reflejos/styles.css
Normal file
129
reflejos/styles.css
Normal file
@@ -0,0 +1,129 @@
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
background: #f2f2f2;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Info del juego */
|
||||
#game-info {
|
||||
font-size: clamp(1em, 2vw, 1.2em);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Área de juego */
|
||||
#game-area {
|
||||
width: 100vw;
|
||||
max-width: 420px;
|
||||
height: 100vw;
|
||||
max-height: 420px;
|
||||
margin: 2.2rem auto 1.3rem auto;
|
||||
background: #fff;
|
||||
border: 2px solid #2196f3;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 0.9em;
|
||||
box-shadow: 0 2px 14px #bbb4;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
/* Círculo responsive */
|
||||
.circle {
|
||||
width: clamp(38px, 12vw, 54px);
|
||||
height: clamp(38px, 12vw, 54px);
|
||||
background: #4caf50;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 10px #999;
|
||||
transition: background 0.2s;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.circle:active {
|
||||
background: #388e3c;
|
||||
}
|
||||
|
||||
/* Botón Start */
|
||||
#start-btn {
|
||||
font-size: clamp(1em, 3vw, 1.15em);
|
||||
padding: 0.7em 2em;
|
||||
margin-top: 1em;
|
||||
cursor: pointer;
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.45em;
|
||||
box-shadow: 0 2px 8px #2196f366;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#start-btn:hover,
|
||||
#start-btn:active {
|
||||
background: #1976d2;
|
||||
}
|
||||
|
||||
/* Game Over */
|
||||
#game-over {
|
||||
margin-top: 1.3em;
|
||||
font-size: clamp(1em, 2vw, 1.15em);
|
||||
}
|
||||
|
||||
/* Oculto */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ==== Pantallas móviles ==== */
|
||||
@media (max-width: 728px) {
|
||||
#game-area {
|
||||
max-width: 98vw;
|
||||
max-height: 98vw;
|
||||
border-radius: 6vw;
|
||||
box-shadow: 0 2px 8px #2196f350;
|
||||
margin-top: 5vw;
|
||||
margin-bottom: 4vw;
|
||||
}
|
||||
.circle {
|
||||
width: clamp(33px, 20vw, 54px);
|
||||
height: clamp(33px, 20vw, 54px);
|
||||
}
|
||||
#start-btn {
|
||||
font-size: clamp(1em, 8vw, 1.5em);
|
||||
padding: 1em 14vw;
|
||||
border-radius: 5vw;
|
||||
margin-top: 4vw;
|
||||
}
|
||||
#game-info {
|
||||
font-size: clamp(1em, 6vw, 1.25em);
|
||||
margin-bottom: 4vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==== Pantallas muy pequeñas ==== */
|
||||
@media (max-width: 340px) {
|
||||
#game-area {
|
||||
max-width: 94vw;
|
||||
max-height: 94vw;
|
||||
border-radius: 13vw;
|
||||
}
|
||||
.circle {
|
||||
width: clamp(22px, 33vw, 38px);
|
||||
height: clamp(22px, 33vw, 38px);
|
||||
}
|
||||
#start-btn {
|
||||
font-size: clamp(0.9em, 10vw, 1.2em);
|
||||
padding: 0.5em 8vw;
|
||||
border-radius: 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* ::::::::::::::::::::::::::::::::: */
|
||||
Reference in New Issue
Block a user