Google Gravity Effect

Adds a gravity effect to elements on the Google homepage.
当前为 2024-11-03 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Google Gravity Effect
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a gravity effect to elements on the Google homepage.
// @match        https://www.google.com/
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Add Matter.js script to the page
    const matterScript = document.createElement('script');
    matterScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js';
    matterScript.onload = () => startGravity();
    document.head.appendChild(matterScript);

    function startGravity() {
        // Create an engine
        const { Engine, Render, World, Bodies, Body } = Matter;
        const engine = Engine.create();

        // Render setup for the gravity effect
        const render = Render.create({
            element: document.body,
            engine: engine,
            options: {
                width: window.innerWidth,
                height: window.innerHeight,
                wireframes: false,
                background: 'transparent'
            }
        });

        Render.run(render);

        // Get Google elements
        const logo = document.getElementById('hplogo');
        const searchBar = document.querySelector('input[name="q"]');
        const buttons = document.querySelectorAll('input[type="submit"]');

        // Create physical bodies for elements
        const logoBody = createBodyFromElement(logo);
        const searchBarBody = createBodyFromElement(searchBar);
        const buttonBodies = Array.from(buttons).map(createBodyFromElement);

        // Add elements to the world
        World.add(engine.world, [logoBody, searchBarBody, ...buttonBodies]);

        // Add ground
        const ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight + 10, window.innerWidth, 20, {
            isStatic: true
        });
        World.add(engine.world, ground);

        // Run the engine
        Engine.run(engine);

        function createBodyFromElement(element) {
            const rect = element.getBoundingClientRect();
            const body = Bodies.rectangle(rect.left + rect.width / 2, rect.top + rect.height / 2, rect.width, rect.height, {
                restitution: 0.5,  // Bounciness
                friction: 0.3
            });

            // Sync body position with element
            Matter.Events.on(engine, 'afterUpdate', () => {
                element.style.position = 'absolute';
                element.style.left = `${body.position.x - rect.width / 2}px`;
                element.style.top = `${body.position.y - rect.height / 2}px`;
                element.style.transform = `rotate(${body.angle}rad)`;
            });

            return body;
        }
    }
})();