🎮ArcadeLab

Parásito: Última Salida

by QuantumCaptain33
438 lines6.3 KB
▶ Play
¡Claro! Aquí tienes el código completo. Guárdalo como index.html y ábrelo con Chrome. Cada vez que pulses JUGAR, te tocará aleatoriamente 🧑 Humano o 🦠 Parásito.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Parásito: Última Salida</title>

<style>
*{box-sizing:border-box}

body{
  margin:0;
  background:#10131a;
  color:white;
  font-family:Arial,sans-serif;
  text-align:center;
}

.screen{
  max-width:900px;
  margin:auto;
  padding:24px;
}

h1{
  font-size:42px;
  margin:30px 0 10px;
}

button{
  border:0;
  border-radius:12px;
  padding:14px 20px;
  margin:6px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  background:#2d7cff;
  color:white;
}

.card{
  background:#1a1f2a;
  border:1px solid #303747;
  border-radius:18px;
  padding:24px;
  margin:15px 0;
}

.hidden{
  display:none;
}

.role{
  font-size:30px;
  margin:15px;
}

.human{
  color:#59b7ff;
}

.parasite{
  color:#ff5869;
}

.timer{
  font-size:30px;
  font-weight:bold;
}

.map{
  position:relative;
  height:480px;
  background:#202633;
  border:3px solid #596274;
  border-radius:18px;
  overflow:hidden;
  margin:20px auto;
  max-width:800px;
}

.room{
  position:absolute;
  border:2px solid #8b95a8;
  background:#293141;
  border-radius:10px;
  padding:12px;
  font-weight:bold;
}

.entrada{
  left:3%;
  top:4%;
  width:25%;
  height:23%;
}

.almacen{
  right:3%;
  top:4%;
  width:25%;
  height:23%;
}

.central{
  left:29%;
  top:31%;
  width:42%;
  height:30%;
}

.generador{
  left:3%;
  bottom:4%;
  width:29%;
  height:25%;
}

.control{
  right:3%;
  bottom:4%;
  width:29%;
  height:25%;
}

.player{
  position:absolute;
  font-size:32px;
  left:48%;
  top:44%;
}

#mensaje{
  min-height:45px;
  font-size:18px;
}
</style>
</head>

<body>

<!-- MENÚ -->
<div id="menu" class="screen">

<h1>🦠 PARÁSITO</h1>
<h2>ÚLTIMA SALIDA</h2>

<div class="card">

<p>¿Te tocará Humano o Parásito?</p>

<p>🧑 Los humanos deben completar tareas.</p>
<p>🦠 Los parásitos deben infectar.</p>

<button onclick="jugar()">▶️ JUGAR</button>

</div>
</div>


<!-- JUEGO -->
<div id="juego" class="screen hidden">

<h1>🏭 FÁBRICA ABANDONADA</h1>

<div id="rol" class="role"></div>

<div class="timer" id="tiempo">
7:00
</div>

<div class="map">

<div class="room entrada">
🚪 ENTRADA
</div>

<div class="room almacen">
🧰 ALMACÉN
<br>
<button onclick="tarea('Almacén')">
Hacer tarea
</button>
</div>

<div class="room central">
🏭 SALA CENTRAL
</div>

<div class="room generador">
⚡ GENERADOR
<br>
<button onclick="tarea('Generador')">
Activar
</button>
</div>

<div class="room control">
🖥️ CONTROL
<br>
<button onclick="tarea('Control')">
Revisar
</button>
</div>

<div id="jugador" class="player">
🧑
</div>

</div>

<div class="card">

<div id="mensaje">
Completa las tareas y prepárate para escapar.
</div>

<button onclick="mover()">
🚶 Mover
</button>

<button onclick="accion()">
⚡ Acción
</button>

<button onclick="pausar()">
⏸️ Pausa
</button>

</div>

</div>


<!-- PAUSA -->
<div id="pausa" class="screen hidden">

<h1>⏸️ PAUSA</h1>

<div class="card">

<button onclick="continuar()">
▶️ Continuar
</button>

<button onclick="location.reload()">
🚪 Salir
</button>

</div>

</div>


<script>

let rol="";
let segundos=420;
let tareas=0;
let intervalo;


function jugar(){

  rol=Math.random()<0.35 ? "parasito" : "humano";

  document.getElementById("menu")
  .classList.add("hidden");

  document.getElementById("juego")
  .classList.remove("hidden");

  let rolTexto=document.getElementById("rol");

  if(rol==="parasito"){

    rolTexto.textContent="🦠 TE TOCÓ PARÁSITO";
    rolTexto.className="role parasite";

    document.getElementById("jugador")
    .textContent="🦠";

    document.getElementById("mensaje")
    .textContent=
    "Infecta a los humanos antes de que escapen.";

  }else{

    rolTexto.textContent="🧑 TE TOCÓ HUMANO";
    rolTexto.className="role human";

    document.getElementById("jugador")
    .textContent="🧑";

    document.getElementById("mensaje")
    .textContent=
    "Completa 3 tareas y sobrevive.";

  }

  intervalo=setInterval(reloj,1000);
}


function reloj(){

  segundos--;

  let minutos=Math.floor(segundos/60);
  let segundosRestantes=segundos%60;

  document.getElementById("tiempo")
  .textContent=
  minutos+":"+
  String(segundosRestantes).padStart(2,"0");

  if(segundos===170){

    document.getElementById("mensaje")
    .textContent=
    "🚨 ¡ESCAPE FINAL! ¡La salida está abierta!";
  }

  if(segundos<=0){

    clearInterval(intervalo);

    document.getElementById("mensaje")
    .textContent=
    "⏰ ¡Se acabó el tiempo!";
  }
}


function tarea(nombre){

  if(rol==="humano"){

    tareas++;

    document.getElementById("mensaje")
    .textContent=
    "✅ Tarea completada en "+
    nombre+
    " ("+tareas+"/3)";

    if(tareas>=3){

      document.getElementById("mensaje")
      .textContent=
      "🚪 ¡Completaste las 3 tareas! Espera el Escape Final.";
    }

  }else{

    document.getElementById("mensaje")
    .textContent=
    "🦠 Los parásitos no hacen tareas.";
  }
}


function accion(){

  if(rol==="parasito"){

    document.getElementById("mensaje")
    .textContent=
    "🦠 ¡El parásito intentó infectar a alguien!";

  }else{

    if(segundos<=170 && tareas>=3){

      clearInterval(intervalo);

      document.getElementById("mensaje")
      .textContent=
      "🏆 ¡ESCAPASTE! ¡VICTORIA!";

    }else{

      document.getElementById("mensaje")
      .textContent=
      "🔎 Necesitas 3 tareas y el Escape Final.";
    }
  }
}


function mover(){

  let jugador=document.getElementById("jugador");

  jugador.style.left=
  (10+Math.random()*78)+"%";

  jugador.style.top=
  (10+Math.random()*75)+"%";

  document.getElementById("mensaje")
  .textContent=
  "🚶 Te moviste por la fábrica.";
}


function pausar(){

  clearInterval(intervalo);

  document.getElementById("juego")
  .classList.add("hidden");

  document.getElementById("pausa")
  .classList.remove("hidden");
}


function continuar(){

  document.getElementById("pausa")
  .classList.add("hidden");

  document.getElementById("juego")
  .classList.remove("hidden");

  intervalo=setInterval(reloj,1000);
}

</script>

</body>
</html>

Cómo usarlo: crea un archivo llamado index.html, pega todo el código, guárdalo y ábrelo con Chrome. 🎮

Game Source: Parásito: Última Salida

Creator: QuantumCaptain33

Libraries: none

Complexity: complex (438 lines, 6.3 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: par-sito-ltima-salida-quantumcaptain33" to link back to the original. Then publish at arcadelab.ai/publish.