test

by j91157j91157

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>

CSS

body {
    background-color: black;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh;
}
.heart {
    position: absolute;
    color: red;
    user-select: none;
    pointer-events: none;
}

JavaScript

window.addEventListener('load', function() {
    const Engine = Matter.Engine;
    const Render = Matter.Render;
    const Runner = Matter.Runner;
    const Bodies = Matter.Bodies;
    const Composite = Matter.Composite;
    const Body = Matter.Body;
    const Events = Matter.Events;

    // 創建引擎
    const engine = Engine.create();
    const world = engine.world;

    // 創建隱藏的渲染器（只用於物理計算）
    const render = Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: window.innerWidth,
            height: window.innerHeight,
            wireframes: false,
            background: 'transparent'
        }
    });
    render.canvas.style.display = 'none';

    // 創建地面和牆壁
    const ground = Bodies.rectangle(
        window.innerWidth / 2, 
        window.innerHeight - 10, 
        window.innerWidth, 
        20, 
        { isStatic: true }
    );

    const leftWall = Bodies.rectangle(
        10, 
        window.innerHeight / 2, 
        20, 
        window.innerHeight, 
        { isStatic: true }
    );

    const rightWall = Bodies.rectangle(
        window.innerWidth - 10, 
        window.innerHeight / 2, 
        20, 
        window.innerHeight, 
        { isStatic: true }
    );

    Composite.add(world, [ground, leftWall, rightWall]);

    // 儲存愛心物體和DOM元素的對應
    const hearts = [];
    const maxHearts = 50; // 最多保留50個愛心

    // 創建愛心
    function createHeart(x, y, size) {
        // 創建物理物體
        const heartBody = Bodies.circle(x, y, size, {
            restitution: 0.4,
            friction: 0.5,
            density: 0.002
        });
        
        // 添加隨機旋轉
        Body.setAngularVelocity(heartBody, (Math.random() - 0.5) * 0.2);
        
        // 創建DOM元素
        const heartElement = document.createElement('div');
        heartElement.className = 'heart';
        heartElement.innerText = '❤';
        heartElement.style.fontSize =...