<style> /* 乐高游戏独立样式，隔离WP原有样式 */ .lego-game-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: “微软雅黑”, sans-serif; } .lego-game-wrap { background-color: #f0f8ff; padding: 20px; max-width: 1200px; margin: 0 auto; } .lego-game-wrap h1 { text-align: center; color: #ff5722; margin-bottom: 20px; text-shadow: 2px 2px 4px #ccc; font-size: 28px; } .lego-container { display: flex; gap: 20px; flex-wrap: wrap; } /* 积木选择区 */ .lego-box { width: 200px; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 10px #ddd; } .lego-box h3 { text-align: center; color: #333; margin-bottom: 15px; font-size: 16px; } .lego-item { width: 100%; height: 50px; margin: 8px 0; border-radius: 6px; cursor: grab; position: relative; } .lego-item::before { content: “”; position: absolute; top: -6px; left: 10%; width: 80%; height: 6px; background: inherit; border-radius: 3px 3px 0 0; display: flex; justify-content: space-around; } /* 积木颜色 */ .red { background: #e53935; } .blue { background: #1e88e5; } .yellow { background: #fdd835; } .green { background: #43a047; } .purple { background: #8e24aa; } .orange { background: #fb8c00; } /* 画布区域 */ .canvas-wrap { flex: 1; min-width: 300px; } #gameCanvas { width: 100%; height: 600px; background: #ffffff; border: 3px dashed #90caf9; border-radius: 10px; position: relative; overflow: hidden; box-shadow: 0 2px 10px #ddd; } /* 按钮样式 */ .btn-group { margin-top: 15px; text-align: center; } .btn-group button { padding: 10px 20px; margin: 0 8px; border: none; border-radius: 6px; background: #2196f3; color: white; font-size: 14px; cursor: pointer; transition: 0.2s; } .btn-group button:hover { background: #1976d2; } #resetBtn { background: #ff9800; } #resetBtn:hover { background: #f57c00; } .dragging { opacity: 0.6; cursor: grabbing; } .canvas-lego { position: absolute; cursor: grab; } /* 移动端自适应 */ @media (max-width: 768px) { .lego-container { flex-direction: column; } .lego-box { width: 100%; } #gameCanvas { height: 400px; } } </style> <div class=”lego-game-wrap”> <h1>🎨 乐高积木自由拼装</h1> <div class=”lego-container”> <!– 左侧积木选择区 –> <div class=”lego-box”> <h3>选择积木（拖拽使用）</h3> <div class=”lego-item red” draggable=”true” data-color=”red”></div> <div class=”lego-item blue” draggable=”true” data-color=”blue”></div> <div class=”lego-item yellow” draggable=”true” data-color=”yellow”></div> <div class=”lego-item green” draggable=”true” data-color=”green”></div> <div class=”lego-item purple” draggable=”true” data-color=”purple”></div> <div class=”lego-item orange” draggable=”true” data-color=”orange”></div> <div class=”btn-group”> <button id=”resetBtn”>清空画布</button> </div> </div> <!– 右侧拼装画布 –> <div class=”canvas-wrap”> <div id=”gameCanvas”></div> <div class=”btn-group”> <button id=”clearAll”>全部移除积木</button> </div> </div> </div> </div> <script> (function(){ const legoItems = document.querySelectorAll(‘.lego-item’); const gameCanvas = document.getElementById(‘gameCanvas’); const resetBtn = document.getElementById(‘resetBtn’); const clearAllBtn = document.getElementById(‘clearAll’); let activeDrag = null; let offsetX = 0; let offsetY = 0; // 积木拖拽 legoItems.forEach(item => { item.addEventListener(‘dragstart’, (e) => { e.dataTransfer.setData(‘color’, item.dataset.color); item.classList.add(‘dragging’); }); item.addEventListener(‘dragend’, () => { item.classList.remove(‘dragging’); }); }); // 画布放置 gameCanvas.addEventListener(‘dragover’, (e) => { e.preventDefault(); }); gameCanvas.addEventListener(‘drop’, (e) => { e.preventDefault(); const color = e.dataTransfer.getData(‘color’); if (!color) return; const newLego = document.createElement(‘div’); newLego.className = `lego-item ${color} canvas-lego`; const rect = gameCanvas.getBoundingClientRect(); const x = e.clientX – rect.left – 50; const y = e.clientY – rect.top – 25; newLego.style.left = `${x}px`; newLego.style.top = `${y}px`; bindMoveEvent(newLego); gameCanvas.appendChild(newLego); }); // 画布内积木移动 function bindMoveEvent(lego) { lego.addEventListener(‘mousedown’, (e) => { activeDrag = lego; lego.style.cursor = ‘grabbing’; const rect = lego.getBoundingClientRect(); offsetX = e.clientX – rect.left; offsetY = e.clientY – rect.top; }); } document.addEventListener(‘mousemove’, (e) => { if (!activeDrag) return; const canvasRect = gameCanvas.getBoundingClientRect(); let x = e.clientX – canvasRect.left – offsetX; let y = e.clientY – canvasRect.top – offsetY; x = Math.max(0, Math.min(x, canvasRect.width – activeDrag.offsetWidth)); y = Math.max(0, Math.min(y, canvasRect.height – activeDrag.offsetHeight)); activeDrag.style.left = `${x}px`; activeDrag.style.top = `${y}px`; }); document.addEventListener(‘mouseup’, () => { if (activeDrag) { activeDrag.style.cursor = ‘grab’; activeDrag = null; } }); // 清空按钮 resetBtn.addEventListener(‘click’, () => { gameCanvas.innerHTML = ”; }); clearAllBtn.addEventListener(‘click’, () => { gameCanvas.innerHTML = ”; }); })(); </script>