flamingo-ui
Version:
火烈鸟UI组件库
263 lines (262 loc) • 8.19 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
default: () => stdin_default
});
module.exports = __toCommonJS(stdin_exports);
var import_PinBall_sfc = require("./PinBall-sfc.css");
var import_vue = require("vue");
var import_matter_js = __toESM(require("matter-js"));
var import_vue2 = require("vue");
const __vue_sfc__ = {
__name: "PinBall",
props: {
// 自定义：传入的字符串
customWidth: {
type: Number,
default: 375
}
},
emits: ["updateStrength"],
setup(__props, { expose, emit }) {
const props = __props;
const engineNow = (0, import_vue.ref)(null);
(0, import_vue.onMounted)(() => {
set();
const Engine = import_matter_js.default.Engine;
const Render = import_matter_js.default.Render;
const Bodies = import_matter_js.default.Bodies;
const Composite = import_matter_js.default.Composite;
const Runner = import_matter_js.default.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
}
});
import_matter_js.default.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);
});
(0, import_vue.onBeforeUnmount)(() => {
clearInterval(time.value);
});
const gan = (0, import_vue.ref)(null);
const tag = (0, import_vue.ref)(3);
const time = (0, import_vue.ref)(null);
const boxA = (0, import_vue.ref)(null);
const strength = (0, import_vue.ref)(0);
const createAll = () => {
let stack = import_matter_js.default.Composites.stack(30, 200, 6, 3, 30, 100, function(x, y) {
return import_matter_js.default.Bodies.circle(x, y, 5, {
isStatic: true,
slop: 0,
//粘性
restitution: 0.2,
// 设置弹力
render: {
fillStyle: "orange"
}
});
});
let dian = import_matter_js.default.Bodies.circle(300, 320, 6, {
isStatic: true,
render: {
fillStyle: "white"
},
collisionFilter: {
group: -1
}
});
let dianB = import_matter_js.default.Bodies.circle(340, 330, 1, {
isStatic: true,
render: {
fillStyle: "white",
visible: false
}
});
boxA.value = import_matter_js.default.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 = import_matter_js.default.Bodies.rectangle(328, 320, 100, 20, {
isSleeping: true,
id: 1,
mass: 9,
render: {
fillStyle: "orange"
},
collisionFilter: {
group: -1
}
});
let ban = import_matter_js.default.Bodies.rectangle(270, 550 - 400 / 2, 2, 400, {
isStatic: true,
slop: 0,
render: {
fillStyle: "red"
}
});
let banB = import_matter_js.default.Bodies.rectangle(-1, 550 / 2, 1, 550, {
isStatic: true,
slop: 0,
render: {
fillStyle: "red"
}
});
let banC = import_matter_js.default.Bodies.rectangle(375 / 2, -1, 375, 1, {
isStatic: true,
render: {
fillStyle: "red"
}
});
let rotateConstraint = import_matter_js.default.Constraint.create({
bodyA: dian,
bodyB: gan.value,
length: 0,
pointB: {
x: -30,
y: 0
},
render: {
visible: false
}
});
let ground = import_matter_js.default.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;
import_matter_js.default.Body.applyForce(gan.value, gan.value.position, {
x: 0,
y: -0.2 * (strength.value / 100) - 0.33
});
};
const reset = () => {
import_matter_js.default.Composite.clear(engineNow.value.world, false);
import_matter_js.default.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: import_vue.onMounted, onBeforeUnmount: import_vue.onBeforeUnmount, reactive: import_vue.reactive, ref: import_vue.ref, inject: import_vue.inject, get Matter() {
return import_matter_js.default;
} };
Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
return __returned__;
}
};
const _hoisted_1 = {
class: "fmg-pin-ball",
id: "container"
};
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
return (0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)("div", _hoisted_1);
}
__vue_sfc__.render = __vue_render__;
var stdin_default = __vue_sfc__;