html怎么做华容道

华容道是一款古老的中国传统智力游戏，起源于我国古代的华容道故事，玩家需要通过移动滑块，将特定滑块从起点滑动到终点,下面我将为大家详细介绍如何在HTML中实现华容道游戏。

html怎么做华容道

我们需要创建一个HTML文件,并在其中添加以下代码：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华容道</title>
    <style>
        .container {
            width: 400px;
            height: 400px;
            position: relative;
            margin: 0 auto;
        }
        .block {
            width: 100px;
            height: 100px;
            position: absolute;
            background-color: #ccc;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            cursor: pointer;
        }
        .empty {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block" id="block1">1</div>
        <div class="block" id="block2">2</div>
        <div class="block" id="block3">3</div>
        <div class="block" id="block4">4</div>
        <div class="block empty" id="empty"></div>
        <div class="block" id="block5">5</div>
        <div class="block" id="block6">6</div>
        <div class="block" id="block7">7</div>
        <div class="block" id="block8">8</div>
    </div>
    <script>
        // 以下是华容道游戏的JavaScript代码
        const blocks = document.querySelectorAll('.block');
        const empty = document.querySelector('.empty');
        const container = document.querySelector('.container');
        let positions = {
            block1: { x: 0, y: 0 },
            block2: { x: 1, y: 0 },
            block3: { x: 2, y: 0 },
            block4: { x: 3, y: 0 },
            empty: { x: 3, y: 1 },
            block5: { x: 0, y: 1 },
            block6: { x: 1, y: 1 },
            block7: { x: 2, y: 1 },
            block8: { x: 3, y: 2 }
        };
        function updatePosition(block, x, y) {
            block.style.left = `${x * 100}px`;
            block.style.top = `${y * 100}px`;
        }
        function canMove(block) {
            const blockPos = positions[block.id];
            const emptyPos = positions['empty'];
            return (blockPos.x === emptyPos.x && Math.abs(blockPos.y - emptyPos.y) === 1) ||
                   (blockPos.y === emptyPos.y && Math.abs(blockPos.x - emptyPos.x) === 1);
        }
        function swap(block) {
            if (!canMove(block)) return;
            const blockPos = positions[block.id];
            const emptyPos = positions['empty'];
            positions[block.id] = { ...emptyPos };
            positions['empty'] = { ...blockPos };
            updatePosition(block, emptyPos.x, emptyPos.y);
            updatePosition(empty, blockPos.x, blockPos.y);
        }
        blocks.forEach(block => {
            block.addEventListener('click', () => swap(block));
        });
        // 初始化位置
        blocks.forEach(block => {
            const pos = positions[block.id];
            updatePosition(block, pos.x, pos.y);
        });
    </script>
</body>
</html>