炫彩重力场 – 星火AI

<div class="control-panel" ref="panel">
        <h2 class="title">
            物理实验室 <span class="badge">Matter.js</span>
        </h2>
        
        <div class="formula-box">
            
            重力公式：$F = $ <span class="highlight">$m$</span> $g$
        </div>

<div class="controls">
            <div class="control-item">
                <label>重力 (Gravity): {{ gravity.toFixed(1) }}</label>
                <input type="range" v-model.number="gravity" min="0" max="2" step="0.1" @input="updateGravity">
            </div>
            
            <div class="control-item">
                <label>弹性 (Bounciness): {{ restitution.toFixed(1) }}</label>
                <input type="range" v-model.number="restitution" min="0" max="1.2" step="0.1" @input="updateRestitution">
            </div>

<div class="btn-group">
                <button @click="addBall" class="btn btn-primary">生成小球</button>
                <button @click="clearWorld" class="btn btn-danger">清空画布</button>
            </div>
        </div>
        
        <p class="tip">💡 提示：用鼠标拖拽物体试试！</p>
    </div>
</div>

.physics-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #0f0c29;
    font-family: 'Segoe UI', sans-serif;
}

.canvas-wrapper {
    width: 100%;
    height: 100%;
}

.control-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.title {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge {
    font-size: 0.8rem;
    background: #FF4B1F;
    padding: 2px 8px;
    border-radius: 4px;
}

.formula-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: center;
}

.highlight {
    color: #FCD34D;
    font-weight: bold;
    margin: 0 4px;
}

.control-item {
    margin-bottom: 15px;
}

.control-item label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.control-item input[type="range"] {
    width: 100%;
    cursor: pointer;
}

.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.1s;
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary {
    background: #3B82F6;
    color: white;
}

.btn-danger {
    background: #EF4444;
    color: white;
}

.tip {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
}

const { createApp, ref, onMounted, onBeforeUnmount } = Vue;

// 引入 Matter.js 的模块
const Engine = Matter.Engine,
      Render = Matter.Render,
      Runner = Matter.Runner,
      Bodies = Matter.Bodies,
      Composite = Matter.Composite,
      Mouse = Matter.Mouse,
      MouseConstraint = Matter.MouseConstraint,
      Events = Matter.Events;

createApp({
    setup() {
        const panel = ref(null);
        const canvasContainer = ref(null);
        const gravity = ref(1);
        const restitution = ref(0.9);
        
        let engine, render, runner;

// 初始化物理引擎
        const initPhysics = () => {
            // 1. 创建引擎
            engine = Engine.create();
            
            // 2. 创建渲染器
            render = Render.create({
                element: canvasContainer.value,
                engine: engine,
                options: {
                    width: window.innerWidth,
                    height: window.innerHeight,
                    wireframes: false, // 关闭线框模式，显示颜色
                    background: 'transparent'
                }
            });

// 3. 添加边界 (地板、墙壁)
            const ground = Bodies.rectangle(window.innerWidth/2, window.innerHeight + 30, window.innerWidth, 60, { isStatic: true, render: { fillStyle: '#334155' } });
            const leftWall = Bodies.rectangle(-30, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
            const rightWall = Bodies.rectangle(window.innerWidth + 30, window.innerHeight/2, 60, window.innerHeight, { isStatic: true });
            
            Composite.add(engine.world, [ground, leftWall, rightWall]);

// 4. 添加鼠标交互
            const mouse = Mouse.create(render.canvas);
            const mouseConstraint = MouseConstraint.create(engine, {
                mouse: mouse,
                constraint: {
                    stiffness: 0.2,
                    render: { visible: false }
                }
            });
            Composite.add(engine.world, mouseConstraint);
            render.mouse = mouse;

// 5. 运行
            Render.run(render);
            runner = Runner.create();
            Runner.run(runner, engine);
            
            // 初始生成几个球
            for(let i=0; i<5; i++) addBall();
        };

// 生成随机小球
        const addBall = () => {
            const x = Math.random() * (window.innerWidth - 100) + 50;
            const size = Math.random() * 20 + 20; // 20-40px
            const color = ['#F59E0B', '#10B981', '#3B82F6', '#EC4899', '#8B5CF6'][Math.floor(Math.random() * 5)];
            
            const ball = Bodies.circle(x, -50, size, {
                restitution: restitution.value, // 弹性
                render: { fillStyle: color }
            });
            
            Composite.add(engine.world, ball);
        };

const clearWorld = () => {
            Composite.clear(engine.world, false); // false = keep static bodies (walls)
            // 重新添加墙壁逻辑略复杂，这里简单处理：只移除非静态物体
            const bodies = Composite.allBodies(engine.world);
            bodies.forEach(body => {
                if (!body.isStatic) Composite.remove(engine.world, body);
            });
        };

const updateGravity = () => {
            engine.gravity.y = gravity.value;
        };

const updateRestitution = () => {
            const bodies = Composite.allBodies(engine.world);
            bodies.forEach(body => {
                if (!body.isStatic) body.restitution = restitution.value;
            });
        };

onMounted(() => {
            // 启动物理引擎
            initPhysics();

// GSAP 入场动画 (强制使用 fromTo)
            if (panel.value) {
                gsap.fromTo(panel.value, 
                    { opacity: 0, x: 50 }, 
                    { opacity: 1, x: 0, duration: 0.8, ease: "power3.out", delay: 0.5 }
                );
            }
            
            // 渲染数学公式 (如果 KaTeX 存在)
            if (typeof renderMathInElement !== 'undefined') {
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: "$$", right: "$$", display: true},
                        {left: "$", right: "$", display: false}
                    ]
                });
            }
        });

onBeforeUnmount(() => {
            // 清理资源
            if (render) {
                Render.stop(render);
                Runner.stop(runner);
                render.canvas.remove();
            }
        });

return {
            panel,
            canvasContainer,
            gravity,
            restitution,
            addBall,
            clearWorld,
            updateGravity,
            updateRestitution
        };
    }
}).mount('#app');

完整代码

<div id="app" class="physics-container">
    <!-- 物理画布容器 -->
    <div ref="canvasContainer" class="canvas-wrapper"></div>

    <!-- 控制面板 -->
    <div class="control-panel" ref="panel">
        <h2 class="title">
            物理实验室 <span class="badge">Matter.js</span>
        </h2>
        
        <div class="formula-box">
            <!-- 严格遵守 KaTeX 三段式规则：$公式$ + HTML + $公式$ -->
            重力公式：$F = $ <span class="highlight">$m$</span> $g$
        </div>

        <div class="controls">
            <div class="control-item">
                <label>重力 (Gravity): {{ gravity.toFixed(1) }}</label>
                <input type="range" v-model.number="gravity" min="0" max="2" step="0.1" @input="updateGravity">
            </div>
            
            <div class="control-item">
                <label>弹性 (Bounciness): {{ restitution.toFixed(1) }}</label>
                <input type="range" v-model.number="restitution" min="0" max="1.2" step="0.1" @input="updateRestitution">
            </div>

            <div class="btn-group">
                <button @click="addBall" class="btn btn-primary">生成小球</button>
                <button @click="clearWorld" class="btn btn-danger">清空画布</button>
            </div>
        </div>
        
        <p class="tip">💡 提示：用鼠标拖拽物体试试！</p>
    </div>
</div>

🔒

完整代码仅限会员查看

立即登录 / 注册

💡 这段代码完全由 AI 生成。

登录后可复制完整代码