Mini Baseball Pro
by SilverFalcon18253 lines6.4 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mini Baseball Pro</title>
<style>
body {
margin: 0;
background: #7ec0ee;
overflow: hidden;
text-align: center;
font-family: 'Arial', sans-serif;
user-select: none;
}
#campo {
position: relative;
width: 100vw;
height: 100vh;
background: linear-gradient(to bottom, #7ec0ee 60%, #556B2F 60%);
}
#marcador {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 28px;
font-weight: bold;
color: white;
background: rgba(0,0,0,0.5);
padding: 10px 20px;
border-radius: 10px;
text-shadow: 2px 2px 4px #000;
}
#pelota {
position: absolute;
width: 25px;
height: 25px;
background: #fff;
border: 2px solid #ccc;
border-radius: 50%;
box-shadow: inset -4px -4px 0px rgba(0,0,0,0.1);
left: -50px;
top: 65%;
}
#bateador {
position: absolute;
width: 20px;
height: 90px;
background: #8B4513;
border-radius: 5px;
right: 150px;
top: 60%;
transform-origin: bottom center;
transition: transform 0.1s ease;
}
#mensaje {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: bold;
color: #FFFF00;
text-shadow: 3px 3px 0px #000;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
#pantalla-inicio {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
button {
padding: 15px 30px;
font-size: 22px;
font-weight: bold;
background: #ff4500;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 5px #b33000;
}
button:active {
box-shadow: 0 2px #b33000;
transform: translateY(3px);
}
</style>
</head>
<body>
<div id="campo">
<div id="pantalla-inicio">
<h1>MINI BASEBALL PRO</h1>
<p>Presiona la <strong>BARRA ESPACIADORA</strong> para batear en el momento justo.</p>
<p>Tienes 3 Outs antes de que termine el juego.</p>
<button onclick="empezarJuego()">JUGAR</button>
</div>
<div id="marcador">Hits: <span id="hits">0</span> | Outs: <span id="outs">0</span>/3</div>
<div id="mensaje">¡HOME RUN!</div>
<div id="pelota"></div>
<div id="bateador"></div>
</div>
<script>
const pelota = document.getElementById("pelota");
const bateador = document.getElementById("bateador");
const txtHits = document.getElementById("hits");
const txtOuts = document.getElementById("outs");
const mensaje = document.getElementById("mensaje");
const pantallaInicio = document.getElementById("pantalla-inicio");
let hits = 0;
let outs = 0;
let juegoActivo = false;
let intervaloLanzamiento = null;
let intervaloVuelo = null;
// Configuración de posiciones
const posBateadorX = window.innerWidth - 170; // Zona del bate
const alturaLanzamiento = window.innerHeight * 0.62;
function empezarJuego() {
hits = 0;
outs = 0;
txtHits.innerText = hits;
txtOuts.innerText = outs;
pantallaInicio.style.display = "none";
juegoActivo = true;
setTimeout(lanzar, 1000);
}
function mostrarMensaje(texto, color) {
mensaje.innerText = texto;
mensaje.style.color = color;
mensaje.style.opacity = "1";
setTimeout(() => { mensaje.style.opacity = "0"; }, 800);
}
function lanzar() {
if (!juegoActivo) return;
clearInterval(intervaloLanzamiento);
clearInterval(intervaloVuelo);
let x = -30;
let y = alturaLanzamiento;
pelota.style.left = x + "px";
pelota.style.top = y + "px";
// Velocidad aleatoria para hacerlo más divertido
let velocidad = 10 + Math.random() * 6;
intervaloLanzamiento = setInterval(() => {
x += velocidad;
pelota.style.left = x + "px";
// Si la pelota pasa el bate sin que logres golpearla
if (x > window.innerWidth) {
clearInterval(intervaloLanzamiento);
registrarOut("¡STRIKE!");
}
}, 20);
}
function registrarOut(tipoOut) {
outs++;
txtOuts.innerText = outs;
mostrarMensaje(tipoOut, "#ff4500");
if (outs >= 3) {
juegoActivo = false;
setTimeout(() => {
pantallaInicio.querySelector("h1").innerText = "FIN DEL JUEGO";
pantallaInicio.querySelector("p").innerHTML = `Lograste <strong>${hits}</strong> Hits.`;
pantallaInicio.style.display = "flex";
}, 1000);
} else {
setTimeout(lanzar, 1500);
}
}
function batear() {
if (!juegoActivo) return;
// Animación visual del bate (rotación rápida)
bateador.style.transform = "rotate(-60deg)";
setTimeout(() => { bateador.style.transform = "rotate(0deg)"; }, 150);
// Obtener posición actual de la pelota
let pelotaX = pelota.offsetLeft;
// Verificar si la pelota está en la zona de contacto del bate
// Rango de acierto entre posBateadorX - 40px y posBateadorX + 20px
if (pelotaX > (posBateadorX - 40) && pelotaX < (posBateadorX + 20)) {
// Detener el lanzamiento actual
clearInterval(intervaloLanzamiento);
hits++;
txtHits.innerText = hits;
mostrarMensaje("¡HOME RUN!", "#FFFF00");
// Animación de la pelota volando tras el hit
let xVuelo = pelotaX;
let yVuelo = alturaLanzamiento;
let dirX = -(12 + Math.random() * 5); // Vuela hacia la izquierda de regreso
let dirY = -(10 + Math.random() * 5); // Vuela hacia arriba
intervaloVuelo = setInterval(() => {
xVuelo += dirX;
yVuelo += dirY;
dirY += 0.4; // Simula gravedad
pelota.style.left = xVuelo + "px";
pelota.style.top = yVuelo + "px";
// Si sale de la pantalla por arriba, abajo o la izquierda
if (yVuelo > window.innerHeight || xVuelo < -50) {
clearInterval(intervaloVuelo);
setTimeout(lanzar, 1500);
}
}, 20);
}
}
// Control por teclado (Barra espaciadora o Flecha Arriba)
document.addEventListener("keydown", (e) => {
if (e.code === "Space" || e.code === "ArrowUp") {
e.preventDefault(); // Evita scroll en la pantalla
batear();
}
});
// Control táctil o click para dispositivos móviles
document.addEventListener("touchstart", (e) => {
if (juegoActivo) {
batear();
}
});
</script>
</body>
</html>
Game Source: Mini Baseball Pro
Creator: SilverFalcon18
Libraries: none
Complexity: complex (253 lines, 6.4 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: mini-baseball-pro-silverfalcon18" to link back to the original. Then publish at arcadelab.ai/publish.