魔术方块：Trae一句话生成的“空间魔术”

说起 魔术方块 （Magic Block），脑子里立刻浮现那种 旋转、拼接、组合 的画面。玩家需要不断 挪动、旋转小方块 ，最后拼成目标图形。

过去要自己写这种拼图类游戏，得搞 方块旋转算法、形状匹配逻辑、移动控制、关卡设计，每个步骤都像是脑筋急转弯。

但现在，用 Trae IDE，一句话，一个完整的魔术方块游戏立刻成型。

💡 我想要的玩法

这次我脑子里画得很清楚：

玩家能自由旋转方块：通过按钮或键盘旋转、翻转；
拼接成目标图案：屏幕上有"目标形状"，玩家必须用手里的方块摆出来；
多种方块类型：不仅有方形，还有 L 形、T 形、长条形；
挑战逐步升级：关卡越到后面，形状越复杂，方块数量越多；
画面简洁清晰：像桌面拼图一样的舒适感。

于是我输入了一句话：

"生成魔术方块游戏，玩家通过旋转方块拼接成指定形状。"

✨ Trae 的"秒产"魔术

没过几秒，Trae 就给了我一个完整的 魔术方块游戏：

✅ 方块旋转逻辑完美 ：每次旋转都精准卡在网格上，没有错位；

✅ 拼图目标清晰可见 ：屏幕左侧展示目标形状，右侧是玩家操作区；

✅ 拖拽 & 移动顺滑 ：鼠标或触控都能操作，移动和摆放很跟手；

✅ 自动判定完成 ：拼对了会自动检测，弹出"通关"提示；

✅ 关卡设计丰富：前面简单热身，后面难度飙升，拼法越来越烧脑。

🧩 试玩体验

一上手就停不下来：

🟦 开局几个简单方块 ，轻松拼好，信心满满；

🟪 中期形状开始奇怪 ，摆来摆去，脑子开始打结；

💡 旋转方块时的"咔嗒"音效 ，让拼接动作更真实；

🏆 终于拼好一个复杂图案，那种成就感直接溢出屏幕。

Trae 做出的版本，不只是能玩，而是让你 边动手边动脑，上头到停不下来。

🛠 想加花样？一句话搞定

Trae 最大的乐趣就是：玩法随时扩展，比如：

"加个计时模式" → 限时拼图，增加紧迫感；
"加入颜色匹配机制" → 方块不仅要形状对，还要颜色对；
"增加随机旋转干扰" → 拼的时候方块会自动转一圈，更有挑战；
"加上多人对战模式" → 谁先拼出图案谁赢，现场比拼速度。

一句话，Trae 就会自动生成逻辑、UI 和交互。

🎮 过去 vs 现在

过去写魔术方块：

搞 旋转算法 & 坐标映射；
写 形状匹配判定；
设计 拼图关卡 & UI 交互；
调 手感、动画、提示效果。

麻烦又烧脑。

现在用 Trae：

👉 一句话 → 核心玩法即刻成型；

👉 想升级 → 再说一句，Trae 全搞定。

✅ 结语

如果你也想做一个 能拼、能转、能烧脑 的小游戏，打开 Trae，只要输入：

"生成魔术方块游戏，玩家通过旋转方块拼接成指定形状。"

几秒后，你就能玩到一个 考验空间感和耐心的益智游戏：旋转、拼接、挑战，一环扣一环，停不下来。

这就是 Trae 的魅力 ------ 一句话，让魔术方块"瞬间"拼好！

ini 复制代码

<!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>