前几天写了一个JavaScript小游戏，大概是这样的

demo：strongfanfan.top/RunPig 　　

源代码：www.github.com/strongfanfan/RunPig

　　画风简约（low），技术实现上很简单，但是细节还是耗费了挺长时间的，本文主要复盘一下思路，和碰到的一些自以为的难点。

一、基本html+css骨架

二、基本逻辑

　　　1、舞台相对定位，pig和障碍绝对定位，通过js动态对left，top赋值。

　　　2、定时器定时执行render函数，形成动画效果，帧率60，定时间隔1000/fps。

　　　3、运动计算，键盘输入控制pig，每次render读取键盘判断onmousedown事件触发，计算运动偏移量

　　　4、碰撞检测，每次运动计算后，getRange提取位置信息，遍历floor数组对比位置信息，返回y轴速度和位置

　　基本就这样，下面讲一些实际调试中的问题。

三、碰到的坑

　　1、临界值计算调了好几次才算是正确检测到，画图真是好东西 - -，觉得很简单的临界值，总是有地方写错。

　　2、hitCheck，move，getrange三个函数设计好调用顺序再写。

　　3、以后写完代码立即总结，我记得遇到好多坑，但是现在想不起来了，我的天。

小游戏runpig总结