Pasapalabra de la Tierra

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Pasapalabra de la Tierra</title>
<style>
body {
  font-family: Arial;
  text-align: center;
  background: #dff3ff;
  padding: 20px;
}
h1 { color: #0879a8; }
#letra {
  font-size: 50px;
  color: #0879a8;
  font-weight: bold;
}
button, input {
  padding: 12px;
  margin: 6px;
  font-size: 18px;
  border-radius: 10px;
}
button {
  background: #0879a8;
  color: white;
  border: none;
  cursor: pointer;
}
#juego {
  background: white;
  padding: 25px;
  border-radius: 20px;
  max-width: 550px;
  margin: auto;
}
</style>
</head>
<body>

<h1>🌍 Pasapalabra: La Tierra</h1>

<div id="juego">
  <div id="letra">A</div>
  <p id="pregunta"></p>
  <input id="respuesta" placeholder="Escribe tu respuesta">
  <br>
  <button onclick="comprobar()">Responder</button>
  <button onclick="pasar()">Pasapalabra</button>
  <p id="mensaje"></p>
  <h3 id="puntos">Puntos: 0</h3>
  <button onclick="reiniciar()">Volver a jugar</button>
</div>

<script>
let preguntas = [
["A","Gases que rodean la Tierra","atmósfera"],
["B","Roca espacial que cae a la Tierra","meteorito"],
["C","Capa exterior sólida de la Tierra","corteza"],
["D","Lugar muy seco donde casi no llueve","desierto"],
["E","Estrella que ilumina la Tierra","estrella"],
["F","Proceso de origen de la Tierra","formación"],
["G","Conjunto de estrellas y planetas","galaxia"],
["H","Contiene la H: temperatura elevada","calor"],
["I","Roca fundida bajo la superficie","magma"],
["J","Periodo de los dinosaurios","jurásico"],
["K","Mil metros","kilómetro"],
["L","Satélite natural de la Tierra","luna"],
["M","Capa terrestre bajo la corteza","manto"],
["N","Parte central de la Tierra","núcleo"],
["Ñ","Periodo de mil años","milenio"],
["O","Gran masa de agua salada","océano"],
["P","Conjunto de planetas que orbitan el Sol","sistema solar"],
["Q","Ciencia que estudia la materia","química"],
["R","Movimiento de un planeta alrededor del Sol","órbita"],
["S","Estrella del sistema solar","sol"],
["T","Planeta en el que vivimos","tierra"],
["U","Todo lo que existe en el espacio","universo"],
["V","Galaxia donde está el sistema solar","vía láctea"],
["W","Letra inicial de una palabra inglesa para roca","weathering"],
["X","Contiene la X: fuerza que atrae los objetos","fuerza gravitatoria"],
["Y","Contiene la Y: material que sale de un volcán","lava"],
["Z","Contiene la Z: conjunto de seres vivos y su entorno","ecosistema"]
];

let actual = 0;
let puntos = 0;
let contestadas = [];

function mostrar() {
  if (actual >= preguntas.length) {
    document.getElementById("letra").textContent = "🏆";
    document.getElementById("pregunta").textContent =
      "¡Juego terminado!";
    document.getElementById("respuesta").style.display = "none";
    document.getElementById("puntos").textContent =
      "Resultado: " + puntos + " puntos de " + preguntas.length;
    return;
  }

  document.getElementById("letra").textContent =
    preguntas[actual][0];
  document.getElementById("pregunta").textContent =
    preguntas[actual][1];
  document.getElementById("respuesta").value = "";
  document.getElementById("mensaje").textContent = "";
}

function comprobar() {
  let respuesta = document.getElementById("respuesta")
    .value.trim().toLowerCase()
    .normalize("NFD").replace(/[\u0300-\u036f]/g, "");

  let correcta = preguntas[actual][2]
    .toLowerCase().normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "");

  if (respuesta === correcta) {
    puntos++;
    document.getElementById("mensaje").textContent =
      "¡Correcto! 🎉";
  } else {
    document.getElementById("mensaje").textContent =
      "La respuesta era: " + preguntas[actual][2];
  }

  document.getElementById("puntos").textContent =
    "Puntos: " + puntos;
  actual++;
  setTimeout(mostrar, 1200);
}

function pasar() {
  actual++;
  mostrar();
}

function reiniciar() {
  actual = 0;
  puntos = 0;
  document.getElementById("respuesta").style.display = "inline";
  document.getElementById("puntos").textContent = "Puntos: 0";
  mostrar();
}

mostrar();
</script>

</body>
</html>
Cómo usarlo
Pulsa el botón de copiar del bloque de código.

Abre 
ArcadeLab .

Pega el código en el editor HTML, si permite introducir código completo.

Abre la vista previa para jugar.

Nota: algunas respuestas de las letras W, X e Y son difíciles o no encajan perfectamente con la pista. Si es para utilizarlo en clase, puedo hacer una versión todavía más sencilla con preguntas científicas correctas y sin letras complicadas.


Tú dijiste:
hazlo que aparezca un circulo como en la tele y mejorandolo

ChatGPT Plus
¡Vamos a mejorarlo! 🌍🎉 Te he preparado un Pasapalabra con un rosco circular como el de la televisión, colores llamativos, preguntas, marcador de puntos y botones grandes para jugar en clase.

Copia todo el código de abajo y pégalo en ArcadeLab.

Pasapalabra: El origen de la Tierra
html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pasapalabra del Universo</title>
<style>
*{box-sizing:border-box}
body{
  margin:0;font-family:Arial,sans-serif;text-align:center;
  background:linear-gradient(#10245b,#0879a8);
  color:white;padding:20px
}
h1{color:#ffe45e;font-size:clamp(25px,5vw,40px)}
#rosco{
  position:relative;width:min(88vw,440px);
  height:min(88vw,440px);margin:20px auto
}
.letra{
  position:absolute;width:42px;height:42px;
  border:3px solid white;border-radius:50%;
  background:#174ec6;color:white;font-weight:bold;
  font-size:17px;display:flex;align-items:center;
  justify-content:center;transform:translate(-50%,-50%)
}
.letra.activa{background:#ffdc35;color:#142451;box-shadow:0 0 15px #fff}
.letra.bien{background:#22b96b;color:white}
.letra.mal{background:#ed4545;color:white}
#centro{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:52%;font-size:clamp(14px,3vw,20px);
  font-weight:bold;color:#ffe45e
}
.panel{
  max-width:600px;margin:15px auto;padding:22px;
  background:white;color:#17284a;border-radius:22px
}
#pregunta{font-size:20px;min-height:55px;line-height:1.4}
input{
  width:95%;padding:13px;border:2px solid #9ab6df;
  border-radius:10px;font-size:18px;margin:10px 0
}
button{
  border:0;border-radius:12px;padding:12px 18px;
  margin:5px;font-size:16px;font-weight:bold;cursor:pointer
}
.responder{background:#0879c9;color:white}
.pasar{background:#ffdc35;color:#17284a}
.reiniciar{background:#dce8f8;color:#17284a}
#mensaje{font-weight:bold;min-height:25px}
#marcador{font-size:19px;font-weight:bold}
</style>
</head>
<body>

<h1>🌍 PASAPALABRA CÓSMICO 🚀</h1>
<p>¡Descubre cómo se formó nuestro planeta!</p>

<div id="rosco">
  <div id="centro">🌎<br>EL ORIGEN<br>DE LA TIERRA</div>
</div>

<div class="panel">
  <div id="marcador">⭐ Puntos: 0 | Pendientes: 27</div>
  <h2 id="titulo">Letra A</h2>
  <p id="pregunta"></p>
  <input id="respuesta" placeholder="Escribe tu respuesta"
    autocomplete="off">
  <br>
  <button class="responder" onclick="comprobar()">Responder ✓</button>
  <button class="pasar" onclick="pasar()">Pasapalabra ➜</button>
  <p id="mensaje" aria-live="polite"></p>
  <button class="reiniciar" onclick="reiniciar()">🔄 Volver a jugar</button>
</div>

<script>
const datos=[
["A","Gases que rodean nuestro planeta","atmósfera"],
["B","Roca espacial que llega a la superficie terrestre","meteorito"],
["C","Capa sólida más externa de la Tierra","corteza"],
["D","Lugar muy seco donde apenas llueve","desierto"],
["E","Astro que produce luz y calor, como el Sol","estrella"],
["F","Proceso por el que se originó nuestro planeta","formación"],
["G","Enorme conjunto de estrellas, gas y polvo","galaxia"],
["H","Contiene la H: temperatura muy elevada","calor"],
["I","Roca fundida que sale de un volcán","lava"],
["J","Periodo geológico famoso por los dinosaurios","jurásico"],
["K","Unidad equivalente a mil metros","kilómetro"],
["L","Satélite natural de la Tierra","luna"],
["M","Capa terrestre situada entre la corteza y el núcleo","manto"],
["N","Parte más central de nuestro planeta","núcleo"],
["Ñ","Contiene la Ñ: periodo de mil años","milenio"],
["O","Gran masa de agua salada","océano"],
["P","Cuerpo celeste que gira alrededor de una estrella","planeta"],
["Q","Ciencia que estudia la materia y sus transformaciones","química"],
["R","Movimiento de un planeta alrededor de una estrella","órbita"],
["S","Estrella que está en el centro de nuestro sistema","sol"],
["T","Planeta en el que vivimos","tierra"],
["U","Conjunto de todo lo que existe","universo"],
["V","Galaxia donde se encuentra nuestro sistema solar","vía láctea"],
["W","Contiene la W: unidad de potencia llamada también vatio","watt"],
["X","Contiene la X: roca fundida que hay bajo la superficie","magma"],
["Y","Contiene la Y: material fundido que expulsa un volcán","lava"],
["Z","Contiene la Z: zona del planeta donde hay vida","biosfera"]
];

let estado=Array(27).fill(0);
let actual=0,puntos=0;
const normal=s=>s.toLowerCase().normalize("NFD")
.replace(/[\u0300-\u036f]/g,"").trim().replace(/\s+/g," ");
const rosco=document.getElementById("rosco");

datos.forEach((d,i)=>{
  let b=document.createElement("div");
  b.className="letra";
  b.textContent=d[0];
  let angulo=(i*2*Math.PI/27)-Math.PI/2;
  let radio=45;
  b.style.left=(50+radio*Math.cos(angulo))+"%";
  b.style.top=(50+radio*Math.sin(angulo))+"%";
  b.id="l"+i;
  rosco.appendChild(b);
});

function siguiente(){
  let inicio=actual;
  while(estado[actual]!==0){
    actual=(actual+1)%27;
    if(actual===inicio){fin();return;}
  }
  mostrar();
}
function mostrar(){
  document.getElementById("titulo").textContent="Letra "+datos[actual][0];
  document.getElementById("pregunta").textContent=datos[actual][1];
  document.getElementById("respuesta").value="";
  document.getElementById("mensaje").textContent="";
  document.querySelectorAll(".letra").forEach(b=>b.classList.remove("activa"));
  document.getElementById("l"+actual).classList.add("activa");
  document.getElementById("marcador").textContent=
  "⭐ Puntos: "+puntos+" | Pendientes: "+estado.filter(x=>x===0).length;
}
function comprobar(){
  if(estado[actual]!==0)return;
  let r=normal(document.getElementById("respuesta").value);
  if(!r){document.getElementById("mensaje").textContent="¡Escribe una respuesta!";return;}
  if(r===normal(datos[actual][2])){
    estado[actual]=1;puntos++;
    document.getElementById("l"+actual).className="letra bien";
    document.getElementById("mensaje").textContent="¡Correcto! 🎉";
  }else{
    estado[actual]=2;
    document.getElementById("l"+actual).className="letra mal";
    document.getElementById("mensaje").textContent="Respuesta: "+datos[actual][2];
  }
  document.getElementById("respuesta").disabled=true;
  document.querySelector(".responder").disabled=true;
  document.querySelector(".pasar").disabled=true;
  document.getElementById("marcador").textContent=
  "⭐ Puntos: "+puntos+" | Pendientes: "+estado.filter(x=>x===0).length;
  setTimeout(()=>{
    document.getElementById("respuesta").disabled=false;
    document.querySelector(".responder").disabled=false;
    document.querySelector(".pasar").disabled=false;
    actual=(actual+1)%27;siguiente();
  },1200);
}
function pasar(){
  actual=(actual+1)%27;
  siguiente();
}
function fin(){
  document.getElementById("titulo").textContent="🏆 ¡Rosco terminado!";
  document.getElementById("pregunta").textContent=
  "Has conseguido "+puntos+" puntos de 27.";
  document.getElementById("respuesta").style.display="none";
  document.querySelector(".responder").style.display="none";
  document.querySelector(".pasar").style.display="none";
  document.getElementById("mensaje").textContent=
  puntos>=22?"¡Excelente, eres un experto del universo! 🌟":"¡Buen trabajo! Sigue aprendiendo y vuelve a jugar.";
}
function reiniciar(){
  estado=Array(27).fill(0);actual=0;puntos=0;
  document.getElementById("respuesta").style.display="inline-block";
  document.querySelector(".responder").style.display="inline-block";
  document.querySelector(".pasar").style.display="inline-block";
  document.getElementById("respuesta").disabled=false;
  document.querySelector(".responder").disabled=false;
  document.querySelector(".pasar").disabled=false;
  document.querySelectorAll(".letra").forEach(b=>b.className="letra");
  siguiente();
}
document.getElementById("respuesta").addEventListener("keydown",e=>{
  if(e.key==="Enter")comprobar();
});
siguiente();
</script>
</body>
</html>