83 lines
3.2 KiB
JavaScript
83 lines
3.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
// Matter.js 模块别名
|
||
var Engine = Matter.Engine,
|
||
Render = Matter.Render,
|
||
Runner = Matter.Runner,
|
||
Bodies = Matter.Bodies,
|
||
Composite = Matter.Composite;
|
||
|
||
// 创建一个引擎
|
||
var engine = Engine.create();
|
||
|
||
// 创建一个运行器
|
||
var runner = Runner.create();
|
||
|
||
// 创建一个世界
|
||
var world = engine.world;
|
||
|
||
// 设置重力
|
||
engine.world.gravity.y = 1; // 标准重力
|
||
|
||
// 运行引擎
|
||
Runner.run(runner, engine);
|
||
|
||
// 函数：获取元素相对于视口的位置和尺寸
|
||
function getElementBounds(element) {
|
||
const rect = element.getBoundingClientRect();
|
||
return {
|
||
x: rect.left + rect.width / 2, // 元素中心点的x坐标
|
||
y: rect.top + rect.height / 2, // 元素中心点的y坐标
|
||
top: rect.top, // 元素顶边位置
|
||
left: rect.left, // 元素左边位置
|
||
width: rect.width, // 元素宽度
|
||
height: rect.height // 元素高度
|
||
};
|
||
}
|
||
|
||
// 获取物理效果元素和模块元素
|
||
const physicsBallEl = document.querySelector('.physics-ball'); // 选择球元素
|
||
const physicsRectEl = document.querySelector('.physics-rect'); // 选择矩形元素
|
||
const physicsBadgeEl = document.querySelector('.physics-badge'); // 选择徽章元素
|
||
const homeModules = document.querySelectorAll('.home-module'); // 选择所有模块元素
|
||
|
||
// 数组：用于保存物理物体和它们对应的HTML元素
|
||
const physicsElements = [];
|
||
|
||
// 为下落的物体创建物理物体
|
||
[physicsBallEl, physicsRectEl, physicsBadgeEl].forEach(el => {
|
||
if (el) {
|
||
const bounds = getElementBounds(el);
|
||
// 将物理物体定位在初始渲染位置上方一点
|
||
const body = Bodies.rectangle(bounds.x, bounds.top - 100, bounds.width, bounds.height, { restitution: 0.6, friction: 0.1 });
|
||
Composite.add(world, body);
|
||
physicsElements.push({ body: body, el: el });
|
||
el.style.visibility = 'hidden'; // 隐藏原始元素
|
||
el.style.position = 'absolute'; // 准备绝对定位
|
||
}
|
||
});
|
||
|
||
// 为模块创建静态物理物体（着陆表面）
|
||
homeModules.forEach(moduleEl => {
|
||
const bounds = getElementBounds(moduleEl);
|
||
const groundHeight =700; // 显著增加厚度
|
||
const groundY = bounds.top + groundHeight - 700; // 定位中心，使顶部边缘在 bounds.top + 10 处
|
||
const ground = Bodies.rectangle(bounds.x, groundY, bounds.width, groundHeight, { isStatic: true, friction: 0.8 });
|
||
Composite.add(world, ground);
|
||
});
|
||
|
||
// 更新HTML元素位置以匹配物理物体
|
||
function updateElements() {
|
||
physicsElements.forEach(({ body, el }) => {
|
||
// 根据物理物体的位置设置元素的位置
|
||
el.style.left = `${body.position.x - el.offsetWidth / 2}px`;
|
||
el.style.top = `${body.position.y - el.offsetHeight / 2}px`;
|
||
el.style.transform = `rotate(${body.angle}rad)`;
|
||
el.style.visibility = 'visible'; // 物理定位后使可见
|
||
});
|
||
requestAnimationFrame(updateElements);
|
||
}
|
||
|
||
// 开始更新元素位置
|
||
updateElements();
|
||
});
|