js实现积木

以下是使用JavaScript实现积木效果的几种方法，涵盖基础布局、交互逻辑和动画效果：

基础积木布局

使用HTML和CSS创建积木的基本结构，通过JavaScript动态生成积木元素：

// 创建积木容器
const container = document.createElement('div');
container.className = 'block-container';
document.body.appendChild(container);

// 生成彩色积木
const colors = ['#FF5733', '#33FF57', '#3357FF', '#F3FF33'];
for (let i = 0; i < 10; i++) {
  const block = document.createElement('div');
  block.className = 'block';
  block.style.backgroundColor = colors[i % colors.length];
  block.style.width = `${Math.random() * 100 + 50}px`;
  block.style.height = `${Math.random() * 100 + 50}px`;
  container.appendChild(block);
}

拖拽交互实现

为积木添加拖拽功能，使用HTML5的拖拽API：

document.querySelectorAll('.block').forEach(block => {
  block.draggable = true;

  block.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', block.id);
    setTimeout(() => block.style.opacity = '0.4', 0);
  });

  block.addEventListener('dragend', () => block.style.opacity = '1');
});

container.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
});

container.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const block = document.getElementById(id);
  block.style.left = `${e.clientX}px`;
  block.style.top = `${e.clientY}px`;
});

物理引擎集成

使用Matter.js实现积木的物理效果：

// 初始化物理引擎
const engine = Matter.Engine.create();
const world = engine.world;
const render = Matter.Render.create({
  element: document.body,
  engine: engine,
  options: { width: 800, height: 600 }
});

// 创建积木物理对象
const blocks = [];
for (let i = 0; i < 5; i++) {
  const block = Matter.Bodies.rectangle(
    Math.random() * 600 + 100,
    Math.random() * 200,
    80,
    80
  );
  blocks.push(block);
}

// 添加到世界并运行
Matter.Composite.add(world, blocks);
Matter.Engine.run(engine);
Matter.Render.run(render);

响应式积木墙

实现根据窗口大小自动调整的积木墙布局：

function createBlockWall() {
  const containerWidth = container.offsetWidth;
  const blockSize = 60;
  const cols = Math.floor(containerWidth / blockSize);

  container.innerHTML = '';
  for (let row = 0; row < 10; row++) {
    for (let col = 0; col < cols; col++) {
      const block = document.createElement('div');
      block.className = 'wall-block';
      block.style.left = `${col * blockSize}px`;
      block.style.top = `${row * blockSize}px`;
      container.appendChild(block);
    }
  }
}

window.addEventListener('resize', createBlockWall);
createBlockWall();

积木碰撞检测

实现简单的积木碰撞检测逻辑：

function checkCollisions() {
  const blocks = document.querySelectorAll('.block');
  blocks.forEach(block1 => {
    blocks.forEach(block2 => {
      if (block1 !== block2 && isColliding(block1, block2)) {
        block1.style.border = '2px dashed red';
        block2.style.border = '2px dashed red';
      }
    });
  });
}

function isColliding(a, b) {
  const rectA = a.getBoundingClientRect();
  const rectB = b.getBoundingClientRect();
  return !(
    rectA.right < rectB.left ||
    rectA.left > rectB.right ||
    rectA.bottom < rectB.top ||
    rectA.top > rectB.bottom
  );
}

setInterval(checkCollisions, 100);

这些方法可以单独使用或组合实现更复杂的积木效果。根据具体需求选择适合的实现方式，如需更真实的物理效果推荐使用专业物理引擎如Matter.js或Cannon.js。