游戏地址
demo地址：http://farman.sinaapp.com/static/blockpuzzle/index.html
代码地址：https://github.com/FarmanYu/blockpuzzle
背景
游戏来自于facebook上的html5小游戏，现在因为一些原因（你懂的，FUCK GFW），无法访问了，可以看下windows phone上的应用
在这里，相类似的游戏。
游戏玩法
简单描述一下游戏的玩法，页面上随机生成一些 block，这些block是根据关卡来设计的，由简入难。
玩家需要将这些 block，拼到游戏背景地图上，无缝隙的拼完，即完成该关卡。
思考问题
- 这个游戏开发难点是什么？
- 怎么设计这些block？
- 怎么计算完成？
我的设计
设计block
设计一个生产每个关卡的block数据的页面，链接在这里.
其中包含了一些简单的规则，
- block内部的小块，必须相连.
- 每个block的必须包含至少3个小块.
- 最重要的防作弊，如果每个数据都代表一个坐标，那很容易用这些坐标还原成图片位置，所以这些有比较关键的一步，将游戏数据的block位置，都让他们贴边，要么贴x轴，要么贴y轴.(哈哈哈，这下你们破不了原始数据了吧.)
设计游戏场景
- 有个开始界面，点击进去游戏主场景，不说了，so easy.
- 游戏主场景，本来想着用个什么js库来渲染什么的，后来发现还是想太多了，自己写快多了，本身没多少东西。
- 场景顶部放游戏的block，依次展开就好.
- 场景中心放置游戏地图.
设计游戏逻辑
- 存在一个辅助地图，就是看不到的逻辑地图，帮助玩家吸附block.避免没对上.
- 有个block的层次问题，想了很久，没啥好解决方案，因为是多canvas方案，最后使用的方案是，鼠标放在block上，自动提升该block的层级到最高，所以要是某个block选不到，可以鼠标放上去，马上就能被选中。还是有点撮啊…
对了，还有个问题没有交代，怎么选择canvas中的路径？
isPointInPath，正好用到canvas这个api.
碰撞问题，怎么判断block是否在map中？
很简单，图片的每个block都拆成正方形和整个地图的正方形，碰撞检测.
每个关都加上一个计时器，最终结束的时候，计算一个总的时间。就是你的得分，加一个很傻的关卡难度算法。
游戏想象中的未来
我想起那天夕阳下的奔跑，那是我逝去的青春。
- 可以添加分享按钮，暂时还没有做成兼容手机版的，也不兼容pad, 其实都可以做。
- 界面可以设计的更漂亮点，互动性更好，比如：block不可以重叠, 可以花点钱，买关卡提示，最快完成的给点奖励什么的等等
- 增加比赛模式，和好友一起比赛，看谁完成的多，完成的快。
- 让全世界的人都来玩，赚好多好多的钱，当上CEO，迎娶白富美 ，走上人森巅峰…