今儿个，咱来聊聊我最近捣鼓的一个小玩意儿——h5游戏。别看这东西名字里带个“游戏”，做起来还真有点门道。我也是两眼一抹黑，不知道从哪儿下手。后来我想着先别管那么多，干就完！
摸索阶段
我先去网上扒拉一堆资料，看看人家都是咋做的。这一看，还真让我发现不少好东西。原来这h5游戏，说白，就是用网页技术做出来的，不用下载，点开就能玩，方便得很。
我寻思着，这玩意儿既然是网页技术，那肯定得用到HTML、CSS和JavaScript这三兄弟。于是我又开始恶补这方面的知识。以前上学的时候，这些东西我也学过，但早就还给老师。这回可真是“书到用时方恨少”！
动手实践
光看不练假把式。我决定先从一个简单的游戏入手，就做一个“接金币”的小游戏。这游戏逻辑简单，就是一个小人在屏幕下面左右移动，接住从上面掉下来的金币。
- 第一步，搭架子。我用HTML把游戏的基本结构搭起来，一个canvas画布用来显示游戏画面，几个div用来显示得分、生命值之类的。
- 第二步，画图。用CSS给游戏元素加上样式，让小人、金币、背景都变得好看点。
- 第三步，写逻辑。用JavaScript控制小人的移动，金币的下落，以及碰撞检测。这部分是最费脑子的，我经常写着写着就晕头转向。
遇到的坑
做游戏的过程也不是一帆风顺的，我也遇到不少坑。比如，我发现小人移动起来一卡一卡的，不流畅。后来我查资料才知道，原来是因为我把控制小人移动的代码放在定时器里，而定时器的执行频率不稳定，导致小人移动不连贯。我把代码改成使用requestAnimationFrame，这问题才算解决。所以遇到不懂得就去查，总能解决。
一点小感悟
做完这个小游戏，我还真有点小小的成就感。虽然这游戏很简单，但毕竟是我亲手做出来的，而且还学到不少东西。我觉得，做h5游戏，最重要的就是要有目标，然后一步一步地去实现它。中间肯定会遇到各种各样的问题，但只要肯动脑筋，肯去查资料，总能找到解决的办法，还有就是分享欲，把自己学到的东西分享出来，不仅可以帮助别人，也能让自己记得更牢。
在设计一个大部分玩家都能达到的目标，可以更好的留住用户，另外这款游戏我还想着，可以有丰富的剧情设计，然后日常任务和副本玩法，这些都可以在游戏里面实现，这样就更好玩！