关于to九爪小蟹网站的一砖一瓦

背景

这个网站的建立是一时兴起，刚好也临近阿庞的生日，可以献出绵薄之力，就当是给阿庞做一个庆生网站。

这篇文章标题是关于to九爪小蟹网站的一砖一瓦，因为我要讲的是设计这个网站的全过程，如何一砖一瓦堆砌起来的，也算是一个纪念吧！

前提准备

1.Base

一个网站的前提当然是域名解析和服务器部署啦！这个过程比较枯燥，我写了一篇教程：小白建站全过程 ,有兴趣的可以自行移步浏览。

2.需求确立

网站形式：作为一个严肃的生日礼物，那当然是要包含很多惊喜和心意。我的想法是做一个展示类型的网站，主要是适配移动端（~~肯定不是因为我太懒不想适配PC端~~），因为手机在微信里，微博里可以随时打开，但电脑还需要打开电脑 -> 打开浏览器 -> 复制链接才能访问到网站。
网站架构: 作为一个严肃的生日礼物，还是根据主流展示类网站形式来做吧 == 主页+菜单+子板块页面。子版块页面通过菜单进入不同板块。
网站内容: 这方面有后援会各位伙伴绞尽脑汁的出谋划策，基本上是围绕粉丝的祝福（照片，视频）、后援会剪的视频、阿庞的故事进行讨论。作为后援会唯一的开发组成员，面对众多甲方瑟瑟发抖。确定了内容之后，怎么呈现就是我来负责了。

3.需求分析

主页: 好看！炫酷！开门见山！既然是一个严肃的生日礼物，那主页就做成一个礼物盒拆开，蹦出祝福的形式吧
菜单：手机端的菜单无非就是顶部或底部分栏切换，或者是一个菜单按钮，点击伸展出全部选项。菜单按钮的方式可以自定义，那就选择菜单按钮吧！（~~绝不是因为我不想做路由管理~~
子版块: 最重要的页面！要有内容和心意！

照片墙：可以放粉丝祝福
阿庞的时间轴：整理阿庞的辩论赛或者其它方面
关于阿庞的选择故事线，类似心理测试选择，最后得到一个专属结局
不如做一个游戏吧，翻下仓库的demo，翻牌游戏应该不错
彩蛋设计

coding

作为一个严肃的切图仔，就算没有产品和UI也要给先自己过一遍流程。但也只是在脑海构思一下，主要的细节还是在开发的过程中去修正。

1.主页

页面设计：
- 首先是找礼物盒素材，但发现如果用图片的话没法做到礼物蹦开的动画效果，那我就自己画一个吧。主要思路是①用两个长方形来做礼物盒下部和礼物盖子；②再给礼物盒和盖子加个阴影，增加立体感；③加上礼物盒丝带，看起来有点像了，但感觉还差个蝴蝶结；④可以画两个椭圆来拼接成蝴蝶结（因为css并不能直接画圆，可以通过拉伸圆来生成椭圆）；⑤看起来很像了！⑥动画部分的思路是让盖子和礼物盒下部相反方向摇晃（translateX,具体大小由帧数去调整）后，盖子往上方移走，下部往下方移走，然后隐藏。
- 礼物盒蹦开后，要设计元素飘出的动画，不然看起来很单调。为了页面性能，找了别人写好的svg图标来用，然后接下来就是比较枯燥的弹出动画，需要对每一行的icon进行动画设计，需要一行行调translate和scale，不过用了scss还是挺快的。
- 礼物盒打开动画完成后，接下来是下雪动画，这部分用canvas来实现，随机生成大小不同，透明度不一样的白色圆球，然后从上往下飘，这部分动画的算法比较复杂，借鉴了别人的写的算法来完善：Canvas Snow
- 功能函数完成后，就要来写步骤实现了，算好每个动画完成的全部时间，并在完成相应动画后回调下一步函数，并做好步骤判断，方便后面控制流程
- 细节完善：主体内容和功能实现后,因为感觉画面有点空，我做了一个关于阿庞的词云（关键词：799），加上之后果然饱满了不少。
后续完善：
- 后面感觉只有动画有点单调，我加上了背景音乐的播放
- 关于词云来做主页感觉有点敷衍，于是就去拜托一个朋友帮我画了阿庞的漫画人物，换了之后果然整个风格可爱了很多
- 添加了菜单跳转入口，感觉没有很好的做到引导访问，画蛇添足的加了提示说明，也没有想到更好的引导方式。（果然还是需要产品啊！）

2.照片墙

页面设计：
- 照片墙一开始的构思是一面墙，上面铺满照片，但我觉得太平淡了，不符合一个严肃的网站。所以，我用了three.js。其实就是在网页上放了一个三维坐标轴，然后把一个个粒子放在它该放的位置，加上动画过渡，再架上一个摄像头（也就是你看到的视角），一个炫酷的照片墙就完成了。
- 只有单独一种坐标排序当然不符合这个严肃的网站的气质，所以写了球和正方形的坐标算法，在加上799和PY的图形。这个过程就是拼图的过程，因为自定义图形没有规律，所以就只能一个个方格去放，比较繁琐。
- 外壳打造完毕后，就是内容填充了。照片素材的整理是由后援会伙伴们进行的，我没跟她们说清楚，导致图片的尺寸和体积有点大，加载速度就会很慢（毕竟是借来的服务器，带宽是最低配），于是我做了图片加载优化，先批量压缩（tinyPNG），然后图片是以背景图片(background-image)来呈现的，这样不用等全部图片加载完毕页面才会继续渲染。（其实应该用雪碧图的方式来做的，但我又懒了，还要一个个去调背景位置）
- 接下来最重点的内容了！就是粉丝祝福内容的呈现。我的想法就是点击一个格子，就有一个粉丝的祝福出来。这个也不难写，就是给每个格子加上点击事件，然后粉丝祝福容器出来，替换容器内容，弹出动画就是写几个关键帧。
后续完善
- 首先是关于粉丝祝福数据的数据结构，采用map来设计，一个格子对应一个object（name,weibo,[照片]）
- 粉丝祝福的照片后面我整理的时候，发现大部分粉丝一人不止发一张，我也不知道要选哪张，那就干脆写一个轮播来展示吧。也就是点击按钮的时候切换背景图片路径

3.小游戏

页面设计：

这个游戏我之前写过demo，于是就直接拿来用。将所有格子随机两两配对，也就是随机给两个格子加上相同的id，相同id的塞入相同的图片，后续的判断就是判断id是否相同来实现配对成功。因为手机屏幕的关系，所以只出了4*4，6*6，8*8的难度（10*10已经眼要瞎了，后面是后援会伙伴硬要挑战才加上的）。

游戏规则逻辑完成后，我加了分数算法，因为之前也没有写过类似的游戏得分算法，也只能自己拿自己来做试验和调试。得分受难度系数，所走步数和所用时间约束，不同的难度对应不同的步数难度系数和时间系数，计算公式可以简化成：100 - 时间损失 - 步数损失，小于零分直接算0分。有兴趣的也可以研究或者优化一下

//传入参数：所用时间，所走步数，难度模式
   function calcScore(time, step, hards) {
       let _hard = hards == "debug" ? 2 : (hards + 1) * 2 //难度，若是debug模式等于2
       let fastTime = _hard * 2 * 1000; //假设完成最快的时间,一秒完成一次配对
       let timeG, stepG; //时间,步数难度系数;
       switch (_hard) {
           case 4:
               timeG = 0.5;
               stepG = 0.4
               break
           case 6:
               timeG = 0.35;
               stepG = 0.3;
               break;
           case 8:
               timeG = 0.15;
               stepG = 0.15;
               break;
           case 10:
               timeG = 0.05;
               stepG = 0.05;
               break;
           default:
               timeG = 0.8;
               stepG = 0.5;
       }
       let interval = time - fastTime <= 0 ? 0 : time - fastTime; //时间差
       // 计算公式：100 - 时间损失 - 步数损失，小于零分直接给0分
       let score = 100 - (interval / 1000.00) * timeG - (step - _hard * 2) * stepG
       if (score <= 0) {
           return 0.00
       }
       return score.toFixed(2) //取两位小数
   }

后续完善
- 彩蛋设计，如果得分不少于90分，便可以看到彩蛋页面

4.H5多结局测试

页面设计
- 在头秃之前，写了基本框架和跳转动画，每个新的页面都是动态向html推入新的元素，点击不同的按钮塞入的信息不同而已
- 接下来是最头疼的故事线设计，还好有后援会伙伴一起肝，两人肝到头都秃了，终于设计好所有结局，于是有下面的流程图
- 做完测试后要告诉用户选过的选项，因此这个地方花了多一点时间来实现。一个全局数组来保存每一次点击的选项，然后最后遇到结局便pop所有子项
后续完善
- 这个板块其实不难实现，只是我们设计的流程架构有点大，因此写完测试的时候要把每条故事都走一遍，也是很花时间呀