272 lines
13 KiB
HTML
272 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Juego del Impostor - Juego de Rol Gratis Online | Encuentra al Impostor</title>
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="Juego del Impostor: un emocionante juego de rol social gratuito para 3-10 jugadores. Descubre quién es el impostor antes de que sea tarde. Sin descargas, juega desde el navegador.">
|
|
<meta name="keywords" content="juego del impostor, impostor game, juego de rol, juego social, juego gratis, juego online, juego de palabras, juego de deducción, juego para fiestas, juego multijugador, among us estilo">
|
|
<meta name="author" content="Darío Sevilla">
|
|
<meta name="robots" content="index, follow">
|
|
<meta name="theme-color" content="#1a1a2e">
|
|
<link rel="canonical" href="https://impostor.dariosevilla.es/">
|
|
<link rel="alternate" hreflang="es" href="https://impostor.dariosevilla.es/">
|
|
<link rel="alternate" hreflang="en" href="https://impostor.dariosevilla.es/?lang=en">
|
|
<link rel="alternate" hreflang="x-default" href="https://impostor.dariosevilla.es/">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://impostor.dariosevilla.es/">
|
|
<meta property="og:title" content="Juego del Impostor - Juego de Rol Social Gratis">
|
|
<meta property="og:description" content="¿Podrás descubrir quién es el impostor? Juego de deducción social gratuito para 3-10 jugadores. Sin descargas, juega directamente en tu navegador.">
|
|
<meta property="og:image" content="https://impostor.dariosevilla.es/og-image.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:locale" content="es_ES">
|
|
<meta property="og:locale:alternate" content="en_US">
|
|
<meta property="og:site_name" content="Juego del Impostor">
|
|
|
|
<!-- Twitter Card -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:url" content="https://impostor.dariosevilla.es/">
|
|
<meta name="twitter:title" content="Juego del Impostor - Juego de Rol Social Gratis">
|
|
<meta name="twitter:description" content="¿Podrás descubrir quién es el impostor? Juego de deducción social para 3-10 jugadores. Sin descargas.">
|
|
<meta name="twitter:image" content="https://impostor.dariosevilla.es/og-image.png">
|
|
|
|
<!-- Additional SEO -->
|
|
<meta name="application-name" content="Juego del Impostor">
|
|
<meta name="apple-mobile-web-app-title" content="Impostor">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="format-detection" content="telephone=no">
|
|
|
|
<!-- Structured Data JSON-LD -->
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "WebApplication",
|
|
"name": "Juego del Impostor",
|
|
"alternateName": "The Impostor Game",
|
|
"description": "Juego de rol social gratuito donde los jugadores deben descubrir quién es el impostor usando pistas y deducción.",
|
|
"url": "https://impostor.dariosevilla.es/",
|
|
"applicationCategory": "GameApplication",
|
|
"operatingSystem": "Web Browser",
|
|
"offers": {
|
|
"@type": "Offer",
|
|
"price": "0",
|
|
"priceCurrency": "EUR"
|
|
},
|
|
"author": {
|
|
"@type": "Person",
|
|
"name": "Darío Sevilla",
|
|
"url": "https://dariosevilla.es"
|
|
},
|
|
"inLanguage": ["es", "en"],
|
|
"genre": ["Party Game", "Social Deduction", "Word Game"],
|
|
"numberOfPlayers": {
|
|
"@type": "QuantitativeValue",
|
|
"minValue": 3,
|
|
"maxValue": 10
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600;700&family=Courier+Prime:wght@400;700&family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.2e5df802.css">
|
|
<link rel="icon" type="image/png" href="logo.78f51359.png">
|
|
<link rel="sitemap" type="application/xml" href="/www/sitemap.xml">
|
|
<link rel="stylesheet" href="styles.2e5df802.css">
|
|
<link rel="icon" type="image/png" href="logo.78f51359.png">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<meta name="theme-color" content="#ff4444">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="apple-mobile-web-app-title" content="Impostor">
|
|
<link rel="apple-touch-icon" href="logo.78f51359.png">
|
|
<script defer src="https://analytics.dariosevilla.es/script.js" data-website-id="0520a008-d309-477f-9742-b4a674ac42eb"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Cinematic overlays -->
|
|
<div class="vignette-overlay"></div>
|
|
<div class="vhs-line"></div>
|
|
|
|
<button id="theme-toggle" class="theme-toggle" aria-label="Cambiar tema">
|
|
<span class="theme-icon">🌙</span>
|
|
</button>
|
|
|
|
<button id="language-toggle" class="language-toggle" aria-label="Change language">
|
|
<span class="language-icon">🌐</span>
|
|
<span class="language-text">EN</span>
|
|
</button>
|
|
|
|
<button id="screen-lock-toggle" class="screen-lock-toggle" aria-label="Screen lock" title="Bloqueo de pantalla">
|
|
<span class="screen-lock-icon">🔓</span>
|
|
</button>
|
|
|
|
<button id="exit-game" class="exit-game" onclick="confirmExitGame()">
|
|
<span class="exit-icon">🚪</span>
|
|
<span class="exit-text" data-i18n="exitGame">Salir de la partida</span>
|
|
</button>
|
|
|
|
<div class="container">
|
|
<!-- Welcome screen -->
|
|
<div id="welcome-screen" class="screen active">
|
|
<div class="welcome-content">
|
|
<img src="logo.78f51359.png" alt="Logo" class="welcome-logo">
|
|
<h1 class="welcome-title">Juego del Impostor</h1>
|
|
<p class="welcome-subtitle">¿Podrás descubrir quién es el impostor?</p>
|
|
<div class="welcome-buttons">
|
|
<button onclick="showScreen('setup-screen')" class="btn-primary">Jugar</button>
|
|
<button onclick="showScreen('rules-screen')" class="btn-secondary">Reglas</button>
|
|
</div>
|
|
<p class="welcome-credits">Creado por Darío Sevilla</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rules screen 1 -->
|
|
<div id="rules-screen" class="screen">
|
|
<h1>Reglas del Juego</h1>
|
|
<div class="rule-section">
|
|
<h3>Objetivo</h3>
|
|
<p>Los <strong>civiles</strong> deben identificar a los <strong>impostores</strong> antes de que termine el tiempo.</p>
|
|
</div>
|
|
<div class="rule-section">
|
|
<h3>Preparación</h3>
|
|
<p>1. Cada jugador recibe una palabra secreta</p>
|
|
<p>2. Los civiles reciben la misma palabra</p>
|
|
<p>3. Los impostores reciben una palabra diferente</p>
|
|
</div>
|
|
<button onclick="showScreen('rules-screen-2')">Siguiente →</button>
|
|
<button class="ghost" onclick="showScreen('welcome-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Rules screen 2 -->
|
|
<div id="rules-screen-2" class="screen">
|
|
<h1>Reglas del Juego</h1>
|
|
<div class="rule-section">
|
|
<h3>Partida</h3>
|
|
<p>1. Por turnos, da un sinónimo de tu palabra</p>
|
|
<p>2. Sé específico pero no reveles tu palabra</p>
|
|
<p>3. Los impostores deben pasar desapercibidos</p>
|
|
</div>
|
|
<div class="rule-section">
|
|
<h3>Votación</h3>
|
|
<p>1. Tras deliberar, vota en secreto</p>
|
|
<p>2. Los más votados son eliminados</p>
|
|
<p>3. Civiles ganan si eliminan a todos los impostores</p>
|
|
</div>
|
|
<button onclick="showScreen('welcome-screen')">Entendido ✓</button>
|
|
<button class="ghost" onclick="showScreen('rules-screen')">← Atrás</button>
|
|
</div>
|
|
|
|
<!-- Setup screen -->
|
|
<div id="setup-screen" class="screen">
|
|
<h1>Configuración</h1>
|
|
<div class="form-group compact">
|
|
<label for="num-players">Jugadores:</label>
|
|
<input type="number" id="num-players" min="3" max="10" value="6">
|
|
</div>
|
|
<div class="form-group compact">
|
|
<label for="num-impostors">Impostores:</label>
|
|
<input type="number" id="num-impostors" min="1" max="5" value="2">
|
|
</div>
|
|
<div class="form-group compact">
|
|
<label for="game-time">Tiempo de partida (seg):</label>
|
|
<input type="number" id="game-time" min="60" max="900" step="30" value="510">
|
|
</div>
|
|
<div class="form-group compact">
|
|
<label for="deliberation-time">Deliberación (seg):</label>
|
|
<input type="number" id="deliberation-time" min="30" max="300" step="10" value="170">
|
|
</div>
|
|
<button onclick="goToPools()">Siguiente</button>
|
|
<button class="ghost" onclick="showScreen('welcome-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Pools selection screen -->
|
|
<div id="pools-screen" class="screen">
|
|
<h1>Selección de Pools</h1>
|
|
<p class="info-text">Toca para seleccionar las categorías de palabras que quieres usar en la partida.</p>
|
|
<div class="pool-buttons-wrapper">
|
|
<div id="pool-buttons" class="pool-buttons"></div>
|
|
</div>
|
|
<button onclick="goToNames()">Siguiente</button>
|
|
<button class="ghost" onclick="showScreen('setup-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Player names screen -->
|
|
<div id="names-screen" class="screen">
|
|
<h1>Nombres de jugadores</h1>
|
|
<div class="player-names-list" id="player-names-list"></div>
|
|
<button onclick="startGame()">Comenzar partida</button>
|
|
<button class="ghost" onclick="showScreen('pools-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Pre-reveal screen -->
|
|
<div id="pre-reveal-screen" class="screen">
|
|
<h1>Listo para revelar</h1>
|
|
<div class="info-text" id="config-summary"></div>
|
|
<p class="info-text">Cada jugador debe ver su rol en secreto. Desliza la cortina hacia arriba para revelar.</p>
|
|
<button onclick="showScreen('reveal-screen'); loadCurrentReveal();">Empezar revelación</button>
|
|
<button class="ghost" onclick="showScreen('names-screen')">← Volver</button>
|
|
</div>
|
|
|
|
<!-- Revelation screen -->
|
|
<div id="reveal-screen" class="screen">
|
|
<h1>Revelación</h1>
|
|
<p class="info-text">Turno de: <strong><span id="current-player-name">Jugador 1</span></strong><br><small>Los demás, no miréis. Mantén levantada la cortina para ver tu rol.</small></p>
|
|
<div class="curtain" id="curtain">
|
|
<div class="curtain-cover" id="curtain-cover">
|
|
<div class="curtain-icon">▲</div>
|
|
<div>LEVANTA LA CORTINA</div>
|
|
</div>
|
|
<div class="curtain-content">
|
|
<div class="role" id="role-text"></div>
|
|
<div class="word" id="word-text"></div>
|
|
</div>
|
|
</div>
|
|
<button id="next-player-btn" style="display:none;" onclick="nextReveal()">Siguiente jugador →</button>
|
|
<button id="start-game-btn" style="display:none;" onclick="startGamePhase()">¡Iniciar partida!</button>
|
|
</div>
|
|
|
|
<!-- Game screen -->
|
|
<div id="game-screen" class="screen">
|
|
<h1>Partida en curso</h1>
|
|
<p class="info-text">A decir sinónimos!</p>
|
|
<div class="timer" id="game-timer">3:00</div>
|
|
<button class="secondary" onclick="skipToDeliberation()">Saltar a deliberación →</button>
|
|
</div>
|
|
|
|
<!-- Deliberation screen -->
|
|
<div id="deliberation-screen" class="screen">
|
|
<h1>Deliberación</h1>
|
|
<p class="info-text">Últimos argumentos antes de votar.</p>
|
|
<div class="timer" id="deliberation-timer">1:00</div>
|
|
<button class="secondary" onclick="skipToVoting()">Ir a votación →</button>
|
|
</div>
|
|
|
|
<!-- Voting screen -->
|
|
<div id="voting-screen" class="screen">
|
|
<h1>Votación secreta</h1>
|
|
<p class="info-text">Pasa el móvil a <strong id="voter-name">Jugador</strong>. Elige <span id="votes-needed">1</span> sospechoso(s).</p>
|
|
<div class="player-list" id="vote-list"></div>
|
|
<button id="confirm-vote-btn" disabled onclick="confirmCurrentVote()">Confirmar voto</button>
|
|
</div>
|
|
|
|
<!-- Results screen -->
|
|
<div id="results-screen" class="screen">
|
|
<h1>Resultados</h1>
|
|
<div class="results" id="results-content"></div>
|
|
<button onclick="newMatch()">Nueva partida</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.c9dd22de.js"></script>
|
|
</body>
|
|
</html>
|
|
|