vue2.0 超精简代码完美实现拼图游戏

最新推荐文章于 2024-08-08 08:35:16 发布

置顶

Hua929323125

最新推荐文章于 2024-08-08 08:35:16 发布

阅读量1.2k

点赞数

文章标签： vue2.0 拼图游戏

本文链接：https://blog.csdn.net/Hua929323125/article/details/86593973

版权

本文介绍了一种使用Vue2.0框架编写的极简拼图游戏实现方法，通过精简的代码实现游戏逻辑，适合学习Vue.js开发的开发者参考。

摘要由CSDN通过智能技术生成

一个超精简代码实现的拼图游戏直接上代码


<style lang='less' scoped>

#puzzle{
    .pic{
        // position:initial;
        width: 400px;
        height: 400px;
        margin: 0 auto;
        position: relative;
        // border: 1px solid #000;
        &.pic1{
            background: url(../assets/pic.jpg) no-repeat center;
            &>*{
                opacity: 0;
            }
        }
        div{
            position: absolute;
            background: url(../assets/pic.jpg) no-repeat;
            width: 100px;
            height:100px;
            border: 1px solid #fff;
            transition: all 0.3s;

        }
        .img-1,.img-2,.img-3,.img-4{
            top:0;
        }
        .img-5,.img-6,.img-7,.img-8{
            top:100px;
        }
        .img-9,.img-10,.img-11,.img-12{
            top:200px;
        }
        .img-13,.img-14,.img-15,.img-16{
            top:300px;
        }

        .img-1,.img-5,.img-9,.img