说起 魔术方块（Magic Block），脑子里立刻浮现那种 旋转、拼接、组合 的画面。玩家需要不断 挪动、旋转小方块，最后拼成目标图形。
过去要自己写这种拼图类游戏，得搞 方块旋转算法、形状匹配逻辑、移动控制、关卡设计，每个步骤都像是脑筋急转弯。
但现在，用 Trae IDE，一句话，一个完整的魔术方块游戏立刻成型。
💡 我想要的玩法
这次我脑子里画得很清楚：
- 玩家能自由旋转方块：通过按钮或键盘旋转、翻转；拼接成目标图案：屏幕上有“目标形状”，玩家必须用手里的方块摆出来；多种方块类型：不仅有方形，还有 L 形、T 形、长条形；挑战逐步升级：关卡越到后面，形状越复杂，方块数量越多；画面简洁清晰：像桌面拼图一样的舒适感。
于是我输入了一句话：
“生成魔术方块游戏，玩家通过旋转方块拼接成指定形状。”
✨ Trae 的“秒产”魔术
没过几秒，Trae 就给了我一个完整的 魔术方块游戏：
✅ 方块旋转逻辑完美：每次旋转都精准卡在网格上，没有错位；
✅ 拼图目标清晰可见：屏幕左侧展示目标形状，右侧是玩家操作区；
✅ 拖拽 & 移动顺滑：鼠标或触控都能操作，移动和摆放很跟手；
✅ 自动判定完成：拼对了会自动检测，弹出“通关”提示；
✅ 关卡设计丰富：前面简单热身，后面难度飙升，拼法越来越烧脑。
🧩 试玩体验
一上手就停不下来：
🟦 开局几个简单方块，轻松拼好，信心满满；
🟪 中期形状开始奇怪，摆来摆去，脑子开始打结；
💡 旋转方块时的“咔嗒”音效，让拼接动作更真实；
🏆 终于拼好一个复杂图案，那种成就感直接溢出屏幕。
Trae 做出的版本，不只是能玩，而是让你 边动手边动脑，上头到停不下来。
🛠 想加花样？一句话搞定
Trae 最大的乐趣就是：玩法随时扩展，比如：
- “加个计时模式” → 限时拼图，增加紧迫感；“加入颜色匹配机制” → 方块不仅要形状对，还要颜色对；“增加随机旋转干扰” → 拼的时候方块会自动转一圈，更有挑战；“加上多人对战模式” → 谁先拼出图案谁赢，现场比拼速度。
一句话，Trae 就会自动生成逻辑、UI 和交互。
🎮 过去 vs 现在
过去写魔术方块：
- 搞 旋转算法 & 坐标映射；写 形状匹配判定；设计 拼图关卡 & UI 交互；调 手感、动画、提示效果。
麻烦又烧脑。
现在用 Trae：
👉 一句话 → 核心玩法即刻成型；
👉 想升级 → 再说一句，Trae 全搞定。
✅ 结语
如果你也想做一个 能拼、能转、能烧脑 的小游戏，打开 Trae，只要输入：
“生成魔术方块游戏，玩家通过旋转方块拼接成指定形状。”
几秒后，你就能玩到一个 考验空间感和耐心的益智游戏：旋转、拼接、挑战，一环扣一环，停不下来。
这就是 Trae 的魅力 —— 一句话，让魔术方块“瞬间”拼好！
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>魔术方块游戏</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #333; margin-bottom: 20px; } .game-container { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; } .game-board { display: grid; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); gap: 5px; background-color: #ddd; padding: 10px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .cube { width: 100px; height: 100px; background-color: #fff; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.3s ease; position: relative; } .cube-inner { width: 80%; height: 80%; background-color: #4CAF50; border-radius: 5px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 24px; } .cube.empty .cube-inner { background-color: transparent; } .target-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; } .target-board { display: grid; grid-template-columns: repeat(4, 50px); grid-template-rows: repeat(4, 50px); gap: 2px; background-color: #bbb; padding: 5px; border-radius: 5px; } .target-cell { width: 50px; height: 50px; background-color: #ddd; border-radius: 3px; } .target-cell.active { background-color: #4CAF50; } .controls { display: flex; gap: 10px; margin-bottom: 20px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .level-info { font-size: 18px; margin-bottom: 10px; color: #333; } .moves-info { font-size: 16px; margin-bottom: 10px; color: #666; } .win-message { font-size: 24px; color: #4CAF50; font-weight: bold; margin: 20px 0; display: none; } </style></head><body> <h1>魔术方块游戏</h1> <div class="level-info">关卡: <span id="level-number">1</span></div> <div class="moves-info">移动次数: <span id="moves-count">0</span></div> <div class="target-container"> <h3>目标形状</h3> <div class="target-board" id="target-board"></div> </div> <div class="game-container"> <div class="game-board" id="game-board"></div> </div> <div class="controls"> <button id="rotate-btn">旋转选中方块</button> <button id="reset-btn">重置当前关卡</button> <button id="next-level-btn" disabled>下一关</button> </div> <div class="win-message" id="win-message">恭喜！你完成了当前关卡！</div> <script> // 游戏状态 const gameState = { level: 1, moves: 0, selectedCube: null, cubes: [], targetPattern: [], levels: [ // 关卡1 { pattern: [ [0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0] ], initialCubes: [ { x: 1, y: 1, rotation: 90 }, { x: 2, y: 1, rotation: 180 }, { x: 1, y: 2, rotation: 270 }, { x: 2, y: 2, rotation: 0 } ] }, // 关卡2 { pattern: [ [0, 1, 1, 0], [1, 1, 1, 1], [1, 1, 1, 1], [0, 1, 1, 0] ], initialCubes: [ { x: 0, y: 1, rotation: 90 }, { x: 1, y: 0, rotation: 180 }, { x: 2, y: 0, rotation: 270 }, { x: 3, y: 1, rotation: 0 }, { x: 0, y: 2, rotation: 0 }, { x: 1, y: 3, rotation: 270 }, { x: 2, y: 3, rotation: 180 }, { x: 3, y: 2, rotation: 90 }, { x: 1, y: 1, rotation: 0 }, { x: 2, y: 1, rotation: 90 }, { x: 1, y: 2, rotation: 180 }, { x: 2, y: 2, rotation: 270 } ] }, // 关卡3 { pattern: [ [0, 1, 1, 0], [1, 0, 0, 1], [1, 0, 0, 1], [0, 1, 1, 0] ], initialCubes: [ { x: 0, y: 1, rotation: 0 }, { x: 1, y: 0, rotation: 90 }, { x: 2, y: 0, rotation: 180 }, { x: 3, y: 1, rotation: 270 }, { x: 0, y: 2, rotation: 270 }, { x: 1, y: 3, rotation: 180 }, { x: 2, y: 3, rotation: 90 }, { x: 3, y: 2, rotation: 0 } ] } ] }; // DOM 元素 const gameBoard = document.getElementById('game-board'); const targetBoard = document.getElementById('target-board'); const rotateBtn = document.getElementById('rotate-btn'); const resetBtn = document.getElementById('reset-btn'); const nextLevelBtn = document.getElementById('next-level-btn'); const levelNumber = document.getElementById('level-number'); const movesCount = document.getElementById('moves-count'); const winMessage = document.getElementById('win-message'); // 初始化游戏 function initGame() { levelNumber.textContent = gameState.level; movesCount.textContent = gameState.moves = 0; gameState.selectedCube = null; nextLevelBtn.disabled = true; winMessage.style.display = 'none'; // 清空游戏板和目标板 gameBoard.innerHTML = ''; targetBoard.innerHTML = ''; // 获取当前关卡数据 const currentLevel = gameState.levels[gameState.level - 1]; gameState.targetPattern = currentLevel.pattern; // 创建目标板 for (let y = 0; y < 4; y++) { for (let x = 0; x < 4; x++) { const cell = document.createElement('div'); cell.className = 'target-cell'; if (currentLevel.pattern[y][x] === 1) { cell.classList.add('active'); } targetBoard.appendChild(cell); } } // 创建游戏板 gameState.cubes = []; for (let y = 0; y < 4; y++) { for (let x = 0; x < 4; x++) { const cube = document.createElement('div'); cube.className = 'cube empty'; cube.dataset.x = x; cube.dataset.y = y; const cubeInner = document.createElement('div'); cubeInner.className = 'cube-inner'; cube.appendChild(cubeInner); gameBoard.appendChild(cube); } } // 放置初始方块 currentLevel.initialCubes.forEach(cubeData => { const cube = gameBoard.querySelector(`.cube[data-x="${cubeData.x}"][data-y="${cubeData.y}"]`); cube.classList.remove('empty'); // 创建方块对象 const cubeObj = { element: cube, x: cubeData.x, y: cubeData.y, rotation: cubeData.rotation, shape: createCubeShape() }; // 应用旋转 cubeObj.element.querySelector('.cube-inner').style.transform = `rotate(${cubeObj.rotation}deg)`; // 存储方块对象 gameState.cubes.push(cubeObj); // 添加点击事件 cube.addEventListener('click', () => selectCube(cubeObj)); }); // 检查初始状态 checkWinCondition(); } // 创建方块形状 (L形) function createCubeShape() { return [ [1, 0], [1, 0], [1, 1] ]; } // 选择方块 function selectCube(cube) { // 取消之前的选择 if (gameState.selectedCube) { gameState.selectedCube.element.style.boxShadow = ''; } // 设置新的选择 gameState.selectedCube = cube; cube.element.style.boxShadow = '0 0 0 3px #ff9800'; } // 旋转方块 function rotateCube() { if (!gameState.selectedCube) { alert('请先选择一个方块！'); return; } // 增加移动次数 gameState.moves++; movesCount.textContent = gameState.moves; // 旋转方块 gameState.selectedCube.rotation = (gameState.selectedCube.rotation + 90) % 360; gameState.selectedCube.element.querySelector('.cube-inner').style.transform = `rotate(${gameState.selectedCube.rotation}deg)`; // 检查是否完成目标 checkWinCondition(); } // 检查是否完成目标 function checkWinCondition() { // 创建当前游戏板状态 const currentState = Array(4).fill().map(() => Array(4).fill(0)); // 根据方块位置和旋转填充当前状态 gameState.cubes.forEach(cube => { const shape = getRotatedShape(cube.shape, cube.rotation); const x = cube.x; const y = cube.y; // 将形状应用到当前状态 for (let sy = 0; sy < shape.length; sy++) { for (let sx = 0; sx < shape[0].length; sx++) { if (shape[sy][sx] === 1) { const boardX = x + sx; const boardY = y + sy; // 确保在游戏板范围内 if (boardX >= 0 && boardX < 4 && boardY >= 0 && boardY < 4) { currentState[boardY][boardX] = 1; } } } } }); // 比较当前状态和目标状态 let isMatch = true; for (let y = 0; y < 4; y++) { for (let x = 0; x < 4; x++) { if (currentState[y][x] !== gameState.targetPattern[y][x]) { isMatch = false; break; } } if (!isMatch) break; } // 如果匹配，显示胜利消息 if (isMatch) { winMessage.style.display = 'block'; nextLevelBtn.disabled = false; } else { winMessage.style.display = 'none'; nextLevelBtn.disabled = true; } } // 获取旋转后的形状 function getRotatedShape(shape, rotation) { let rotatedShape = JSON.parse(JSON.stringify(shape)); // 根据旋转角度旋转形状 const rotations = (rotation / 90) % 4; for (let i = 0; i < rotations; i++) { rotatedShape = rotateShapeOnce(rotatedShape); } return rotatedShape; } // 旋转形状90度 function rotateShapeOnce(shape) { const rows = shape.length; const cols = shape[0].length; const rotated = Array(cols).fill().map(() => Array(rows).fill(0)); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { rotated[x][rows - 1 - y] = shape[y][x]; } } return rotated; } // 下一关 function nextLevel() { if (gameState.level < gameState.levels.length) { gameState.level++; initGame(); } else { alert('恭喜！你已完成所有关卡！'); // 重新开始第一关 gameState.level = 1; initGame(); } } // 重置当前关卡 function resetLevel() { initGame(); } // 事件监听 rotateBtn.addEventListener('click', rotateCube); resetBtn.addEventListener('click', resetLevel); nextLevelBtn.addEventListener('click', nextLevel); // 初始化游戏 initGame(); </script></body></html>