HTML&CSS：打造的拼图游戏，你能通关吗？

这段 HTML 代码创建了一个具有动画效果和交互功能的页面，展示了一系列的图像拼块，类似于一个拼图游戏。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        html {
            min-height: 100vh;
            display: grid;
            place-items: center;
            background: #222;
        }

        * {
            box-sizing: border-box;
        }

        p {
            font-family: system-ui;
            text-align: center;
            color: orange;
        }

        #box {
            width: 250px;
            height: 750px;
            border-radius: 125px;
            overflow: hidden;
            transform: scale(0.6);
            box-shadow: 0px 0px 50px orange;
        }

        .layer {
            width: 1000px;
            height: 250px;
            float: left;
            outline: 1px solid #222;
            --speed: 1s;
        }

        .layer:nth-child(odd) {
            animation: spin var(--speed) linear infinite;
        }

        .layer:nth-child(even) {
            animation: spin var(--speed) linear reverse infinite;
        }

        .piece {
            width: 250px;
            aspect-ratio: 1/1;
            float: left;
            background: url("https://img.freepik.com/free-vector/happy-halloween-character-collection_23-2148636622.jpg?size=626&ext=jpg&ga=GA1.1.2008272138.1721779200&semt=ais_user");
            background-size: 1000px 800px;
        }

        @keyframes spin {
            100% {
                transform: translateX(-750px);
            }
        }

        .layer:nth-child(1) .piece:nth-child(1),
        .layer:nth-child(1) .piece:nth-child(4) {
            background-position: -10px -50px;
        }

        .layer:nth-child(2) .piece:nth-child(1),
        .layer:nth-child(2) .piece:nth-child(4) {
            background-position: -10px -300px;
        }

        .layer:nth-child(3) .piece:nth-child(1),
        .layer:nth-child(3) .piece:nth-child(4) {
            background-position: -10px -550px;
        }

        .layer:nth-child(1) .piece:nth-child(2) {
            background-position: -250px -50px;
        }

        .layer:nth-child(2) .piece:nth-child(2) {
            background-position: -250px -300px;
        }

        .layer:nth-child(3) .piece:nth-child(2) {
            background-position: -250px -550px;
        }

        .layer:nth-child(1) .piece:nth-child(3) {
            background-position: -500px -50px;
        }

        .layer:nth-child(2) .piece:nth-child(3) {
            background-position: -500px -300px;
        }

        .layer:nth-child(3) .piece:nth-child(3) {
            background-position: -500px -550px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class='layer'>
            <div class='piece one'></div>
            <div class='piece two'></div>
            <div class='piece three'></div>
            <div class='piece four'></div>
        </div>
        <div class='layer'>
            <div class='piece one'></div>
            <div class='piece two'></div>
            <div class='piece three'></div>
            <div class='piece four'></div>
        </div>
        <div class='layer'>
            <div class='piece one'></div>
            <div class='piece two'></div>
            <div class='piece three'></div>
            <div class='piece four'></div>
        </div>
    </div>
    <script>
        let layers = document.querySelectorAll(".layer");
        layers.forEach(function (elm) {
            elm.addEventListener("click", function (e) {
                let p = document.elementFromPoint(e.clientX, e.clientY);
                elm.style.animation = "none";
                if (p.classList.contains("one") || p.classList.contains("four")) {
                    elm.style.transform = "translateX(0px)";
                }
                if (p.classList.contains("two")) {
                    elm.style.transform = "translateX(-250px)";
                }
                if (p.classList.contains("three")) {
                    elm.style.transform = "translateX(-500px)";
                }
            });
            elm.addEventListener("dblclick", function (e) {
                let p = document.elementFromPoint(e.clientX, e.clientY);
                elm.style.animation = "";
                elm.style.transform = "";
            });
        });

    </script>
</body>

</html>

HTML 结构

box：一个容器，用于包含多个图层.
layer：每个图层包含四个图像拼块.
piece one-piece four：每个拼块代表图像的一部分.

CSS 样式

html 样式：设置页面的最小高度为视口高度，使用 grid 布局使内容居中显示，背景颜色为深灰色.
*样式：设置所有元素的 box-sizing 为 border-box，使元素的尺寸包括边框和内边距.
p 样式：设置段落的字体、对齐方式和颜色.
#box 样式：定义容器的尺寸、形状、缩放和阴影效果.
.layer 样式：定义图层的尺寸、浮动和边框，设置动画速度变量.
.layer:nth-child(odd)和.layer:nth-child(even)样式：为奇数和偶数图层设置不同的动画效果，奇数图层顺时针旋转，偶数图层逆时针旋转.
.piece 样式：定义拼块的尺寸、形状和背景图像，背景图像的尺寸为 1000px 800px.
@keyframes spin：定义旋转动画的关键帧，使图层水平移动.
各个.layer 和.piece 的组合样式：设置不同拼块的背景位置，以显示图像的不同部分.

JS

获取所有图层元素.
为每个图层添加点击事件监听器，当点击时停止动画并根据点击位置设置图层的水平位置.
为每个图层添加双击事件监听器，当双击时恢复动画和初始位置.

HTML&CSS： 打造的拼图游戏，你能通关吗？

演示效果

HTML&CSS

HTML 结构

CSS 样式

JS

HTML&CSS：打造的拼图游戏，你能通关吗？