二次函数顶点式图象变换

游戏信息

二次函数顶点式图象变换

您喜欢这个游戏吗？

嵌入此游戏

<a href="http://www.glsxkz.com">数学课栈</a><br /><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二次函数顶点式图象变换实验</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
            min-height: 100vh;
            padding: 15px;
            color: #ecf0f1;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 0;
        }
        
        header {
            background: linear-gradient(135deg, rgba(41, 128, 185, 0.9), rgba(44, 62, 80, 0.95));
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 15px 15px 0 0;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
            position: relative;
            z-index: 10;
            margin-bottom: 20px;
            border-bottom: 3px solid #3498db;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .header-content {
            flex: 1;
            min-width: 70%;
        }
        
        h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            letter-spacing: 0.5px;
        }
        
        .subtitle {
            font-size: 1.0rem;
            opacity: 0.92;
            font-weight: 300;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        
        .math-concept {
            display: inline-block;
            background: rgba(231, 76, 60, 0.25);
            border-radius: 8px;
            padding: 3px 10px;
            margin: 0 4px;
            font-style: italic;
            border: 1px solid rgba(231, 76, 60, 0.4);
            box-shadow: 0 1px 5px rgba(0,0,0,0.2);
        }
        
        .card {
            background: rgba(30, 40, 60, 0.88);
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
            transition: transform 0.3s ease;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(52, 152, 219, 0.35);
        }
        
        .card-title {
            text-align: center;
            color: #3498db;
            font-size: 1.6rem;
            margin-bottom: 20px;
            font-weight: 700;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
            position: relative;
        }
        
        .card-title:after {
            content: '';
            display: block;
            width: 100px;
            height: 3px;
            background: linear-gradient(to right, transparent, #3498db, transparent);
            margin: 10px auto 0;
            border-radius: 3px;
        }
        
        .control-panel {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
            justify-content: center;
        }
        
        .input-group {
            flex: 1;
            min-width: 100%;
            background: rgba(20, 30, 50, 0.75);
            border-radius: 12px;
            padding: 18px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.35);
            border: 1px solid rgba(52, 152, 219, 0.45);
        }
        
        .input-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
            justify-content: center;
        }
        
        .input-field {
            flex: 1;
            min-width: 80px;
            max-width: 120px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        .input-field label {
            font-size: 1.0rem;
            color: #3498db;
            margin-bottom: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
            justify-content: center;
        }
        
        .input-field label i {
            color: #e74c3c;
            font-size: 1.0rem;
        }
        
        .input-field input {
            padding: 10px 5px;
            background: rgba(10, 20, 40, 0.85);
            border: 2px solid #3498db;
            border-radius: 8px;
            font-size: 1.0rem;
            outline: none;
            transition: all 0.3s;
            color: white;
            text-align: center;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
            width: 100%;
        }
        
        .input-field input:focus {
            border-color: #e74c3c;
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.35);
            background: rgba(15, 25, 45, 0.92);
        }
        
        .function-display {
            background: rgba(52, 152, 219, 0.18);
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            margin: 15px 0;
            font-size: 1.4rem;
            font-weight: 700;
            color: #3498db;
            border: 2px dashed rgba(52, 152, 219, 0.45);
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
            font-family: 'Cambria Math', serif;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        }
        
        .chart-container {
            height: 350px;
            width: 100%;
            position: relative;
            margin-top: 10px;
            border-radius: 12px;
            overflow: hidden;
            background: rgba(15, 25, 45, 0.75);
            border: 2px solid rgba(52, 152, 219, 0.35);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.45), 0 8px 25px rgba(0,0,0,0.35);
        }
        
        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
            justify-content: center;
        }
        
        .btn {
            min-width: 180px;
            background: linear-gradient(135deg, rgba(41, 128, 185, 0.92), rgba(44, 62, 80, 0.97));
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 20px;
            font-size: 1.0rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
            border: 2px solid rgba(255,255,255,0.25);
        }
        
        .btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
        }
        
        .btn:active {
            transform: translateY(2px);
            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.45);
        }
        
        .btn-alt {
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.92), rgba(192, 57, 43, 0.97));
        }
        
        /* 控制点大小优化（缩小一半） */
        .control-point {
            position: absolute;
            width: 8px; /* 缩小为原来的一半 */
            height: 8px; /* 缩小为原来的一半 */
            border-radius: 50%;
            cursor: pointer;
            z-index: 30;
            transform: translate(-50%, -50%);
            transition: all 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.95); /* 边框变细 */
            box-shadow: 0 0 0 1px #e74c3c, 0 0 5px rgba(46, 204, 113, 0.9); /* 阴影缩小 */
        }
        
        .control-point:hover {
            transform: translate(-50%, -50%) scale(1.8); /* 悬停时放大比例增加 */
            box-shadow: 0 0 0 2px #e74c3c, 0 0 10px rgba(46, 204, 113, 1);
        }
        
        .toggle-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin: 15px 0;
        }
        
        .toggle-btn {
            background: rgba(20, 30, 50, 0.75);
            border: 2px solid #3498db;
            border-radius: 50px;
            padding: 8px 12px;
            color: #3498db;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 600;
            font-size: 0.9rem;
            min-width: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.3);
        }
        
        .toggle-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 12px rgba(0,0,0,0.4);
        }
        
        .toggle-btn.active {
            background: rgba(52, 152, 219, 0.25);
            border-color: #e74c3c;
            color: #e74c3c;
            box-shadow: 0 0 18px rgba(231, 76, 60, 0.45);
        }
        
        .explanation {
            background: rgba(44, 62, 80, 0.65);
            border-radius: 15px;
            padding: 20px;
            margin: 25px 0;
            display: none;
            border: 2px solid rgba(52, 152, 219, 0.45);
            box-shadow: 0 8px 25px rgba(0,0,0,0.35);
        }
        
        .explanation h3 {
            color: #3498db;
            margin-bottom: 20px;
            font-size: 1.8rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        
        .explanation-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
        }
        
        .explanation-section {
            background: rgba(30, 40, 60, 0.65);
            border-radius: 12px;
            padding: 20px;
            border-left: 4px solid #3498db;
        }
        
        .explanation-section h4 {
            color: #e74c3c;
            margin-bottom: 15px;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .explanation-section p {
            line-height: 1.7;
            margin-bottom: 15px;
            font-size: 1.0rem;
        }
        
        .explanation-section ul {
            padding-left: 25px;
            margin-bottom: 15px;
        }
        
        .explanation-section li {
            margin-bottom: 10px;
            line-height: 1.6;
            font-size: 1.0rem;
        }
        
        footer {
            text-align: center;
            padding: 25px 0 20px;
            color: rgba(236, 240, 241, 0.75);
            font-size: 1.0rem;
            text-shadow: 0 1px 2px rgba(0,0,0,0.35);
            margin-top: 20px;
            border-top: 2px solid rgba(52, 152, 219, 0.35);
        }
        
        .title-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(52, 152, 219, 0.5);
            box-shadow: 0 3px 12px rgba(0,0,0,0.3);
            margin-left: 10px;
        }
        
        .special-functions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            margin-top: 10px;
        }
        
        .special-btn {
            background: rgba(30, 40, 60, 0.6);
            border: 1px solid rgba(166, 216, 255, 0.4);
            border-radius: 25px;
            padding: 6px 10px;
            color: #a6d8ff;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
            font-size: 0.85rem;
        }
        
        .special-btn.active {
            background: rgba(74, 107, 255, 0.4);
            border-color: #4a6bff;
            box-shadow: 0 0 10px rgba(74, 107, 255, 0.4);
        }
        
        .key-point {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #e74c3c;
            z-index: 25;
            transform: translate(-50%, -50%);
            pointer-events: none;
            box-shadow: 0 0 6px rgba(231, 76, 60, 0.8);
        }
        
        .vertex-label {
            position: absolute;
            background: rgba(30, 40, 60, 0.85);
            color: #2ecc71;
            padding: 5px 10px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: bold;
            z-index: 20;
            transform: translate(-50%, 10px);
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            border: 1px solid #2ecc71;
        }
        
        .axis {
            position: absolute;
            background: rgba(52, 152, 219, 0.8);
            z-index: 5;
        }
        
        .x-axis {
            width: 100%;
            top: 50%;
            height: 2px;
            transform: translateY(-50%);
        }
        
        .y-axis {
            height: 100%;
            left: 50%;
            width: 2px;
            transform: translateX(-50%);
        }
        
        .symmetry-axis {
            position: absolute;
            height: 100%;
            width: 2px;
            background: rgba(231, 76, 60, 0.7);
            z-index: 7;
            display: block;
        }
        
        .symmetry-axis.dashed {
            background: repeating-linear-gradient(
                to bottom,
                rgba(231, 76, 60, 0.7),
                rgba(231, 76, 60, 0.7) 5px,
                transparent 5px,
                transparent 10px
            );
        }
        
        .reference-functions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 10px;
        }
        
        .reference-color {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
        }
        
        @media (max-width: 768px) {
            .control-panel {
                flex-direction: column;
            }
            
            .input-group {
                min-width: 100%;
            }
            
            .input-row {
                flex-direction: row;
                gap: 5px;
            }
            
            .input-field {
                min-width: 70px;
                max-width: 90px;
            }
            
            .btn {
                min-width: 160px;
            }
            
            .toggle-group {
                flex-direction: row;
                align-items: center;
                gap: 6px;
            }
            
            .toggle-btn {
                min-width: 80px;
                font-size: 0.8rem;
                padding: 6px 8px;
            }
            
            h1 {
                font-size: 1.6rem;
            }
            
            .subtitle {
                font-size: 0.9rem;
            }
            
            header {
                flex-direction: column;
            }
            
            .title-image {
                margin: 10px auto 0;
            }
            
            .function-display {
                font-size: 1.2rem;
                padding: 12px;
            }
            
            .chart-container {
                height: 300px;
            }
            
            .special-btn {
                font-size: 0.8rem;
                padding: 5px 8px;
            }
        }
        
        @media (max-width: 480px) {
            .input-field {
                min-width: 60px;
                max-width: 70px;
            }
            
            .input-field input {
                padding: 8px 3px;
                font-size: 0.9rem;
            }
            
            .chart-container {
                height: 250px;
            }
            
            .card-title {
                font-size: 1.4rem;
            }
            
            .btn {
                padding: 10px 15px;
                font-size: 0.9rem;
                min-width: 140px;
            }
            
            .toggle-group {
                gap: 4px;
            }
            
            .toggle-btn {
                min-width: 70px;
                padding: 5px 6px;
                font-size: 0.75rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1><i class="fas fa-parabola"></i> 二次函数顶点式图象变换实验</h1>
                <p class="subtitle">探究 <span class="math-concept">y = a(x - h)² + k</span> 的图象与性质</p>
            </div>
             <img src="data:image/jpeg;base64,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" 
                 class="title-image">
<div class="title-image">
                <i class="fas fa-chart-line" style="font-size: 40px; color: #3498db;"></i>
            </div>
        </header>
        
        <div class="card">
            <div class="card-title">二次函数图象变换实验</div>
            
            <div class="control-panel">
                <div class="input-group">
                    <div class="input-row">
                        <div class="input-field">
                            <label for="a-input">
                                <i class="fas fa-expand-alt"></i> a
                            </label>
                            <input type="number" id="a-input" step="0.1" min="-5" max="5" value="1.0">
                        </div>
                        <div class="input-field">
                            <label for="h-input">
                                <i class="fas fa-arrows-alt-h"></i> h
                            </label>
                            <input type="number" id="h-input" step="0.1" min="-5" max="5" value="0.0">
                        </div>
                        <div class="input-field">
                            <label for="k-input">
                                <i class="fas fa-arrows-alt-v"></i> k
                            </label>
                            <input type="number" id="k-input" step="0.1" min="-5" max="5" value="0.0">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="special-functions">
                <button class="special-btn" data-a="1" data-h="0" data-k="0">y = x²</button>
                <button class="special-btn" data-a="-1" data-h="0" data-k="0">y = -x²</button>
                <button class="special-btn" data-a="1" data-h="2" data-k="0">y = (x-2)²</button>
                <button class="special-btn" data-a="1" data-h="0" data-k="3">y = x² + 3</button>
                <button class="special-btn" data-a="2" data-h="1" data-k="-2">y = 2(x-1)² - 2</button>
            </div>
            
            <div class="function-display" id="function-display">
                y = 1.0(x - 0.0)² + 0.0
            </div>
            
            <div class="toggle-group">
                <button class="toggle-btn active" id="show-reference">
                    <i class="fas fa-layer-group"></i> 参考函数
                </button>
                <button class="toggle-btn active" id="show-key-points">
                    <i class="fas fa-dot-circle"></i> 关键点
                </button>
                <button class="toggle-btn active" id="show-symmetry">
                    <i class="fas fa-grip-lines"></i> 对称轴
                </button>
                <button class="toggle-btn active" id="show-grid">
                    <i class="fas fa-border-all"></i> 网格
                </button>
            </div>
            
            <div class="reference-functions" id="reference-legend">
                <div><span class="reference-color" style="background:#e74c3c"></span> y = x²</div>
                <div><span class="reference-color" style="background:#f39c12"></span> y = -x²</div>
                <div><span class="reference-color" style="background:#2ecc71"></span> y = (x-2)²</div>
                <div><span class="reference-color" style="background:#3498db"></span> y = x² + 3</div>
            </div>
            
            <div class="chart-container" id="chart-container">
                <div class="axis x-axis"></div>
                <div class="axis y-axis"></div>
                <div class="symmetry-axis dashed" id="symmetry-axis"></div>
                <div class="key-point" id="vertex-point"></div>
                <div class="vertex-label" id="vertex-label">顶点 (0.0, 0.0)</div>
                
                
                <div class="control-point" id="a-control-point" style="background:#e74c3c; left: 50%;"></div>
                <div class="control-point" id="h-control-point" style="background:#2ecc71; top: 50%;"></div>
                <div class="control-point" id="vertex-control" style="background:#3498db;"></div>
                
                <canvas id="function-chart"></canvas>
            </div>
            
            <div class="btn-group">
                <button class="btn" id="instructions-btn">
                    <i class="fas fa-info-circle"></i> 实验说明
                </button>
                <button class="btn btn-alt" id="results-btn">
                    <i class="fas fa-clipboard-list"></i> 实验结果
                </button>
            </div>
            
            <div class="explanation" id="instructions-content">
                <h3><i class="fas fa-lightbulb"></i> 二次函数顶点式实验说明</h3>
                
                <div class="explanation-content">
                    <div class="explanation-section">
                        <h4><i class="fas fa-mouse-pointer"></i> 交互指南</h4>
                        <p>1. 通过以下方式改变函数参数：</p>
                        <ul>
                            <li>在输入框中直接输入a、h、k的数值</li>
                            <li>拖动三个控制点改变函数图象：
                                <ul>
                                    <li><strong style="color:#e74c3c">点A</strong>：控制开口大小 (a值)</li>
                                    <li><strong style="color:#2ecc71">点B</strong>：控制对称轴位置 (h值)</li>
                                    <li><strong style="color:#3498db">点C</strong>：控制顶点位置 (h和k值)</li>
                                </ul>
                            </li>
                        </ul>
                        <p>2. 使用上方按钮控制可视化效果：</p>
                        <ul>
                            <li><strong>参考函数</strong>：显示标准二次函数</li>
                            <li><strong>关键点</strong>：显示顶点</li>
                            <li><strong>对称轴</strong>：显示函数对称轴虚线</li>
                            <li><strong>网格</strong>：显示坐标网格线</li>
                        </ul>
                        <p>3. 点击<strong>特殊函数按钮</strong>直接查看常见二次函数图象</p>
                        <p>4. 点击<strong>实验结果</strong>按钮查看函数性质分析</p>
                    </div>
                    
                    <div class="explanation-section">
                        <h4><i class="fas fa-calculator"></i> 数学概念</h4>
                        <p><strong>二次函数顶点式：</strong> y = a(x - h)² + k</p>
                        <p><strong>参数意义：</strong></p>
                        <ul>
                            <li><strong>a</strong>：控制开口方向和大小（|a|越大开口越小）</li>
                            <li><strong>h</strong>：控制图象左右平移（左加右减）</li>
                            <li><strong>k</strong>：控制图象上下平移（上加下减）</li>
                        </ul>
                        <p><strong>性质特点：</strong></p>
                        <ul>
                            <li>顶点坐标：(h, k)</li>
                            <li>对称轴：x = h</li>
                            <li>当 a > 0 时，开口向上，有最小值 k</li>
                            <li>当 a < 0 时，开口向下，有最大值 k</li>
                            <li>图象为抛物线，形状由a决定</li>
                        </ul>
                    </div>
                    
                    <div class="explanation-section">
                        <h4><i class="fas fa-sync-alt"></i> 图象变换规律</h4>
                        <p><strong>平移变换：</strong></p>
                        <ul>
                            <li>h > 0：图象向右平移 |h| 个单位</li>
                            <li>h < 0：图象向左平移 |h| 个单位</li>
                            <li>k > 0：图象向上平移 |k| 个单位</li>
                            <li>k < 0：图象向下平移 |k| 个单位</li>
                        </ul>
                        <p><strong>缩放变换：</strong></p>
                        <ul>
                            <li>|a| > 1：图象纵向拉伸，开口变窄</li>
                            <li>0 < |a| < 1：图象纵向压缩，开口变宽</li>
                            <li>a < 0：图象关于x轴翻转</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 数学课栈动感数学实验室 | 初中数学探究工具</p>
        </footer>
    </div>
    
    <script>
        // 获取DOM元素
        const aInput = document.getElementById('a-input');
        const hInput = document.getElementById('h-input');
        const kInput = document.getElementById('k-input');
        const functionDisplay = document.getElementById('function-display');
        const instructionsBtn = document.getElementById('instructions-btn');
        const resultsBtn = document.getElementById('results-btn');
        const instructionsContent = document.getElementById('instructions-content');
        const showReferenceBtn = document.getElementById('show-reference');
        const showKeyPointsBtn = document.getElementById('show-key-points');
        const showSymmetryBtn = document.getElementById('show-symmetry');
        const showGridBtn = document.getElementById('show-grid');
        const vertexPoint = document.getElementById('vertex-point');
        const vertexLabel = document.getElementById('vertex-label');
        const symmetryAxis = document.getElementById('symmetry-axis');
        const chartContainer = document.getElementById('chart-container');
        const aControlPoint = document.getElementById('a-control-point');
        const hControlPoint = document.getElementById('h-control-point');
        const vertexControl = document.getElementById('vertex-control');
        const specialBtns = document.querySelectorAll('.special-btn');
        const referenceLegend = document.getElementById('reference-legend');
        
        // 初始函数参数
        let currentA = 1.0;
        let currentH = 0.0;
        let currentK = 0.0;
        let isDragging = false;
        let currentDraggingPoint = null;
        let showKeyPoints = true;
        let showGrid = true;
        let showSymmetry = true;
        let showReference = true;
        
        // 参考函数定义
        const referenceFunctions = [
            { a: 1, h: 0, k: 0, name: 'y = x²', color: '#e74c3c' },
            { a: -1, h: 0, k: 0, name: 'y = -x²', color: '#f39c12' },
            { a: 1, h: 2, k: 0, name: 'y = (x-2)²', color: '#2ecc71' },
            { a: 1, h: 0, k: 3, name: 'y = x² + 3', color: '#3498db' }
        ];
        
        // 初始化图表
        const ctx = document.getElementById('function-chart').getContext('2d');
        
        // 创建数据集数组
        const datasets = [
            // 当前函数图象
            {
                label: '当前函数',
                data: [],
                borderColor: '#3498db',
                backgroundColor: 'rgba(52, 152, 219, 0.12)',
                borderWidth: 4,
                pointRadius: 0,
                fill: false,
                showLine: true,
                tension: 0.1
            }
        ];
        
        // 添加参考函数数据集
        referenceFunctions.forEach(func => {
            datasets.push({
                label: func.name,
                data: [],
                borderColor: func.color,
                backgroundColor: 'rgba(0,0,0,0)',
                borderWidth: 2,
                pointRadius: 0,
                fill: false,
                showLine: true,
                tension: 0.1,
                hidden: !showReference,
                borderDash: [5, 5]
            });
        });
        
        let functionChart = new Chart(ctx, {
            type: 'scatter',
            data: {
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        enabled: true,
                        callbacks: {
                            label: function(context) {
                                return `(${context.parsed.x.toFixed(2)}, ${context.parsed.y.toFixed(2)})`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        type: 'linear',
                        position: 'center',
                        min: -5,
                        max: 5,
                        grid: {
                            color: 'rgba(52, 152, 219, 0.18)',
                            lineWidth: 1,
                            display: true
                        },
                        ticks: {
                            color: '#3498db',
                            font: {
                                size: 10,
                                weight: 'bold'
                            },
                            stepSize: 1
                        },
                        title: {
                            display: false
                        }
                    },
                    y: {
                        type: 'linear',
                        position: 'center',
                        min: -5,
                        max: 5,
                        grid: {
                            color: 'rgba(52, 152, 219, 0.18)',
                            lineWidth: 1,
                            display: true
                        },
                        ticks: {
                            color: '#3498db',
                            font: {
                                size: 10,
                                weight: 'bold'
                            },
                            stepSize: 1
                        },
                        title: {
                            display: false
                        }
                    }
                },
                animation: {
                    duration: 400,
                    easing: 'easeOutQuad'
                }
            }
        });
        
        // 设置可拖动点
        function setupDraggablePoint(point, type) {
            let offsetX, offsetY;
            let lastUpdate = 0;
            const updateInterval = 16;
            
            point.addEventListener('mousedown', function(e) {
                startDrag(e, type);
            });
            point.addEventListener('touchstart', function(e) {
                startDrag(e, type);
            }, { passive: false });
            
            function startDrag(e, pointType) {
                e.preventDefault();
                isDragging = true;
                currentDraggingPoint = pointType;
                
                const rect = point.getBoundingClientRect();
                if (e.type === 'mousedown') {
                    offsetX = e.clientX - rect.left;
                    offsetY = e.clientY - rect.top;
                } else if (e.type === 'touchstart') {
                    offsetX = e.touches[0].clientX - rect.left;
                    offsetY = e.touches[0].clientY - rect.top;
                }
                
                document.addEventListener('mousemove', drag);
                document.addEventListener('touchmove', drag, { passive: false });
                document.addEventListener('mouseup', stopDrag);
                document.addEventListener('touchend', stopDrag);
            }
            
            function drag(e) {
                if (!isDragging) return;
                e.preventDefault();
                
                const now = Date.now();
                if (now - lastUpdate < updateInterval) return;
                lastUpdate = now;
                
                let clientX, clientY;
                if (e.type === 'mousemove') {
                    clientX = e.clientX;
                    clientY = e.clientY;
                } else if (e.type === 'touchmove') {
                    clientX = e.touches[0].clientX;
                    clientY = e.touches[0].clientY;
                }
                
                const containerRect = chartContainer.getBoundingClientRect();
                const chartWidth = containerRect.width;
                const chartHeight = containerRect.height;
                
                let newX = clientX - containerRect.left - offsetX;
                let newY = clientY - containerRect.top - offsetY;
                
                newX = Math.max(0, Math.min(chartWidth, newX));
                newY = Math.max(0, Math.min(chartHeight, newY));
                
                point.style.left = newX + 'px';
                point.style.top = newY + 'px';
                
                // 计算数学坐标
                const mathX = (newX / chartWidth) * 10 - 5;
                const mathY = 5 - (newY / chartHeight) * 10;
                
                // 根据控制点类型更新参数
                switch(currentDraggingPoint) {
                    case 'a':
                        // 点A在y轴上，控制a值
                        currentA = mathY;
                        aInput.value = currentA.toFixed(1);
                        break;
                    case 'h':
                        // 点B在x轴上，控制h值
                        currentH = mathX;
                        hInput.value = currentH.toFixed(1);
                        break;
                    case 'vertex':
                        // 点C控制顶点位置
                        currentH = mathX;
                        currentK = mathY;
                        hInput.value = currentH.toFixed(1);
                        kInput.value = currentK.toFixed(1);
                        break;
                }
                
                updateChart();
            }
            
            function stopDrag() {
                isDragging = false;
                currentDraggingPoint = null;
                document.removeEventListener('mousemove', drag);
                document.removeEventListener('touchmove', drag);
                document.removeEventListener('mouseup', stopDrag);
                document.removeEventListener('touchend', stopDrag);
            }
        }
        
        // 计算二次函数点
        function calculateFunctionPoints(a, h, k) {
            const points = [];
            const step = 0.05;
            
            for (let x = -5; x <= 5; x += step) {
                const y = a * Math.pow(x - h, 2) + k;
                if (isFinite(y) && y >= -5 && y <= 5) {
                    points.push({x, y});
                }
            }
            
            return points;
        }
        
        // 更新关键点位置
        function updateKeyPoints() {
            const containerRect = chartContainer.getBoundingClientRect();
            const chartWidth = containerRect.width;
            const chartHeight = containerRect.height;
            
            // 顶点 (h, k)
            const vertexX = ((currentH + 5) / 10) * chartWidth;
            const vertexY = ((5 - currentK) / 10) * chartHeight;
            
            vertexPoint.style.left = vertexX + 'px';
            vertexPoint.style.top = vertexY + 'px';
            
            // 顶点标签
            vertexLabel.textContent = `顶点 (${currentH.toFixed(1)}, ${currentK.toFixed(1)})`;
            vertexLabel.style.left = vertexX + 'px';
            vertexLabel.style.top = (vertexY - 25) + 'px';
            vertexLabel.style.display = showKeyPoints ? 'block' : 'none';
            
            // 对称轴位置 (x = h)
            const axisX = ((currentH + 5) / 10) * chartWidth;
            symmetryAxis.style.left = axisX + 'px';
            symmetryAxis.style.display = showSymmetry ? 'block' : 'none';
            
            // 控制点位置
            // 点A (y轴上的点，控制a值)
            const aControlX = ((0 + 5) / 10) * chartWidth;
            const aControlY = ((5 - currentA) / 10) * chartHeight;
            aControlPoint.style.left = aControlX + 'px';
            aControlPoint.style.top = aControlY + 'px';
            
            // 点B (x轴上的点，控制h值)
            const hControlX = ((currentH + 5) / 10) * chartWidth;
            const hControlY = ((5 - 0) / 10) * chartHeight;
            hControlPoint.style.left = hControlX + 'px';
            hControlPoint.style.top = hControlY + 'px';
            
            // 点C (顶点，控制h和k值)
            vertexControl.style.left = vertexX + 'px';
            vertexControl.style.top = vertexY + 'px';
        }
        
        // 更新图表和显示 - 修正h为负数的显示问题
        function updateChart() {
            const a = parseFloat(currentA);
            const h = parseFloat(currentH);
            const k = parseFloat(currentK);
            
            // 修正h为负数的显示问题
            let hPart;
            if (h > 0) {
                hPart = `(x - ${h.toFixed(1)})`;
            } else if (h < 0) {
                hPart = `(x + ${Math.abs(h).toFixed(1)})`;
            } else {
                hPart = 'x';
            }
            
            // 处理k的显示
            let kSign = k >= 0 ? '+' : '-';
            let kAbs = Math.abs(k).toFixed(1);
            
            functionDisplay.innerHTML = `y = ${a.toFixed(1)}${hPart}² ${kSign} ${kAbs}`;
            
            // 计算当前函数点
            const currentPoints = calculateFunctionPoints(a, h, k);
            
            // 更新当前函数
            functionChart.data.datasets[0].data = currentPoints;
            
            // 更新参考函数
            updateReferenceFunctions();
            
            functionChart.update();
            updateKeyPoints();
            
            // 更新特殊函数按钮状态
            updateSpecialButtons(a, h, k);
        }
        
        // 更新参考函数
        function updateReferenceFunctions() {
            // 参考函数数据集从索引1开始
            let datasetIndex = 1;
            
            referenceFunctions.forEach(func => {
                const points = calculateFunctionPoints(func.a, func.h, func.k);
                functionChart.data.datasets[datasetIndex].data = points;
                functionChart.data.datasets[datasetIndex].hidden = !showReference;
                datasetIndex++;
            });
            
            // 显示/隐藏图例
            referenceLegend.style.display = showReference ? 'flex' : 'none';
        }
        
        // 更新特殊函数按钮状态
        function updateSpecialButtons(a, h, k) {
            specialBtns.forEach(btn => {
                const btnA = parseFloat(btn.dataset.a);
                const btnH = parseFloat(btn.dataset.h);
                const btnK = parseFloat(btn.dataset.k);
                // 允许0.1的误差范围
                const isActive = Math.abs(a - btnA) < 0.1 && 
                                 Math.abs(h - btnH) < 0.1 && 
                                 Math.abs(k - btnK) < 0.1;
                btn.classList.toggle('active', isActive);
            });
        }
        
        // 事件监听
        aInput.addEventListener('input', () => {
            let value = parseFloat(aInput.value);
            if (isNaN(value)) value = 1;
            value = Math.max(-5, Math.min(5, value));
            currentA = value;
            updateChart();
        });
        
        hInput.addEventListener('input', () => {
            let value = parseFloat(hInput.value);
            if (isNaN(value)) value = 0;
            value = Math.max(-5, Math.min(5, value));
            currentH = value;
            updateChart();
        });
        
        kInput.addEventListener('input', () => {
            let value = parseFloat(kInput.value);
            if (isNaN(value)) value = 0;
            value = Math.max(-5, Math.min(5, value));
            currentK = value;
            updateChart();
        });
        
        instructionsBtn.addEventListener('click', function() {
            instructionsContent.style.display = instructionsContent.style.display === 'block' ? 'none' : 'block';
            this.innerHTML = instructionsContent.style.display === 'block' ? 
                '<i class="fas fa-times"></i> 关闭说明' : 
                '<i class="fas fa-info-circle"></i> 实验说明';
        });
        
        resultsBtn.addEventListener('click', function() {
            const a = currentA;
            const h = currentH;
            const k = currentK;
            
            let direction = a > 0 ? "向上" : "向下";
            let extreme = a > 0 ? "最小值" : "最大值";
            let transform = "";
            
            if (h !== 0 || k !== 0) {
                transform = "相对于 y = x² 函数：n";
                if (h > 0) {
                    transform += `- 向右平移了 ${Math.abs(h).toFixed(1)} 个单位n`;
                } else if (h < 0) {
                    transform += `- 向左平移了 ${Math.abs(h).toFixed(1)} 个单位n`;
                }
                
                if (k > 0) {
                    transform += `- 向上平移了 ${Math.abs(k).toFixed(1)} 个单位n`;
                } else if (k < 0) {
                    transform += `- 向下平移了 ${Math.abs(k).toFixed(1)} 个单位n`;
                }
                
                if (Math.abs(a) !== 1) {
                    if (Math.abs(a) > 1) {
                        transform += `- 纵向拉伸了 ${Math.abs(a).toFixed(1)} 倍n`;
                    } else {
                        transform += `- 纵向压缩了 ${(1/Math.abs(a)).toFixed(1)} 倍n`;
                    }
                }
                
                if (a < 0) {
                    transform += "- 关于x轴进行了翻转n";
                }
            }
            
            // 修正函数表达式显示
            let hPart;
            if (h > 0) {
                hPart = `(x - ${h.toFixed(1)})`;
            } else if (h < 0) {
                hPart = `(x + ${Math.abs(h).toFixed(1)})`;
            } else {
                hPart = 'x';
            }
            
            let kSign = k >= 0 ? '+' : '-';
            let kAbs = Math.abs(k).toFixed(1);
            
            alert(`二次函数性质分析：
函数表达式：y = ${a.toFixed(1)}${hPart}² ${kSign} ${kAbs}
顶点坐标：(${h.toFixed(1)}, ${k.toFixed(1)})
对称轴：x = ${h.toFixed(1)}
开口方向：${direction}
${extreme}值：${k.toFixed(1)}

${transform}`);
        });
        
        showReferenceBtn.addEventListener('click', function() {
            showReference = !showReference;
            this.classList.toggle('active', showReference);
            updateChart();
        });
        
        showKeyPointsBtn.addEventListener('click', function() {
            showKeyPoints = !showKeyPoints;
            this.classList.toggle('active', showKeyPoints);
            updateKeyPoints();
        });
        
        showSymmetryBtn.addEventListener('click', function() {
            showSymmetry = !showSymmetry;
            this.classList.toggle('active', showSymmetry);
            updateKeyPoints();
        });
        
        showGridBtn.addEventListener('click', function() {
            showGrid = !showGrid;
            this.classList.toggle('active', showGrid);
            functionChart.options.scales.x.grid.display = showGrid;
            functionChart.options.scales.y.grid.display = showGrid;
            functionChart.update();
        });
        
        // 特殊函数按钮事件
        specialBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                currentA = parseFloat(this.dataset.a);
                currentH = parseFloat(this.dataset.h);
                currentK = parseFloat(this.dataset.k);
                
                aInput.value = currentA;
                hInput.value = currentH;
                kInput.value = currentK;
                
                updateChart();
            });
        });
        
        // 初始设置
        setupDraggablePoint(aControlPoint, 'a');
        setupDraggablePoint(hControlPoint, 'h');
        setupDraggablePoint(vertexControl, 'vertex');
        updateChart();
        
        // 移动端优化
        document.documentElement.addEventListener('touchstart', function(event) {
            if (event.touches.length > 1) {
                event.preventDefault();
            }
        }, { passive: false });
        
        window.addEventListener('resize', updateChart);
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
        }
        animate();
    </script>
</body>
</html>