Quiniela aleatoria. Un ejercicio básico con JavaScript

Tabla de contenido

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Como hoy tengo la noche JavaScript, voy a colgar otro pequeño programa, al que le faltan algunas cosillas para funcionar correctamente. El programa (por llamarlo de alguna forma) realiza una selección aleatoria para rellenar una quiniela de fútbol con sus repectivas variables X, 1 y 2.

El programa rellena correctamente las 14 casillas y el pleno al 15 de manera aleatoria cada vez que se pulsa el botón «Volver a generar resultados«. Para que la cosa no resultase tan aburrida pues he generado también un array con «supuestos» equipos de fútbol para repartirlos también de manera aleatoria en la quiniela.

Los equipos no se repiten cada vez que se genera una nueva quiniela. Que esto era lo que le faltaba en la anterior versión de este ejercicio.

Ejercicio básico JavaScript con el que crear una quiniela de fútbol aleatoria

Index.html

En el archivo index.html, vamos a crear el marco en el que se va a mostrar la quiniela. Además desde aquí vamos a llamar al archivo .css y al archivo .js para que todo funcione y se va de la misma forma que en la anterior captura de pantalla.

<!DOCTYPE html>
<html>
<head>
  <title>Quiniela de Fútbol</title>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
  <h1 style="text-align: center;">Quiniela de Fútbol Aleatoria</h1>
  
  <div class="quiniela" id="resultados">
    <h2 class="cabecera">Partidos</h2>
  </div>
  
  <button id="generarButton">Generar quiniela</button>
  
  <script src="quiniela.js"></script>
</body>
</html>

style.css

En este archivo .css vamos a añadir algunas reglas css para darle un poco de estilo a la quiniela:

body {
    font-family: Arial, sans-serif;
  }
  .quiniela {
    width: 15%;
    margin: 0 auto;
    padding: 20px;
    border: 2px solid #ccc;
    background-color: #f5f5f5;
  }
  .partido {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .equipo {
    flex: 1;
  }
  .resultado {
    width: 50px;
    text-align: center;
    font-weight: bold;
  }
  .cabecera {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .pleno {
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    background-color: #ff0707;
    padding: 5px;
  }
  button {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    font-size: 16px;
  }

quiniela.js

En este archivo .js, será en el que vamos a guardar la lógica del programa. Espero que los comentarios añadidos dejen claro que hace cada fragmento de código:

// Definición de los equipos disponibles
const equipos = [
  "Equipo A", "Equipo B", "Equipo C", "Equipo D", "Equipo E",
  "Equipo F", "Equipo G", "Equipo H", "Equipo I", "Equipo J",
  "Equipo K", "Equipo L", "Equipo M", "Equipo N", "Equipo O",
  "Equipo P", "Equipo Q", "Equipo R", "Equipo S", "Equipo T",
  "Equipo U", "Equipo V", "Equipo W", "Equipo X", "Equipo Y",
  "Equipo Z", "Equipo AA", "Equipo BB", "Equipo CC", "Equipo DD"
];

// Definición de los posibles resultados
const resultadosPosibles = ["1", "X", "2"];

// Variable para rastrear si se ha generado la quiniela
let quinielaGenerada = false;

// Función para generar una quiniela aleatoria
function generarQuiniela() {
  const equiposDisponibles = equipos.slice();
  const quiniela = [];

  for (let i = 1; i <= 15; i++) {
    const localIndex = Math.floor(Math.random() * equiposDisponibles.length);
    const local = equiposDisponibles[localIndex];
    equiposDisponibles.splice(localIndex, 1);

    const visitanteIndex = Math.floor(Math.random() * equiposDisponibles.length);
    const visitante = equiposDisponibles[visitanteIndex];
    equiposDisponibles.splice(visitanteIndex, 1);

    const resultado = resultadosPosibles[Math.floor(Math.random() * resultadosPosibles.length)];

    quiniela.push({ local: local, visitante: visitante, resultado: resultado });
  }

  quinielaGenerada = true;

  return quiniela;
}

// Función para mostrar la quiniela en la página
function mostrarQuiniela() {
  const resultadosDiv = document.getElementById("resultados");
  const quiniela = generarQuiniela();

  resultadosDiv.innerHTML = "";

  const divContenedor = document.createElement("div");

  // Crear la cabecera de la quiniela
  const divCabeceraPartidos = document.createElement("div");
  divCabeceraPartidos.classList.add("cabecera");

  // Crear elementos span para la cabecera
  const spanCabeceraPartidos = document.createElement("span");
  spanCabeceraPartidos.classList.add("cabecera-texto");
  spanCabeceraPartidos.textContent = "Partidos     ";

  const spanCabeceraSeparador = document.createElement("span");
  spanCabeceraSeparador.classList.add("cabecera-separador");
  spanCabeceraSeparador.textContent = " - ";

  const spanCabeceraResultados = document.createElement("span");
  spanCabeceraResultados.classList.add("cabecera-texto");
  spanCabeceraResultados.textContent = "Resultados";

  // Agregar los elementos span a la cabecera
  divCabeceraPartidos.appendChild(spanCabeceraPartidos);
  divCabeceraPartidos.appendChild(spanCabeceraSeparador);
  divCabeceraPartidos.appendChild(spanCabeceraResultados);

  // Agregar la cabecera al contenedor
  divContenedor.appendChild(divCabeceraPartidos);

  // Iterar a través de los partidos de la quiniela
  quiniela.forEach((partido, index) => {
    const divPartido = document.createElement("div");
    divPartido.classList.add("partido");

    const spanPartido = document.createElement("span");
    spanPartido.textContent = `${index + 1}. ${partido.local} vs ${partido.visitante}`;
    divPartido.appendChild(spanPartido);

    // Agregar el pleno al 15 si corresponde
    if (index === 14) {
      const divPleno = document.createElement("div");
      divPleno.classList.add("pleno");
      divPleno.textContent = "Pleno al 15";
      divContenedor.appendChild(divPleno);
    }

    // Agregar una línea separadora entre los partidos
    if (index < 14) {
      divContenedor.appendChild(document.createElement("hr"));
    }

    // Crear el contenedor para el resultado
    const divResultado = document.createElement("div");
    divResultado.classList.add("resultado-contenedor");

    // Crear el elemento span para mostrar el resultado
    const spanResultado = document.createElement("span");
    spanResultado.classList.add("resultado");
    spanResultado.textContent = partido.resultado;

    // Agregar el resultado al contenedor
    divResultado.appendChild(spanResultado);

    // Agregar el separador entre el partido y el resultado
    divPartido.appendChild(document.createTextNode("     -     "));
    divPartido.appendChild(divResultado);
    divContenedor.appendChild(divPartido);
  });

  // Agregar el contenedor de la quiniela al elemento resultadosDiv
  resultadosDiv.appendChild(divContenedor);

  // Actualizar el texto del botón
  const generarButton = document.getElementById("generarButton");
  generarButton.textContent = "Generar de nuevo";
}

// Obtener el botón y agregar un evento de clic
const generarButton = document.getElementById("generarButton");
generarButton.addEventListener("click", function () {
  if (quinielaGenerada) {
    mostrarQuiniela();
  } else {
    generarQuiniela();
    mostrarQuiniela();
  }
});

Y bueno, con esto tendremos disponible una quiniela de fútbol como se hacía en tiempos. Creo que a día de hoy hay más variables que deberían considerarse. Pero como cuando hice este ejercicio por primera vez se hacía así … así se queda.

Este ejercicio no lo voy a subir a la sección de ejemplos, al menos por el momento, ya que ahora mismo no tengo tiempo. Quizás en algún momento lo ponga, pero vamos, que si alguien quiere probarlo, solo tiene que pegar los código aquí mostrados en su correspondiente archivo.