PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
引言
很早之前就打算做一个刮刮乐的游戏，奈何动力不足人又懒，错过中秋的月亮活动，又错过国庆的红旗活动，想着怎么着也别再拖到年后了吧，这不，就一使劲儿，摸鱼摸出来一个小游戏，刮刮乐表情包大作战，快来刮个痛快！
游戏演示
PC 端简易效果
移动端
结构说明
整体代码比较少，本文就不过多赘述代码内容，简单讲讲逻辑关系。源码链接
思路设计
这个游戏的设计思路很广泛，大体上概括为，前后的分层设计，涂层和涂层覆盖的刮开区。
涂层设计
涂层区，简洁的做法之一，是采用 canvas 绘制一个灰色的覆盖模封面，通过给其增加mousedown/mousemove/mouseup 事件绘制擦除痕迹，使得藏在涂层后面的真容显露出来，并且，在刮开涂层到一定比例后，移除涂层。
重点是mousemove事件处理（查看源码），需要根据起点和终点，计算出移动的距离和角度，从而求得笔刷事实的x, y坐标点，绘制笔刷。
笔刷的画法，是多种多样的，代码中也是最常见的一种方式，画一个半径为20的小圆，差不多手指肚的大小，也可用图片当成笔刷，每次绘制的就是一个固定的img对象。
这里面，最重要的是采用Poter Duff Alpha合成算法中的 compositing operator = destination-out合成模式，让背景色优于涂层显示。
ctx.globalCompositeOperation = 'destination-out'
复制代码最后，判断刮开区域当前百分比的范围，是否超过一定比例，比如设定的75%，超出后，一次性移除涂层。判断某一个点是否刮开，主要依赖于
CanvasRenderingContext2D.getImageData()函数返回的 ImageData 对象
读取data来获得Uint8ClampedArray数组，计算每个像素点的 rgba 值
复制代码刮开区设计
也就是后面的图案，隐藏在真像背后的故事，是什么让你这样迷恋这样的放肆？是什么让一个老汉端起了手中的枪？让我们一起看看刮开区的答案。
一个 div 元素就够啦，给它一个背景，今晚它就是最靓的 div。
不过，这里我使用的另一个 Canvas 绘制的背景，因为它不是一个简单的 base64 格式图片，它还有一些随机的因素设计在里面：
- 随机图加上随机的文字，组成丰富多彩的谜底。
- 随机的指令，比如
鲁迅：我没说过这句话，不过确实在理！这样的一种指令设定。 - 随机出现的位置，提现不同的差异化，水平垂直居中对齐，可能好看，但不够趣味。
- 随机图片，每一次都刮开一样的图片，乐趣何在？
与众不同之处
春节皮肤
在初版完成后，看起来的样子普普通通，毫无特点，即不喜庆，也看起来不好玩。
下图是，丑陋的初版
随后，增加了许多春节元素，比如对联红的背景色，福字颜色的字体色，新年表情图片，随机可见的喜庆节日的祝福语，让整个效果焕然一新。
如果再给红色的背景增加一些随机的“大福字”，效果又上升一层。
表情包
表情包能够更加深层次的表达出我们说话的意思，能够比文字有更形象的表达，是一种快乐的中二病，有时候自己都会觉得自己快要笑出腹肌了。
使用表情包的形式替换掉常规刮刮乐刮奖结果，乐趣更多，玩法更有新意。
总之，能发图的就别叨叨，能叨叨的就别搞乱七八糟的好几分钟的视频，简单一点卷一点。
遇到的问题
移动端的乐趣
最初的设计没有考虑移动端的，在 PC 上刮刮玩玩就挺爽，可是鼠标擦和手擦，毕竟是两回事呀，见过有什么用，亲手摸到才叫经历。
在移动端测试后，发现只有一个初始页面，大大的红色背景色，任何其他元素都没有，Why？
问题出在数据库的加载上，在 PC 端测试的时候，使用await: Use at module top level，结果渣渣手机还不支持，调整下写法就完美解决，剩下的就是适配优化不同屏幕下的显示尺寸，做好兼容。
结束语
好啦xdm，就到这里。如果对刮刮乐表情包大作战这个 idea 有撒子想法，咱们评论区唠唠嗑。它的目的很简单，让更多的人体会到摸鱼的快乐，并在此提前祝大家新年快乐，福虎生威。