拼图小游戏模块开发总结

封面

目录

1. 成果展示
2. 开发过程中考虑的问题
3. 项目源码及使用方法

成果展示

最终实现成果

开发过程中考虑的问题

布局展示方面

1. 如何创建屏幕自适应的正方形盒子
   自适应宽度：
   考虑到拼图游戏会被添加到不同宽度的盒子中，如直接引入到不同分辨率的手机中，或不同指定宽度的盒子中，在这里，我们使用width: 100%，来设置正方形容器的宽度，让容器的宽度完全等于外部元素的宽度（因为块级元素独占一行，继承父元素的宽度，因此可以不用设置）。
   正方形盒子：
   使用padding-top: 100%让容器成为一个正方形，因为padding设置为百分比时，也是根据父元素的宽度进行计算的，并且在计算盒子的大小时，是包括在内的，（更明显一点的行为为，background会影响padding但是不会影响border,margin）。
   但是此时并没有完成，此时如果在标签中添加元素的话，元素会布局到padding-top的下面，撑高我们的容器，并不能达到我们要的效果，因此需要在添加一个内层的盒子并且将这个盒子相对于外层容器决定定位到左上角，然后由容器中的内容来撑高。（在这里我通过脚本计算，根据当前外层盒子的宽度，计算每个小图片的宽度，然后完美撑高盒子，如果使用CSS来设置，则需要配合box-size: padding-box;）。
   具体实现：

CSS:
    #outer {
                /*设置相对定位*/
            position: relative;
        /*设置正方形*/
        /*width属性会继承，块级元素可以不用设置*/
        /*width: 100%;*/
        padding-top: 100%;
        background: rgb(250, 250, 0);
    }

    #inner {
        /*定位到左上角*/
        position: absolute;
        top: 0;
        left: 0;
    }

HTML: 
    <div id="outer">
        <div id="inner">Happy Everyday</div>
    </div>

正方形容器

知识点：：
使用百分值设置盒模型（margin，border，padding，width，height）时，margin，padding，width都是相对于父元素的width，而height是相对于父元素的height（特殊：border的宽度为特定值，或者0）。

2. 如何获取这个盒子的宽度
   计算样式：
   计算样式：指的是经过浏览器进行整体处理后的综合结果。
   在这里，可以通过js来获取这个值：

var style = document.defaultView.getComputedStyle(ele, null);
// 获取宽度
var width = parseInt(style.width);

注意点：
使用这个函数返回的是一个对当前这个元素所有计算样式的引用，因此如果你在保存这个引用之后重新修改了样式，其中的样式值也会随之改变。
还有一点是，这个计算样式对象的所有属性值都是字符串，如果我们需要获取数值类型的数据，需要进一步进行处理。

3. 如何确定内部小方块的大小
   外层容器处理：
   让外层容器刚好可以被整除
   w_container(容器宽度) -= w_container % base(每行的方块个数) ；
   方块宽度计算公式（考虑到border）：
   w_ceil(小方块宽度) = Math.floor(w_container(容器宽度) / base) - 2 * border
   注意点：
   在小方块的宽度+border总和实际上是小于外部容器的宽度，base值越大，差值越大，就会导致不居中的问题。解决方式：将中间层容器设置dispaly: inner-block; 然后最外层设置text-align: center;让容器居中。
   方块设置为：dispaly: inner-block;排列时会出现缝隙的问题，是由于inner-block具有行内元素的特性，换行会出现空白折叠现象，每个方块之间出现一个空白。解决方式：font-size: 0;即可。

4. 图片的展示方式
   直接使用背景图片的方式，结合使用background-image, background-position, background-size来实现。
   注意点：
   图片的定位：background-position，是根据background-size的大小进行设置的，如果没有设置后者，则是根据实际大小来设置，但是如果设置了，则根据设置的大小进行定位。且定位的值都为负值。

图片处理逻辑

将图片切割成nn份，然后从左到右，从上到下，一起进行编号（0 ~nn-1），采用一个数组来存放当前图片的实际顺序（即方块中对应的图片索引）。

1. 图片定位
   给定一个图片的位置，则：
   row：position / 3
   col: postion % 3
   最终位置为（左上角为(0, 0)）：
   x = col * w_ceil(方块宽度)
   y = row * w_ceil(方块宽度)

2. 图片打乱
   每次上述数组中的两个点，然后互换这两个点中的内容，重复多次这样的操作。

3. 拼图检测
   如果数组中对应元素和索引值相等，则此时图片即在正确的位置上。

其他方面

1. 页面结构和基础样式，只在初始化是进行一次处理，重新开始游戏时，只图片不会对整个拼图模块进行重新布局。

2. DOM引用本地化：在脚本运行时，便对需要使用的页面元素进行本地化，减少DOM操作。

3. 实现了封装，将所有将页面结构，样式，处理逻辑都封装在内部，只对提供了一些api以及可配置项，只需要引入一个js文件，调用相应api，即可实现一个拼图游戏

项目源码及使用方法

github线上地址