MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
$(function () {
  // 如果页面上没有 .bouncing-container，则无需执行
  if (!$('.bouncing-container').length) return;

  $('.bouncing-container').each(function () {
    const $container = $(this);
    const $div = $container.find('.bouncing-div');

    // 检查是否启用变色功能
    const changeColor = $container.data('changecolor') === 'yes';

    // 读取倍速参数
    const speedMultiplier = parseFloat($container.data('speed')) || 1;

    // 初始化位置和速度
    let x = Math.random() * ($container.width() - $div.width());
    let y = Math.random() * ($container.height() - $div.height());
    let dx = (Math.random() < 0.5 ? -1 : 1) * (2 + Math.random() * 2) * speedMultiplier; // x 速度乘以倍速
    let dy = (Math.random() < 0.5 ? -1 : 1) * (2 + Math.random() * 2) * speedMultiplier; // y 速度乘以倍速

    // 设置初始位置
    $div.css({ left: x, top: y });

    // 随机颜色生成函数
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    // 偏移角度函数
    function applyRandomAngleOffset() {
      // 20% 的概率应用随机偏移
      if (Math.random() < 0.2) {
        const angleOffset = (Math.random() * 5 - 2.5) * (Math.PI / 180); // -2.5° 到 2.5° 的弧度
        const speed = Math.sqrt(dx * dx + dy * dy); // 当前速度大小
        const angle = Math.atan2(dy, dx); // 当前角度

        // 应用角度偏移
        const newAngle = angle + angleOffset;
        dx = speed * Math.cos(newAngle);
        dy = speed * Math.sin(newAngle);
      }
    }

    // 移动和碰撞检测函数
    function move() {
      x += dx;
      y += dy;

      // 碰撞检测
      let collision = false;

      if (x <= 0 || x + $div.width() >= $container.width()) {
        dx = -dx; // 反向 x
        collision = true;
        applyRandomAngleOffset(); // 应用随机角度偏移
      }
      if (y <= 0 || y + $div.height() >= $container.height()) {
        dy = -dy; // 反向 y
        collision = true;
        applyRandomAngleOffset(); // 应用随机角度偏移
      }

      // 如果发生碰撞并且启用变色
      if (collision && changeColor) {
        $div.css('background-color', getRandomColor());
      }

      // 更新位置
      $div.css({ left: x, top: y });

      // 使用 requestAnimationFrame 来平滑动画
      requestAnimationFrame(move);
    }

    // 开始动画
    move();
  });
});