{"id":14235,"date":"2026-05-29T14:58:02","date_gmt":"2026-05-29T12:58:02","guid":{"rendered":"https:\/\/avila.datasystem.es\/?p=14235"},"modified":"2026-05-29T18:19:15","modified_gmt":"2026-05-29T16:19:15","slug":"crear-adivinanza-javascript","status":"publish","type":"post","link":"https:\/\/avila.datasystem.es\/en\/crear-adivinanza-javascript\/","title":{"rendered":"C\u00f3mo crear una adivinanza con JavaScript paso a paso"},"content":{"rendered":"

JavaScript es un lenguaje extremadamente popular hoy en d\u00eda para el desarrollo web. Esto nos permite de una manera muy sencilla aplicar interactividad y dinamismo en nuestras p\u00e1ginas web. La mejor forma de empezar en programaci\u00f3n es con proyectos peque\u00f1os y que funcionen, como juegos o acertijos.
En este tutorial, crear\u00e1s un acertijo con javascript paso a paso usando html, css y javascript. Adem\u00e1s de la l\u00f3gica de programaci\u00f3n, tambi\u00e9n practicar\u00e1s trabajar con eventos, validaciones y manipulaci\u00f3n del DOM. Este es un ejercicio sencillo para estudiantes y principiantes en desarrollo web, te ense\u00f1amos a crear una adivinanza con JavaScript.<\/p>\n\n\n

\n
\"C\u00f3digo<\/figure>\n<\/div>\n\n\n

Crear la estructura HTML<\/h2>\n\n\n\n

El primer paso consiste en crear la estructura principal de nuestra aplicaci\u00f3n web utilizando HTML.
Aqu\u00ed definiremos:<\/p>\n\n\n\n

    \n
  • El t\u00edtulo de la adivinanza.<\/li>\n\n\n\n
  • El campo donde el usuario escribir\u00e1 la respuesta.<\/li>\n\n\n\n
  • Los botones de comprobaci\u00f3n e intento.<\/li>\n\n\n\n
  • El mensaje de resultado.<\/li>\n<\/ul>\n\n\n\n

    Tambi\u00e9n a\u00f1adiremos los enlaces correspondientes a los archivos CSS y JavaScript para conectar todos los elementos del proyecto.<\/p>\n\n\n\n

    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>adivinanza<\/title>\n    <link rel="stylesheet" href="adivinanza.css">\n    <script src="adivinanza.js" defer><\/script>\n<\/head>\n\n<body>\n\n<section>\n\n<div class="general">\n\n<h2>Adivinanza<\/h2>\n\n<p>hola<\/p>\n\n<div>\n<input type="text" id="respuesta">\n<button id="comprobar">comprobar<\/button>\n<button id="intentar" disabled>volver a intentar<\/button>\n<\/div>\n\n<p class="mensaje"><\/p>\n\n<\/div>\n\n<\/section>\n\n<\/body>\n<\/html><\/code><\/pre>\n\n\n
    \n
    \"Estructura<\/figure>\n<\/div>\n\n\n
    A\u00f1adir estilos CSS<\/h2>\n\n\n\n
    Una vez creada la estructura HTML, el siguiente paso consiste en aplicar estilos CSS para mejorar la apariencia visual del proyecto. Podemos personalizar colores, tama\u00f1os, m\u00e1rgenes y alineaciones seg\u00fan nuestras preferencias.<\/p>\n\n\n\n
    En este ejemplo utilizaremos un dise\u00f1o sencillo y limpio para centrar la atenci\u00f3n en el funcionamiento de la adivinanza.<\/p>\n\n\n\n
    *{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nsection{\n\n.general{\n    width: 600px;\n    padding: 10px;\n    margin: auto;\n    margin-top: 30px;\n    background-color: rgb(203, 132, 0);\n    border-radius: 10px;\n\nh2, p, div{\n    padding: 10px;\n    text-align: center;\n}\n\n}\n\n}<\/code><\/pre>\n\n\n\n
    Con estas reglas CSS conseguimos:<\/p>\n\n\n\n
      \n
    • Centrar el contenido.<\/li>\n\n\n\n
    • A\u00f1adir separaci\u00f3n entre elementos.<\/li>\n\n\n\n
    • Aplicar un fondo llamativo.<\/li>\n\n\n\n
    • Mejorar la visualizaci\u00f3n del ejercicio.<\/li>\n<\/ul>\n\n\n\n
      El dise\u00f1o puede personalizarse f\u00e1cilmente cambiando colores, tipograf\u00edas o tama\u00f1os.<\/p>\n\n\n\n
      \"Dise\u00f1o<\/figure>\n\n\n\n
      Programar la l\u00f3gica con JavaScript<\/h2>\n\n\n\n
      Ahora llega la parte m\u00e1s importante del proyecto: la programaci\u00f3n de la l\u00f3gica utilizando JavaScript.<\/p>\n\n\n\n
      Con este archivo conseguiremos:<\/p>\n\n\n\n
        \n
      • Detectar cu\u00e1ndo el usuario pulsa un bot\u00f3n.<\/li>\n\n\n\n
      • Validar respuestas.<\/li>\n\n\n\n
      • Mostrar mensajes din\u00e1micos.<\/li>\n\n\n\n
      • Controlar los intentos.<\/li>\n\n\n\n
      • Reiniciar la adivinanza.<\/li>\n<\/ul>\n\n\n\n
        Todo esto se realiza utilizando eventos y manipulaci\u00f3n del DOM.<\/p>\n\n\n\n
        document.querySelector(\"#comprobar\").addEventListener(\"click\", comprobar);\n\nfunction comprobar() {\n\n    let respuesta = document.querySelector(\"#respuesta\").value;\n    let intentos = 0;\n    let boton = document.querySelector(\"#intentar\");\n\n    if (!respuesta) {\n\n        alert('faltan datos');\n        return;\n\n    } else {\n\n        if (respuesta == \"hola\") {\n\n            document.querySelector(\".mensaje\").innerText = \"respuesta correcta\";\n            return;\n\n        } else {\n\n            if (intentos > 0) {\n\n                intentos--;\n\n                document.querySelector(\".mensaje\").innerText =\n                \"respuesta incorrecta, tienes \" + intentos + \" intentos\";\n\n                boton.disabled = false;\n\n                document.querySelector(\"#intentar\")\n                .addEventListener(\"click\", intentar);\n\n                function intentar() {\n\n                    document.querySelector(\"#respuesta\").value = \"\";\n\n                }\n\n            } else {\n\n                document.querySelector(\".mensaje\").innerText =\n                \"no tienes mas intentos\";\n\n                document.querySelector(\"#comprobar\").disabled = true;\n\n            }\n\n        }\n\n    }\n\n}<\/code><\/pre>\n\n\n\n
        El c\u00f3digo JavaScript se encarga de controlar todo el funcionamiento de la aplicaci\u00f3n. Algunas funciones importantes son:<\/p>\n\n\n\n
          \n
        • addEventListener()<\/code> \u2192 Detecta clics en botones.<\/li>\n\n\n\n
        • querySelector()<\/code> \u2192 Permite seleccionar elementos HTML.<\/li>\n\n\n\n
        • innerText<\/code> \u2192 Modifica mensajes din\u00e1micamente.<\/li>\n\n\n\n
        • disabled<\/code> \u2192 Activa o desactiva botones.<\/li>\n<\/ul>\n\n\n\n
          Este tipo de ejercicios ayuda mucho a entender la l\u00f3gica b\u00e1sica de programaci\u00f3n.<\/p>\n\n\n
          \n
          \"C\u00f3digo<\/figure>\n<\/div>\n\n\n
          Posibles mejoras para el proyecto<\/h2>\n\n\n\n
          Una vez funcionando la adivinanza b\u00e1sica, puedes a\u00f1adir nuevas funcionalidades para hacer el proyecto m\u00e1s completo:<\/p>\n\n\n\n
            \n
          • Sistema de puntuaci\u00f3n.<\/li>\n\n\n\n
          • Temporizador.<\/li>\n\n\n\n
          • Varias preguntas.<\/li>\n\n\n\n
          • Dise\u00f1o responsive.<\/li>\n\n\n\n
          • Sonidos y animaciones.<\/li>\n\n\n\n
          • Guardado de resultados.<\/li>\n<\/ul>\n\n\n\n
            Este tipo de mejoras son ideales para seguir practicando JavaScript y desarrollo web.<\/p>\n\n\n
            \n
            \"\"<\/figure>\n<\/div>\n\n\n
            Aprender JavaScript creando proyectos reales<\/h2>\n\n\n\n
            Crear peque\u00f1os proyectos como una adivinanza es una excelente forma de aprender JavaScript de manera pr\u00e1ctica. Adem\u00e1s de mejorar la l\u00f3gica de programaci\u00f3n, tambi\u00e9n permite comprender c\u00f3mo interact\u00faan HTML, CSS y JavaScript en una aplicaci\u00f3n web real.
            Con ejercicios sencillos como este podr\u00e1s avanzar poco a poco hacia proyectos m\u00e1s completos y profesionales.<\/p>\n\n\n\n
            \n