flamingo-ui/es/pin-ball/PinBall.js

火烈鸟UI组件库

import "./PinBall-sfc.css";
import { onMounted, onBeforeUnmount, reactive, ref, inject } from "vue";
import Matter from "matter-js";
const __vue_sfc__ = {
  __name: "PinBall",
  props: {
    // 自定义：传入的字符串
    customWidth: {
      type: Number,
      default: 375
    }
  },
  emits: ["updateStrength"],
  setup(__props, { expose, emit }) {
    const props = __props;
    const engineNow = ref(null);
    onMounted(() => {
      set();
      const Engine = Matter.Engine;
      const Render = Matter.Render;
      const Bodies = Matter.Bodies;
      const Composite = Matter.Composite;
      const Runner = Matter.Runner;
      let engine = Engine.create();
      engineNow.value = engine;
      engine.world.gravity.y = 1.2;
      let render = Render.create({
        element: document.getElementById("container"),
        // 绑定页面元素
        engine,
        // 绑定引擎
        options: {
          pixelRatio: 1,
          // 设置像素比 这个关系到性能
          auto: true,
          background: "black",
          width: props.customWidth,
          height: 550 * (props.customWidth / 375),
          wireframes: false,
          showDebug: false,
          hasBounds: true
        }
      });
      Render.lookAt(render, {
        min: {
          x: 0,
          y: 0
        },
        max: {
          x: 375,
          y: 550
        }
      });
      Matter.Events.on(engine, "collisionStart", function(event) {
        const pairs = event.pairs;
        pairs.forEach((pair) => {
          if (pair.bodyB.id == 3) {
            console.log(
              `${(pair.bodyA.position.x / document.body.clientWidth).toFixed(2) * 100}%`
            );
          }
        });
      });
      Composite.add(engine.world, createAll());
      Render.run(render);
      var runner = Runner.create();
      Runner.run(runner, engine);
    });
    onBeforeUnmount(() => {
      clearInterval(time.value);
    });
    const gan = ref(null);
    const tag = ref(3);
    const time = ref(null);
    const boxA = ref(null);
    const strength = ref(0);
    const createAll = () => {
      let stack = Matter.Composites.stack(30, 200, 6, 3, 30, 100, function(x, y) {
        return Matter.Bodies.circle(x, y, 5, {
          isStatic: true,
          slop: 0,
          //粘性
          restitution: 0.2,
          // 设置弹力
          render: {
            fillStyle: "orange"
          }
        });
      });
      let dian = Matter.Bodies.circle(300, 320, 6, {
        isStatic: true,
        render: {
          fillStyle: "white"
        },
        collisionFilter: {
          group: -1
        }
      });
      let dianB = Matter.Bodies.circle(340, 330, 1, {
        isStatic: true,
        render: {
          fillStyle: "white",
          visible: false
        }
      });
      boxA.value = Matter.Bodies.circle(375 - 20, 298, 10, {
        isSleeping: true,
        id: 2,
        density: 0.8,
        // 密度
        friction: 0.1,
        frictionAir: 1e-3,
        frictionStatic: 0.1,
        restitution: 0.4,
        // 设置弹力
        mass: 1,
        slop: 0,
        render: {
          fillStyle: "white"
        }
      });
      gan.value = Matter.Bodies.rectangle(328, 320, 100, 20, {
        isSleeping: true,
        id: 1,
        mass: 9,
        render: {
          fillStyle: "orange"
        },
        collisionFilter: {
          group: -1
        }
      });
      let ban = Matter.Bodies.rectangle(270, 550 - 400 / 2, 2, 400, {
        isStatic: true,
        slop: 0,
        render: {
          fillStyle: "red"
        }
      });
      let banB = Matter.Bodies.rectangle(-1, 550 / 2, 1, 550, {
        isStatic: true,
        slop: 0,
        render: {
          fillStyle: "red"
        }
      });
      let banC = Matter.Bodies.rectangle(375 / 2, -1, 375, 1, {
        isStatic: true,
        render: {
          fillStyle: "red"
        }
      });
      let rotateConstraint = Matter.Constraint.create({
        bodyA: dian,
        bodyB: gan.value,
        length: 0,
        pointB: {
          x: -30,
          y: 0
        },
        render: {
          visible: false
        }
      });
      let ground = Matter.Bodies.rectangle(375 / 2, 550 - 10 / 2, 375, 10, {
        isStatic: true,
        id: 3,
        render: {
          fillStyle: "orange"
        }
      });
      return [
        ban,
        banB,
        boxA.value,
        gan.value,
        dianB,
        rotateConstraint,
        stack,
        dian,
        ground,
        banC
      ];
    };
    const set = () => {
      time.value = setInterval(() => {
        if (strength.value > 100)
          tag.value = -3;
        if (strength.value < 0)
          tag.value = 3;
        emit("updateStrength", strength.value += tag.value);
      }, 50);
    };
    const tan = () => {
      clearInterval(time.value);
      boxA.value.isSleeping = false;
      Matter.Body.applyForce(gan.value, gan.value.position, {
        x: 0,
        y: -0.2 * (strength.value / 100) - 0.33
      });
    };
    const reset = () => {
      Matter.Composite.clear(engineNow.value.world, false);
      Matter.Composite.add(engineNow.value.world, createAll());
      clearInterval(time.value);
      strength.value = 0;
      emit("updateStrength", 0);
      set();
    };
    expose({
      reset,
      tan
    });
    const __returned__ = { props, emit, engineNow, gan, tag, time, boxA, strength, createAll, set, tan, reset, onMounted, onBeforeUnmount, reactive, ref, inject, get Matter() {
      return Matter;
    } };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
};
import { openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
const _hoisted_1 = {
  class: "fmg-pin-ball",
  id: "container"
};
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock("div", _hoisted_1);
}
__vue_sfc__.render = __vue_render__;
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};