se peron – argentinadn

<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Esquiva Gorilas – Juego Web</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Arial’, sans-serif;
}

body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.game-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
padding: 30px;
max-width: 900px;
width: 100%;
text-align: center;
}

h1 {
color: #333;
margin-bottom: 10px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.subtitle {
color: #666;
margin-bottom: 30px;
font-size: 1.2em;
}

.game-area {
position: relative;
width: 100%;
height: 500px;
background: linear-gradient(to bottom, #87CEEB, #98FB98);
border: 5px solid #333;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

#player {
position: absolute;
width: 60px;
height: 80px;
background: #FF6B6B;
border-radius: 10px 10px 5px 5px;
transition: left 0.1s;
z-index: 10;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.player-face {
position: absolute;
width: 30px;
height: 30px;
background: #FFD166;
border-radius: 50%;
top: 10px;
left: 15px;
}

.player-eye {
position: absolute;
width: 8px;
height: 8px;
background: #333;
border-radius: 50%;
top: 5px;
}

.player-eye.left { left: 5px; }
.player-eye.right { right: 5px; }

.gorilla {
position: absolute;
width: 70px;
height: 90px;
background: #333;
border-radius: 15px;
animation: fall linear infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.gorilla-face {
position: absolute;
width: 50px;
height: 40px;
background: #4A4A4A;
border-radius: 50%;
top: 10px;
left: 10px;
}

.gorilla-eye {
position: absolute;
width: 10px;
height: 10px;
background: #FFD700;
border-radius: 50%;
top: 10px;
}

.gorilla-eye.left { left: 10px; }
.gorilla-eye.right { right: 10px; }

.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
flex-wrap: wrap;
}

button {
background: linear-gradient(to right, #667eea, #764ba2);
color: white;
border: none;
padding: 15px 30px;
font-size: 1.1em;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

button:active {
transform: translateY(1px);
}

#startBtn { background: linear-gradient(to right, #4CAF50, #45a049); }
#pauseBtn { background: linear-gradient(to right, #FF9800, #F57C00); }
#resetBtn { background: linear-gradient(to right, #f44336, #d32f2f); }

.stats {
display: flex;
justify-content: space-around;
background: #f0f0f0;
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.stat-item {
text-align: center;
}

.stat-value {
font-size: 2em;
font-weight: bold;
color: #667eea;
}

.stat-label {
color: #666;
font-size: 0.9em;
margin-top: 5px;
}

.instructions {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
text-align: left;
margin-top: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.instructions h3 {
color: #333;
margin-bottom: 10px;
}

.instructions ul {
list-style-type: none;
padding-left: 0;
}

.instructions li {
padding: 8px 0;
color: #666;
border-bottom: 1px solid #eee;
}

.instructions li:last-child {
border-bottom: none;
}

.key {
display: inline-block;
background: #333;
color: white;
padding: 2px 8px;
border-radius: 4px;
font-family: monospace;
margin: 0 5px;
}

.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 40px;
border-radius: 20px;
text-align: center;
z-index: 100;
display: none;
animation: fadeIn 0.5s;
box-shadow: 0 0 50px rgba(255,255,255,0.2);
}

@keyframes fall {
from { top: -100px; }
to { top: 510px; }
}

@keyframes fadeIn {
from { opacity: 0; transform: translate(-50%, -60%); }
to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (max-width: 768px) {
.game-container {
padding: 15px;
}

.game-area {
height: 400px;
}

h1 {
font-size: 2em;
}

.controls {
flex-direction: column;
align-items: center;
}

button {
width: 80%;
margin: 5px 0;
}
}

.score-animation {
position: absolute;
color: #4CAF50;
font-size: 1.5em;
font-weight: bold;
animation: scorePop 0.5s ease-out;
z-index: 20;
}

@keyframes scorePop {
0% { transform: scale(0.5); opacity: 0; }
50% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
</style>
</head>
<body>
<div class=”game-container”>
<h1>🐵 Esquiva Gorilas 🐵</h1>
<p class=”subtitle”>¡Ayuda al personaje a esquivar los gorilas que caen del cielo!</p>

<div class=”stats”>
<div class=”stat-item”>
<div class=”stat-value” id=”score”>0</div>
<div class=”stat-label”>PUNTUACIÓN</div>
</div>
<div class=”stat-item”>
<div class=”stat-value” id=”time”>0s</div>
<div class=”stat-label”>TIEMPO</div>
</div>
<div class=”stat-item”>
<div class=”stat-value” id=”lives”>3</div>
<div class=”stat-label”>VIDAS</div>
</div>
<div class=”stat-item”>
<div class=”stat-value” id=”level”>1</div>
<div class=”stat-label”>NIVEL</div>
</div>
</div>

<div class=”controls”>
<button id=”startBtn”>▶️ COMENZAR</button>
<button id=”pauseBtn”>⏸️ PAUSAR</button>
<button id=”resetBtn”>🔄 REINICIAR</button>
</div>

<div class=”game-area” id=”gameArea”>
<div id=”player”>
<div class=”player-face”>
<div class=”player-eye left”></div>
<div class=”player-eye right”></div>
</div>
</div>
</div>

<div class=”instructions”>
<h3>🎮 Cómo Jugar:</h3>
<ul>
<li>▶️ <strong>Presiona “COMENZAR”</strong> para iniciar el juego</li>
<li>👈 <strong>Usa las teclas</strong> <span class=”key”>A</span> o <span class=”key”>←</span> para moverte a la IZQUIERDA</li>
<li>👉 <strong>Usa las teclas</strong> <span class=”key”>D</span> o <span class=”key”>→</span> para moverte a la DERECHA</li>
<li>🎯 <strong>Esquiva</strong> todos los gorilas que caen del cielo</li>
<li>⭐ <strong>Cada gorila esquivado</strong> te da 10 puntos</li>
<li>💔 <strong>Pierdes una vida</strong> si un gorila te golpea</li>
<li>🚀 <strong>Cada 100 puntos</strong> subes de nivel y aumenta la velocidad</li>
</ul>
</div>

<div class=”game-over” id=”gameOver”>
<h2 style=”color: #FFD700; font-size: 3em;”>¡GAME OVER!</h2>
<p style=”font-size: 1.5em; margin: 20px 0;”>Puntuación Final: <span id=”finalScore” style=”color: #4CAF50;”>0</span></p>
<p style=”margin-bottom: 30px; color: #ccc;”>Tiempo Jugado: <span id=”finalTime”>0s</span></p>
<button onclick=”resetGame()” style=”font-size: 1.2em; padding: 15px 40px;”>JUGAR DE NUEVO</button>
</div>
</div>

// Elementos del DOM
const gameArea = document.getElementById(‘gameArea’);
const player = document.getElementById(‘player’);
const scoreElement = document.getElementById(‘score’);
const livesElement = document.getElementById(‘lives’);
const levelElement = document.getElementById(‘level’);
const timeElement = document.getElementById(‘time’);
const gameOverScreen = document.getElementById(‘gameOver’);
const finalScoreElement = document.getElementById(‘finalScore’);
const finalTimeElement = document.getElementById(‘finalTime’);

// Inicializar posición del jugador
player.style.left = ‘50%’;

// Funciones del juego
function startGame() {
if (gameRunning) return;

gameRunning = true;
resetGameStats();
gameOverScreen.style.display = ‘none’;

// Iniciar temporizador
timeInterval = setInterval(() => {
gameTime++;
timeElement.textContent = gameTime + ‘s’;
}, 1000);

// Iniciar ciclo del juego
gameInterval = setInterval(updateGame, 100);

// Generar gorilas periódicamente
setInterval(createGorilla, gameSpeed);

updateStats();
}

function resetGame() {
gameRunning = false;
clearInterval(gameInterval);
clearInterval(timeInterval);

// Eliminar todos los gorilas
document.querySelectorAll(‘.gorilla’).forEach(gorilla => gorilla.remove());
gorillas = [];

// Reiniciar posición del jugador
playerPos = 50;
player.style.left = playerPos + ‘%’;

// Reiniciar estadísticas
score = 0;
lives = 3;
level = 1;
gameTime = 0;
gameSpeed = 1500;

updateStats();
gameOverScreen.style.display = ‘none’;
document.getElementById(‘pauseBtn’).textContent = ‘⏸️ PAUSAR’;
}

function updateGame() {
if (!gameRunning) return;

// Actualizar posición del jugador
player.style.left = playerPos + ‘%’;

// Verificar colisiones
checkCollisions();

// Actualizar nivel si es necesario
updateLevel();
}

function addScore(points) {
score += points;
updateStats();
}

function loseLife() {
lives–;
updateStats();

if (lives <= 0) {
endGame();
}
}

function updateLevel() {
const newLevel = Math.floor(score / 100) + 1;
if (newLevel > level) {
level = newLevel;
gameSpeed = Math.max(500, 1500 – (level * 100)); // Aumentar dificultad
updateStats();
}
}

function updateStats() {
scoreElement.textContent = score;
livesElement.textContent = lives;
levelElement.textContent = level;
}

function endGame() {
gameRunning = false;
clearInterval(gameInterval);
clearInterval(timeInterval);

finalScoreElement.textContent = score;
finalTimeElement.textContent = gameTime + ‘s’;
gameOverScreen.style.display = ‘block’;
}

function resetGameStats() {
score = 0;
lives = 3;
level = 1;
gameTime = 0;
gameSpeed = 1500;
updateStats();
}

function showScoreAnimation(x, y, text) {
const animation = document.createElement(‘div’);
animation.className = ‘score-animation’;
animation.textContent = text;
animation.style.left = x + ‘%’;
animation.style.top = y + ‘px’;

gameArea.appendChild(animation);

setTimeout(() => {
animation.remove();
}, 500);
}

// Controles del teclado
document.addEventListener(‘keydown’, (e) => {
if (!gameRunning) return;

switch(e.key.toLowerCase()) {
case ‘a’:
case ‘arrowleft’:
playerPos = Math.max(0, playerPos – 5);
break;
case ‘d’:
case ‘arrowright’:
playerPos = Math.min(95, playerPos + 5);
break;
}
});

// Controles táctiles para dispositivos móviles
let touchStartX = 0;

gameArea.addEventListener(‘touchstart’, (e) => {
if (!gameRunning) return;
touchStartX = e.touches[0].clientX;
});

gameArea.addEventListener(‘touchmove’, (e) => {
if (!gameRunning) return;
e.preventDefault();

const touchX = e.touches[0].clientX;
const gameAreaRect = gameArea.getBoundingClientRect();
const gameAreaWidth = gameAreaRect.width;

// Calcular nueva posición basada en el toque
const relativeX = touchX – gameAreaRect.left;
const newPos = (relativeX / gameAreaWidth) * 100;

playerPos = Math.max(0, Math.min(95, newPos));
});

// Event Listeners para botones
document.getElementById(‘startBtn’).addEventListener(‘click’, startGame);
document.getElementById(‘pauseBtn’).addEventListener(‘click’, pauseGame);
document.getElementById(‘resetBtn’).addEventListener(‘click’, resetGame);

// Inicializar juego
resetGame();
</script>
</body>
</html>