

<!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>Leyes de los gases: Simulación de la Ley de Boyle - Simulación interactiva gratuita | Simulaciones científicas</title>
    <meta name="description" content="Investiga la relación inversa entre presión y volumen en gases con esta simulación interactiva de la Ley de Boyle. Manipula variables y recopila datos en tiempo real para NGSS.">
    <meta name="author" content="Nicklaus Cairns">
    
      <meta name="keywords" content="science, simulation, NGSS, education, interactive">
    
    <link rel="canonical" href="https://sims.science/es/simulaciones/ciencias-fisicas/ley-de-boyle/">
    <meta property="og:url" content="https://sims.science/es/simulaciones/ciencias-fisicas/ley-de-boyle/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Leyes de los gases: Simulación de la Ley de Boyle - Simulación interactiva gratuita | Simulaciones científicas">
    <meta property="og:description" content="Investiga la relación inversa entre presión y volumen en gases con esta simulación interactiva de la Ley de Boyle. Manipula variables y recopila datos en tiempo real para NGSS.">
    <meta property="og:locale" content="es-419">
    <meta property="og:image" content="https://sims.science/assets/images/og_previews/boyles-law.webp">
    <meta name="og:image:secure_url" content="https://sims.science/assets/images/og_previews/boyles-law.webp">
    <meta property="og:image:type" content="image/webp">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Leyes de los gases: Simulación de la Ley de Boyle - Simulación interactiva gratuita | Simulaciones científicas">
    <meta name="twitter:description" content="Investiga la relación inversa entre presión y volumen en gases con esta simulación interactiva de la Ley de Boyle. Manipula variables y recopila datos en tiempo real para NGSS.">
    <meta name="twitter:image" content="https://sims.science/assets/images/og_previews/boyles-law.webp">
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "LearningResource",
        "name": "Leyes de los gases: Simulación de la Ley de Boyle - Simulación interactiva gratuita | Simulaciones científicas",
        "description": "Investiga la relación inversa entre presión y volumen en gases con esta simulación interactiva de la Ley de Boyle. Manipula variables y recopila datos en tiempo real para NGSS.",
        "url": "https://sims.science/es/simulaciones/ciencias-fisicas/ley-de-boyle/",
        "learningResourceType": "Simulación interactiva",
        "inLanguage": "es-419",
        "educationalLevel": "Escuela secundaria",
        "interactivityType": "active",
        "author": {
          "@type": "Person",
          "name": "Nicklaus Cairns",
          "url": "https://sims.science"
        },
        "publisher": {
          "@type": "Person",
          "name": "Simulaciones científicas",
          "url": "https://sims.science"
        },
        "educationalAlignment": {
          "@type": "AlignmentObject",
          "alignmentType": "educational framework",
          "educationalFramework": "Next Generation Science Standards (NGSS)",
          "targetName": "HS-PS3-2",
          "targetUrl": "https://www.nextgenscience.org/pe/hs-ps3-2"
        }
      }
    </script>
    
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Inicio",
            "item": "https://sims.science/es/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Ciencias físicas",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/"
          },
          {
            "@type": "ListItem",
            "position": 3,
            "name": "Leyes de los gases: Simulador de la ley de Boyle",
            "item": "https://sims.science/es/simulaciones/ciencias-fisicas/ley-de-boyle/"
          }
        ]
      }
    </script>
    
    <!--
      PERF BUDGET: style.css (~20K) render-blocking with fetchpriority="high".
      shared-layout.css (~20K) non-blocking.
      Total render-blocking CSS target: <30K for sim pages.
    -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!--
      PERF BUDGET: Preload Inter font for sim layout to prevent FOIT (Flash of Invisible Text).
      At ~16K woff2 this is negligible but prevents layout shift.
    -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"></noscript>
    <link rel="preload" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" as="style">
    <link rel="stylesheet" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" fetchpriority="high">
    <link rel="stylesheet" href="/assets/css/shared-layout.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <link rel="stylesheet" href="/assets/css/sim-auth-gate.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <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">
<!-- Resource hints for third-party services -->
<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">
<link rel="preconnect" href="https://cdn.jsdelivr.net">

<!-- Consent and Analytics Script (loads on all pages) -->
<script src="/assets/js/consent.js" defer></script>

<!--
  PERF BUDGET: AI Feedback Panel scripts load ONLY on simulation pages.
  Total size: ~34K (sim-contexts.js: 11K + ai-feedback-panel.js: 23K).
  These add ~0.4s parse time. If latency budget is exceeded, consider
  lazy-loading the AI feedback module on user interaction with a Feedback button.
-->

<!-- AI Feedback Panel — Styles -->
<link rel="stylesheet" href="/assets/css/ai-feedback.css?v=860946c8580b63be9471a3affe622ab52c574d69">
<!-- AI Feedback Panel — Context config -->
<script src="/assets/js/sim-contexts.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>
<!-- AI Feedback Panel — Main logic -->
<script src="/assets/js/ai-feedback-panel.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>


    <style>
      html {
        height: 100%;
      }

      body.simulation-layout-body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        background: #0f172a;
        color: #f8fafc;
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      }

      .simulation-layout-body > .site-nav {
        flex-shrink: 0;
        background: rgba(15, 23, 42, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
      }

      .simulation-layout-body .site-nav-brand {
        color: #f8fafc;
      }

      .simulation-layout-body .site-nav-brand:hover {
        color: #38bdf8;
      }

      .simulation-layout-body .site-nav-links a {
        color: #e2e8f0;
      }

      .simulation-layout-body .site-nav-links a:hover,
      .simulation-layout-body .site-nav-links a[aria-current="page"] {
        background: rgba(255, 255, 255, 0.1);
        color: #f8fafc;
      }

      .simulation-layout-body .site-locale-switcher a {
        color: #94a3b8;
      }

      .simulation-layout-body .site-locale-switcher a:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .simulation-layout-body .site-nav-toggle {
        color: #cbd5e1;
        border-color: rgba(148, 163, 184, 0.3);
      }

      /* WCAG 2.4.7: Focus indicators — visible focus ring on all interactive elements */
      a:focus-visible,
      button:focus-visible,
      input:focus-visible,
      select:focus-visible,
      textarea:focus-visible,
      [tabindex]:not([tabindex="-1"]):focus-visible {
        outline: 2px solid #38bdf8;
        outline-offset: 2px;
        border-radius: 2px;
      }

      /* Ensure slider thumbs also have visible focus */
      input[type="range"]:focus-visible::-webkit-slider-thumb {
        outline: 2px solid #38bdf8;
        outline-offset: 3px;
      }
      input[type="range"]:focus-visible::-moz-range-thumb {
        outline: 2px solid #38bdf8;
        outline-offset: 3px;
      }

      .simulation-layout-body .site-nav-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      .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;
        font-family: 'Inter', system-ui, sans-serif;
      }

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

      .simulation-layout-footer a {
        color: #93c5fd;
        text-decoration: underline;
        text-underline-offset: 2px;
      }

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

      /* ===== EMBED MODE ===== */
      body.embed-mode .site-nav,
      body.embed-mode .simulation-layout-footer,
      body.embed-mode .sr-only,
      body.embed-mode .sim-share-btn {
        display: none !important;
      }

      body.embed-mode {
        background: #0f172a;
      }

      body.embed-mode .simulation-layout-main {
        flex: 1 1 auto;
        min-height: 100vh;
      }

      /* ===== SHARE BUTTON ===== */
      .sim-share-btn {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        z-index: 999;
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 1rem;
        border: 1px solid rgba(148, 163, 184, 0.3);
        border-radius: 0.5rem;
        background: #1e293b;
        color: #cbd5e1;
        font-size: 0.8125rem;
        font-family: 'Inter', system-ui, sans-serif;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      }

      .sim-share-btn:hover {
        background: #334155;
        color: #f8fafc;
      }

      .sim-share-btn:active {
        background: #475569;
      }

      .sim-share-btn svg {
        width: 1em;
        height: 1em;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .sim-share-btn[data-copied="true"] {
        background: #065f46;
        border-color: #10b981;
        color: #a7f3d0;
      }

      /* ===== HELP TOOLTIPS ===== */
      [data-tooltip] {
        position: relative;
        cursor: help;
      }

      [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        padding: 0.4rem 0.75rem;
        border-radius: 6px;
        background: #1e293b;
        color: #e2e8f0;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease;
        transform: translateX(-50%) translateY(4px);
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border: 1px solid rgba(148, 163, 184, 0.2);
        max-width: 280px;
        white-space: normal;
        text-align: center;
      }

      [data-tooltip]:hover::after,
      [data-tooltip]:focus::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* Tooltip on the right side for elements near the top */
      [data-tooltip-position="right"]::after {
        bottom: auto;
        top: 50%;
        left: calc(100% + 8px);
        transform: translateY(-50%) translateX(-4px);
      }

      [data-tooltip-position="right"]:hover::after,
      [data-tooltip-position="right"]:focus::after {
        transform: translateY(-50%) translateX(0);
      }

      /* Tooltip on the bottom */
      [data-tooltip-position="bottom"]::after {
        bottom: auto;
        top: calc(100% + 8px);
        transform: translateX(-50%) translateY(-4px);
      }

      [data-tooltip-position="bottom"]:hover::after,
      [data-tooltip-position="bottom"]:focus::after {
        transform: translateX(-50%) translateY(0);
      }

      /* Mobile: cap max-width */
      @media (max-width: 480px) {
        [data-tooltip]::after {
          max-width: 200px;
          font-size: 0.7rem;
          padding: 0.3rem 0.6rem;
        }
        [data-tooltip-position="right"]::after {
          left: auto;
          right: calc(100% + 8px);
        }
      }
    </style>
  </head>
  <body class="simulation-layout-body bg-gray-50 text-slate-800 p-6">
    
    <script>!function(){var e=location.search;if(e&&(e.indexOf('embed=1')>-1||e.indexOf('embed=true')>-1)){document.documentElement.classList.add('embed-mode');document.body&&document.body.classList.add('embed-mode')}}();</script>
    <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://sims.science/es/" class="site-nav-brand">
    sims.science
  </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://sims.science/es/simulaciones/" >Todas las simulaciones</a>
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/" >Ciencias físicas</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-vida/" >Ciencias de la vida</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-tierra-y-el-espacio/" >Tierra y Espacio</a>
      <a href="https://sims.science/es/student/dashboard/" >Mi Progreso</a>
      <a href="https://sims.science/es/teacher/dashboard/" >Panel del Docente</a>
      <a href="https://sims.science/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=860946c8580b63be9471a3affe622ab52c574d69">
      <!-- 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 = "Leyes de los gases: Simulaci\u00f3n de la Ley de Boyle - Simulaci\u00f3n interactiva gratuita | Simulaciones cient\u00edficas";
  document.documentElement.lang = "es";
  document.body.className = "bg-gray-50 text-slate-800 p-6";
  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">
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.js"></script>

<style>
        body { font-family: 'Inter', sans-serif; }
        .control-panel { background-color: #f1f5f9; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; }
        .data-panel { background-color: #ffffff; padding: 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; }
        .canvas-container { position: relative; width: 100%; height: 300px; background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 0.5rem; overflow: hidden; }
        #gasCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        #plunger { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background-color: rgba(100, 116, 139, 0.5); border-left: 4px solid #475569; pointer-events: none; transition: width 0.1s linear; }
    </style>

<div class="max-w-6xl mx-auto"><header class="mb-6"><h1 class="text-3xl font-bold text-slate-900 mb-2"> Leyes de los gases: Simulador de la ley de Boyle</h1><p class="text-slate-600"> Explora la relación inversa entre el volumen y la presión de un gas a temperatura constante. Ajusta el volumen para observar cómo responde la presión y cómo cambian las colisiones entre partículas. </p></header><div class="grid grid-cols-1 lg:grid-cols-2 gap-6"><!-- Left Column: Controls & Canvas --><div class="space-y-6"><div class="control-panel"><h2 class="text-xl font-semibold mb-4 text-slate-800"> Controles</h2><div class="mb-6"> <label class="flex justify-between font-medium text-sm mb-2" for="volumeSlider"><span>Volumen (L) <span class="text-blue-600 font-bold" id="volumeValue">10,0 L</span></span></label> <input class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer" id="volumeSlider" type="range"/></div><div class="flex space-x-4"> <button class="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition" id="addGasBtn">Agregar gas (más moles)</button> <button class="flex-1 bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition" id="resetBtn">Reiniciar sistema</button></div></div><div class="data-panel"><h2 class="text-xl font-semibold mb-4 text-slate-800"> Modelo de partículas </h2><div class="canvas-container" id="canvasContainer"><canvas id="gasCanvas"></canvas><div id="plunger"></div></div><div class="mt-4 flex justify-between text-sm font-medium"><div class="text-slate-600"> Presión actual: <span class="text-indigo-600 font-bold text-lg" id="pressureDisplay">1,00 atm</span></div><div class="text-slate-600"> Temperatura: <span class="font-bold">298 K (Constante) </span></div></div></div></div><!-- Right Column: Graph --><div class="data-panel"><h2 class="text-xl font-semibold mb-4 text-slate-800"> Gráfico de presión frente a volumen </h2><div class="relative w-full h-80"><canvas id="pvChart"></canvas></div><div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg"><h3 class="font-semibold text-blue-800 mb-2"> Fórmula de la Ley de Boyle</h3><p class="text-sm text-blue-900"> A temperatura constante, la presión (P) de una cantidad fija de gas es inversamente proporcional a su volumen (V).<br/><br/> <strong>P₁V₁ = P₂V₂</strong> o <strong>P = k / V</strong></p></div></div></div></div><script>
    (function() {
        // Simulation State
        const initialState = Object.freeze({
            moles: 1,      // Arbitrary relative amount
            temp: 298,     // Constant temperature
            volume: 10,    // Initial volume (L)
            minVolume: 2,
            maxVolume: 20, // Max volume for the container (L)
            volumeStep: 0.1,
            k: 10,         // Constant k = P * V (initially 1 * 10 = 10)
            running: true
        });

        const state = { ...initialState };
        const K_PER_MOLE = initialState.k / initialState.moles;

        // DOM Elements
        const volumeSlider = document.getElementById('volumeSlider');
        const volumeValue = document.getElementById('volumeValue');
        const pressureDisplay = document.getElementById('pressureDisplay');
        const addGasBtn = document.getElementById('addGasBtn');
        const resetBtn = document.getElementById('resetBtn');
        const canvas = document.getElementById('gasCanvas');
        const ctx = canvas.getContext('2d');
        const container = document.getElementById('canvasContainer');
        const plunger = document.getElementById('plunger');

        // Chart Initialization
        const chartCtx = document.getElementById('pvChart').getContext('2d');
        let pvChart;

        // Particles
        let particles = [];
        const baseSpeed = 3;

        function initializeSlider() {
            volumeSlider.min = state.minVolume;
            volumeSlider.max = state.maxVolume;
            volumeSlider.step = state.volumeStep;
            volumeSlider.value = state.volume;
        }

        function calculatePressure(v, k) {
            return k / v;
        }

        function calculateK(p, v) {
            return p * v;
        }

        function generateTheoreticalCurve(k) {
            const curveData = [];
            const minV = parseFloat(volumeSlider.min);
            const maxV = parseFloat(volumeSlider.max);
            for (let v = minV; v <= maxV; v += 0.5) {
                curveData.push({ x: v, y: k / v });
            }
            return curveData;
        }

        function initChart() {
            const curveData = generateTheoreticalCurve(state.k);

            pvChart = new Chart(chartCtx, {
                type: 'scatter',
                data: {
                    datasets: [
                        {
                            label: 'Current State',
                            data: [{ x: state.volume, y: calculatePressure(state.volume, state.k) }],
                            backgroundColor: 'rgba(79, 70, 229, 1)',
                            pointRadius: 8,
                            pointHoverRadius: 10,
                            order: 1
                        },
                        {
                            label: 'Theoretical Curve (P = k/V)',
                            data: curveData,
                            borderColor: 'rgba(156, 163, 175, 0.5)',
                            backgroundColor: 'transparent',
                            showLine: true,
                            pointRadius: 0,
                            borderDash: [5, 5],
                            order: 2
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: { duration: 0 },
                    scales: {
                        x: {
                            type: 'linear',
                            position: 'bottom',
                            title: { display: true, text: 'Volumen (L)', font: { weight: 'bold' } },
                            min: 0,
                            max: 22
                        },
                        y: {
                            title: { display: true, text: 'Presión (atm)', font: { weight: 'bold' } },
                            min: 0,
                            max: Math.ceil(state.k / 2) + 1
                        }
                    },
                    plugins: {
                        legend: { position: 'top' },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `V: ${context.parsed.x.toFixed(1)} L, P: ${context.parsed.y.toFixed(2)} atm`;
                                }
                            }
                        }
                    }
                }
            });
        }

        function updateChart() {
            const currentPressure = calculatePressure(state.volume, state.k);

            // Update theoretical curve in case k changed (e.g., added moles)
            const curveData = generateTheoreticalCurve(state.k);

            pvChart.data.datasets[0].data = [{ x: state.volume, y: currentPressure }];
            pvChart.data.datasets[1].data = curveData;

            // Dynamically adjust Y axis max based on k and min volume
            const minV = parseFloat(volumeSlider.min);
            pvChart.options.scales.y.max = Math.ceil((state.k / minV) * 1.2);

            pvChart.update('none');
        }

        function resizeCanvas() {
            canvas.width = container.clientWidth;
            canvas.height = container.clientHeight;
        }

        class Particle {
            constructor() {
                this.radius = 4;
                this.x = Math.random() * (getAvailableWidth() - this.radius * 2) + this.radius;
                this.y = Math.random() * (canvas.height - this.radius * 2) + this.radius;

                // Random direction, constant speed
                const angle = Math.random() * Math.PI * 2;
                this.vx = Math.cos(angle) * baseSpeed;
                this.vy = Math.sin(angle) * baseSpeed;
            }

            update(availWidth) {
                this.x += this.vx;
                this.y += this.vy;

                // Wall collisions
                if (this.x - this.radius < 0) {
                    this.x = this.radius;
                    this.vx *= -1;
                } else if (this.x + this.radius > availWidth) {
                    this.x = availWidth - this.radius;
                    this.vx *= -1;
                }

                if (this.y - this.radius < 0) {
                    this.y = this.radius;
                    this.vy *= -1;
                } else if (this.y + this.radius > canvas.height) {
                    this.y = canvas.height - this.radius;
                    this.vy *= -1;
                }
            }

            draw(ctx) {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = '#ef4444'; // Red particles
                ctx.fill();
                ctx.closePath();
            }
        }

        function getAvailableWidth() {
            return canvas.width * (state.volume / state.maxVolume);
        }

        function spawnParticles(num) {
            for (let i = 0; i < num; i++) {
                particles.push(new Particle());
            }
        }

        function updateSimulation() {
            state.volume = parseFloat(volumeSlider.value);
            volumeValue.textContent = `${state.volume.toFixed(1)} L`;

            const currentPressure = calculatePressure(state.volume, state.k);
            pressureDisplay.textContent = `${currentPressure.toFixed(2)} atm`;

            // Update Plunger visual
            const plungerWidthPercent = 100 - (state.volume / state.maxVolume * 100);
            plunger.style.width = `${plungerWidthPercent}%`;

            updateChart();
        }

        function animationLoop() {
            if (!state.running) return;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            const availWidth = getAvailableWidth();

            // Draw available area background
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, availWidth, canvas.height);

            for (let p of particles) {
                // Rescue particles that get trapped behind plunger if volume decreases rapidly
                if (p.x + p.radius > availWidth) {
                    p.x = availWidth - p.radius - 1;
                    p.vx = -Math.abs(p.vx); // Force it left
                }

                p.update(availWidth);
                p.draw(ctx);
            }

            requestAnimationFrame(animationLoop);
        }

        // Event Listeners
        volumeSlider.addEventListener('input', updateSimulation);

        addGasBtn.addEventListener('click', () => {
            state.moles += 0.5;
            // P = k/V -> k = P*V. If moles increase, P increases proportionally. So k increases.
            // New k = K_PER_MOLE * moles
            state.k = K_PER_MOLE * state.moles;

            spawnParticles(30);
            updateSimulation();
        });

        resetBtn.addEventListener('click', () => {
            Object.assign(state, initialState);
            volumeSlider.value = state.volume;
            particles = [];
            spawnParticles(50);
            updateSimulation();
        });

        window.addEventListener('resize', () => {
            resizeCanvas();
            // Re-rescue particles if canvas shrinks
            const availWidth = getAvailableWidth();
            for(let p of particles) {
                if(p.x > availWidth) p.x = availWidth - p.radius;
                if(p.y > canvas.height) p.y = canvas.height - p.radius;
            }
        });

        // Expose only what's needed for testing under a single namespace
        window.boylesLawTestApi = {
            calculatePressure: calculatePressure,
            calculateK: calculateK,
            simulationState: state
        };

        // Initial setup
        initializeSlider();
        resizeCanvas();
        spawnParticles(50);
        initChart();
        updateSimulation();
        animationLoop();
    })();
    </script>

    </main>
    
    <button class="sim-share-btn" id="simShareBtn" type="button" aria-label="Compartir simulación"
      data-tooltip="Comparte este enlace con tus estudiantes para que accedan a la simulación"
      data-tooltip-position="left">
      <svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="16"></line><polyline points="8 12 12 16 16 12"></polyline><path d="M5 21h14a2 2 0 0 0 2-2v-4"></path><path d="M3 15v4a2 2 0 0 0 2 2h.5"></path></svg>
      <span>Compartir</span>
    </button>
    <footer class="simulation-layout-footer" aria-label="Pie del sitio">
      <p>
        <a href="https://sims.science/es/terminos/" style="text-decoration:underline;text-underline-offset:2px;">Términos</a>
        |
        <a href="https://sims.science/es/privacidad/" style="text-decoration:underline;text-underline-offset:2px;">Privacidad</a>
      </p>
      
    </footer>
    
    <noscript id="seo-fallback">
      <a href="https://sims.science/es/">
        Inicio
      </a>
      
        <a href="https://sims.science/es/simulaciones/ciencias-fisicas/">Ciencias físicas</a>
      
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/ley-de-boyle/">Leyes de los gases: Simulador de la ley de Boyle</a>
    </noscript>
    
    <script defer src="/assets/js/share-sim.js?v=860946c8580b63be9471a3affe622ab52c574d69"></script>
    
    
    <script defer src="/assets/js/science-ed-tracker.min.js?v=860946c8580b63be9471a3affe622ab52c574d69"
      data-api-base="https://api.sims.science"
      data-sim-slug="ciencias-fisicas"
      data-batch-interval="5000"
      data-max-batch-size="50"
      data-debug="false"></script>
    
    
    <script defer src="/assets/js/sim-auth-gate.min.js?v=860946c8580b63be9471a3affe622ab52c574d69"
      data-login-url="/en/student/login/"
      data-register-url="/en/student/register/"
      data-api-base="https://api.sims.science"
      data-sim-title="Leyes de los gases: Simulador de la ley de Boyle"
      data-sim-desc="Investiga la relación inversa entre presión y volumen en gases con esta simulación interactiva de la Ley de Boyle. Manipula variables y recopila datos en tiempo real para NGSS."
      data-sim-category="Ciencias físicas"
      data-debug="false"
      data-skip-sdk-init="true"></script>
    
    
    <script>
      (function(){
        if (localStorage.getItem('sims-sim-tip-dismissed')) return;
        var tip = document.createElement('div');
        tip.id = 'sim-first-tip';
        tip.style.cssText = 'position:fixed;bottom:4.5rem;right:1rem;z-index:9998;background:#1e293b;border:1px solid rgba(148,163,184,0.25);border-radius:12px;padding:1rem 1.25rem;max-width:320px;color:#e2e8f0;font-size:0.85rem;line-height:1.45;font-family:Inter,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.4);display:none;';
        tip.innerHTML = '<div style="font-size:1.1rem;margin-bottom:0.4rem;">💡 Consejo rápido</div><div>Usa los controles interactivos para explorar la simulación. Pasa el cursor sobre los elementos para obtener ayuda. <a href="" style="color:#38bdf8;text-decoration:underline;white-space:nowrap;">Más información →</a></div><button onclick="this.parentElement.style.display=\'none\';try{localStorage.setItem(\'sims-sim-tip-dismissed\',\'true\')}catch(e){}" style="position:absolute;top:0.35rem;right:0.5rem;background:none;border:none;color:#64748b;font-size:1.1rem;cursor:pointer;line-height:1;" aria-label="Cerrar">&times;</button>';
        document.body.appendChild(tip);
        // Show after a short delay
        setTimeout(function(){ tip.style.display = 'block'; }, 1500);
      })();
    </script>
  </body>
</html>