H5游戏: 撕衣服 (2011-12-29)

发布时间 2011-12-29 13:59:01

想象一下，墙上贴着海报，撕掉上面一层海报，此时露出下面一层的旧海报。《撕衣服》，就是一个类似效果的小游戏，撕掉相片，会显示下面一层的相片。

操作很简单：

指针（鼠标或手指）不断划擦画面，从而显示出下层的画面。本身没有什么胜负或结束。

说一说技术原理:

1. 素材准备: 1张底图用于绘制在底下, 另1张上层图用于绘制在上面. 笔刷图片，用于模拟撕边效果。
2. 初始化: 绘制底图到画布
3. 鼠标或手指划过的地方，笔刷大小的区域, 标记为新增的擦除区域
4. 在新增的擦除区域绘制一小块上层图的对应位置的局部
5. 判断新增的擦除区域上下左右是否之前就已经擦除，是则不绘制边沿笔刷，否则绘制边沿笔刷

不足之处：

1. 撕边效果不够自然
2. 图片素材较少

体验链接: https://jsgame.net/cxp/mosatsu-cxp/ （海外服务器，如果载入较慢，请耐心。）