

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mastermind Codebreaker - Simulación científica interactiva gratuita | Simulaciones Científicas</title>
    <meta name="description" content="Simulación científica interactiva para Mastermind Codebreaker - Simulación NGSS interactiva gratuita | Simulaciones Científicas. Explore y aprenda con esta atractiva herramienta educativa de secundaria alineada con NGSS.">
    <meta name="author" content="Nicklaus Cairns">
    
      <meta name="keywords" content="Lógica, Deducción, Mastermind, Codebreaker, Juego">
    
    <link rel="canonical" href="https://sciencesimulations.com/es/simulaciones/logica/mastermind/">
    <meta property="og:url" content="https://sciencesimulations.com/es/simulaciones/logica/mastermind/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Mastermind Codebreaker - Simulación científica interactiva gratuita | Simulaciones Científicas">
    <meta property="og:description" content="Simulación científica interactiva para Mastermind Codebreaker - Simulación NGSS interactiva gratuita | Simulaciones Científicas. Explore y aprenda con esta atractiva herramienta educativa de secundaria alineada con NGSS.">
    <meta property="og:locale" content="es_ES">
    <meta property="og:image" content="https://sciencesimulations.com/assets/images/og_previews/mastermind.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Mastermind Codebreaker - Simulación científica interactiva gratuita | Simulaciones Científicas">
    <meta name="twitter:description" content="Simulación científica interactiva para Mastermind Codebreaker - Simulación NGSS interactiva gratuita | Simulaciones Científicas. Explore y aprenda con esta atractiva herramienta educativa de secundaria alineada con NGSS.">
    <meta name="twitter:image" content="https://sciencesimulations.com/assets/images/og_previews/mastermind.png">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LearningResource",
        "name": "Mastermind Codebreaker - Simulación científica interactiva gratuita | Simulaciones Científicas",
        "description": "Simulación científica interactiva para Mastermind Codebreaker - Simulación NGSS interactiva gratuita | Simulaciones Científicas. Explore y aprenda con esta atractiva herramienta educativa de secundaria alineada con NGSS.",
        "url": "https://sciencesimulations.com/es/simulaciones/logica/mastermind/",
        "learningResourceType": "Simulación interactiva",
        "inLanguage": "es-419",
        "educationalLevel": "Escuela secundaria",
        "interactivityType": "active",
        "author": {
          "@type": "Person",
          "name": "Nicklaus Cairns",
          "url": "https://sciencesimulations.com"
        },
        "publisher": {
          "@type": "Person",
          "name": "Simulaciones científicas",
          "url": "https://sciencesimulations.com"
        }
      }
    </script>
    <link rel="preload" href="/assets/css/style.css?v=64b50b9b2157977608e5500c2f30811a13ec0cf8" as="style">
    <link rel="stylesheet" href="/assets/css/style.css?v=64b50b9b2157977608e5500c2f30811a13ec0cf8" fetchpriority="high">
    <link rel="stylesheet" href="/assets/css/nav.css?v=64b50b9b2157977608e5500c2f30811a13ec0cf8">
    <link rel="stylesheet" href="/assets/css/simulation-footer.css?v=64b50b9b2157977608e5500c2f30811a13ec0cf8">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">

<!-- Consent and Analytics Script -->
<script src="/assets/js/consent.js" defer></script>


    <style>
      html {
        height: 100%;
      }

      body.simulation-layout-body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0f172a;
        color: #f8fafc;
      }

      .simulation-layout-body > .site-nav {
        flex-shrink: 0;
      }

      .simulation-layout-main {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
      }

      .simulation-layout-footer {
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        border-top: 1px solid rgba(148, 163, 184, 0.25);
        background: #111827;
        color: #cbd5e1;
        font-size: 0.875rem;
      }

      .simulation-layout-footer p {
        margin: 0;
      }

      .simulation-layout-footer a {
        color: #93c5fd;
      }

      @media (max-width: 640px) {
        .simulation-layout-footer {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      .sim-task-cta {
        text-align: center;
        margin: 2.5rem 1rem 1.5rem;
      }

      .sim-task-button {
        display: inline-block;
        padding: 0.85rem 2.5rem;
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        color: #ffffff;
        border-radius: 12px;
        font-weight: 700;
        font-size: 1.1rem;
        text-decoration: none;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
      }

      .sim-task-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
      }
    </style>
  </head>
  <body class="simulation-layout-body bg-gray-100 font-sans text-gray-800 min-h-screen flex flex-col items-center py-8">
    <a href="#main-content" class="sr-only sr-only-focusable">
      Saltar al contenido principal
    </a>
    

<nav class="site-nav" id="site-nav" aria-label="Main navigation">
  <a href="https://sciencesimulations.com/es/" class="site-nav-brand">
    Simulaciones Científicas
  </a>

  <button class="site-nav-toggle" id="nav-toggle" aria-label="Alternar navegación" aria-expanded="false" aria-controls="nav-links">
    <svg viewBox="0 0 24 24">
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </button>

  <div class="site-nav-links" id="nav-links">
    
      <a href="https://sciencesimulations.com/es/simulaciones/" >Todas las simulaciones</a>
      <a href="https://sciencesimulations.com/es/tareas/" >Tareas</a>
      <a href="https://sciencesimulations.com/es/simulaciones/ciencias-fisicas/" >Ciencias físicas</a>
      <a href="https://sciencesimulations.com/es/simulaciones/ciencias-de-la-vida/" >Ciencias de la vida</a>
      <a href="https://sciencesimulations.com/es/simulaciones/ciencias-de-la-tierra-y-el-espacio/" >Tierra y Espacio</a>
      <a href="https://sciencesimulations.com/es/articulos/" >Artículos</a>
      <a href="https://sciencesimulations.com/en/ngss/" >Docs NGSS</a>
      <a href="https://sciencesimulations.com/es/#about">Acerca de</a>
    
    
    <div id="locale-switcher" class="site-locale-switcher" role="group" aria-label="Language switcher" data-slug-map-url="/assets/data/navbar-slug-map.json?v=64b50b9b2157977608e5500c2f30811a13ec0cf8">
      <!-- Locale links injected by /assets/js/navbar.js -->
    </div>
    
  </div>
</nav>

<script src="/assets/js/navbar.js" defer></script>

    <main id="main-content" class="simulation-layout-main" tabindex="-1">
      <script>
(function() {
  document.title = "Mastermind Codebreaker - Simulaci\u00f3n cient\u00edfica interactiva gratuita | Simulaciones Cient\u00edficas";
  document.documentElement.lang = "es";
  document.body.className = "bg-gray-100 font-sans text-gray-800 min-h-screen flex flex-col items-center py-8";
  for (const node of Array.from(document.body.childNodes)) {
    if (node === document.currentScript) break;
    if (node.nodeType === Node.TEXT_NODE) {
      node.remove();
    }
  }
})();
</script>
<link rel="stylesheet" href="../../../../assets/css/simulations.css">
<style>
        .peg-hole {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #d1d5db;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
            display: inline-block;
            cursor: pointer;
        }

        .feedback-hole {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #9ca3af;
            box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
            display: inline-block;
        }

        .peg-color-red { background-color: #ef4444; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); }
        .peg-color-blue { background-color: #3b82f6; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); }
        .peg-color-green { background-color: #22c55e; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); }
        .peg-color-yellow { background-color: #eab308; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); }
        .peg-color-purple { background-color: #a855f7; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); }
        .peg-color-orange { background-color: #f97316; box-shadow: inset -2px -2px 4px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); }

        .feedback-black { background-color: #111827; box-shadow: none; }
        .feedback-white { background-color: #f9fafb; box-shadow: none; border: 1px solid #d1d5db; }

        .color-selector {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .color-selector:hover {
            transform: scale(1.1);
        }

        .selected-color {
            border: 3px solid #1f2937;
            transform: scale(1.1);
        }

        .active-row {
            border: 2px solid #3b82f6;
            background-color: #eff6ff;
        }

        #hidden-code-container .peg-hole {
            cursor: default;
        }

    </style>

<div class="max-w-2xl w-full bg-white rounded-xl shadow-lg p-6">
<h1 class="text-3xl font-bold text-center text-blue-700 mb-4">Mastermind Codebreaker</h1>
<div class="bg-blue-50 p-4 rounded-lg mb-6 border border-blue-200">
<h2 class="text-lg font-semibold text-blue-800 mb-2">Instrucciones</h2>
<ul class="list-disc pl-5 space-y-1 text-sm">
<li>Adivina la secuencia oculta de 4 colores.</li>
<li>Selecciona un color de la paleta y luego haz clic en los agujeros vacíos de la fila activa para colocarlo.</li>
<li>Una vez que la fila esté llena, haz clic en "Comprobar" para obtener comentarios.</li>
<li><strong>Ficha negra:</strong> Color correcto en la posición correcta.</li>
<li><strong>Ficha blanca:</strong> Color correcto en la posición incorrecta.</li>
<li>Se permiten duplicados en el código oculto.</li>
</ul>
</div>
<div class="flex justify-between items-center mb-6 px-4">
<div class="text-lg font-bold" id="status-message">Intentos: <span id="attempt-count">0</span>/10</div>
<button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition" id="reset-btn" onclick="resetGame()">Nuevo juego</button>
</div>
<div class="flex flex-col md:flex-row gap-6 justify-center">
<!-- Game Board -->
<div class="bg-gray-200 p-4 rounded-lg shadow-inner flex flex-col items-center border-2 border-gray-300 w-full md:w-auto">
<!-- Hidden Code Area -->
<div class="bg-gray-800 p-3 rounded mb-4 flex space-x-2" id="hidden-code-container">
<div class="peg-hole" id="secret-0"></div>
<div class="peg-hole" id="secret-1"></div>
<div class="peg-hole" id="secret-2"></div>
<div class="peg-hole" id="secret-3"></div>
</div>
<!-- Guess Rows -->
<div class="flex flex-col-reverse gap-2 w-full" id="board-rows">
<!-- Rows generated by JS -->
</div>
</div>
<!-- Controls Sidebar -->
<div class="flex flex-col items-center p-4 bg-gray-50 rounded-lg border border-gray-200 h-max">
<h3 class="font-bold mb-4">Paleta de colores</h3>
<div class="grid grid-cols-2 gap-3 mb-6" id="palette">
<div class="color-selector peg-color-red selected-color" data-color="red" onclick="selectColor('red')"></div>
<div class="color-selector peg-color-blue" data-color="blue" onclick="selectColor('blue')"></div>
<div class="color-selector peg-color-green" data-color="green" onclick="selectColor('green')"></div>
<div class="color-selector peg-color-yellow" data-color="yellow" onclick="selectColor('yellow')"></div>
<div class="color-selector peg-color-purple" data-color="purple" onclick="selectColor('purple')"></div>
<div class="color-selector peg-color-orange" data-color="orange" onclick="selectColor('orange')"></div>
</div>
<button class="w-full px-4 py-3 bg-blue-600 text-white font-bold rounded hover:bg-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled="" id="check-btn" onclick="checkGuess()">
                    Comprobar intento
                </button>
</div>
</div>
<div class="hidden mt-6 p-4 rounded-lg text-center font-bold text-xl" id="end-message">
</div>
</div>
<script src="../../../../assets/js/simulations/mastermind.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', function () {
        window.initMastermind({
            secretPlaceholder: "?",
            winMessage: "¡Código descifrado en {attempts} intentos!",
            loseMessage: "Fin del juego. No has logrado descifrar el código."
        });
    });
</script>

      
    </main>
    <footer class="simulation-layout-footer" aria-label="Pie del sitio">
      <p>
        <a href="https://sciencesimulations.com/es/terminos/">Términos</a>
        |
        <a href="https://sciencesimulations.com/es/privacidad/">Privacidad</a>
      </p>
      
    </footer>
    
    <!-- GA4 custom event: sim_view -->
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        if (typeof gtag === 'function') {
          gtag('event', 'sim_view', {
            'sim_title': "Mastermind Codebreaker",
            'ngss_code': "",
            'sim_category': "Lógica y acertijos",
            'locale': "es"
          });
        }
      });
    </script>
    <noscript id="seo-fallback">
      <a href="https://sciencesimulations.com/es/">
        Inicio
      </a>
      
        <a href="https://sciencesimulations.com/es/simulaciones/logica/">Lógica y acertijos</a>
      
      <a href="https://sciencesimulations.com/es/simulaciones/logica/mastermind/">Mastermind Codebreaker</a>
    </noscript>
  </body>
</html>