HTML5小游戏研究（一）:canvas初探，雏形:方块跳跃障碍

0x0

前几天玩了一个HTML5小游戏(http://www.lessmilk.com/game/box-jump/)，很有意思，但不支持手机。想着学习一下前端知识和JS，决定仿制一个。

0x1 先做个会动的方块

由于没有经验，不知如何下手，先用CANVAS绘制基本元素，动画使用的是setInterval不停的清除画板再绘制的方法，有了下面一个会从左跑到右的方块。（会动的一瞬间感觉弱爆了，完全不是那种感觉）
（重新点一下RESULT）

width="100%" height="600" src="//jsrun.net/8TKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen">

但是，问题来了，如果这样清空画板，如何控制方块跳跃呢？总不能也把跳跃的位置也算出来画上去吧。
在网上找了许久，有一个键盘控制方块移动的代码，原理也是清除画布，重绘方块，似乎使用canvas绘制无法满足。

0x2 控制方块跳跃

一觉过后，没有什么好的想法，决定一条道走到黑。
首先要控制方块跳跃，那么先监听键盘按键，执行跳跃。

width="100%" height="600" src="//jsrun.net/VTKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen">

0x3 跳跃时翻滚

跳跃过程中，方块需要翻滚。在这我试了好久，因为旋转操作只有旋转画布，需要save()和restore()，不然每次旋转画布都会累加，越转越远。我刚开始不知道，没有用save()，想当然只用了restore()。这个原理就像打游戏，存盘读盘一样，先存再恢复。

旋转画布时角度计算也挺繁琐，要根据方块升高的高度算好旋转的角度。
我没有设计逻辑，只是算了一个数，高度360，旋转360度，刚好方块在空中转一圈。

width="100%" height="600" src="//jsrun.net/TTKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen">

0x4 最终的雏形

好了，方块会跳了。那么让他向前跑起来。我把运动分为两个过程，一是不跳跃的时候，从左向右平移；二是跳跃时，只需在之前的基础上，加上水平平移的增量。
我又想了好久，想了增加一个canvas的方法用来添加障碍物。同时也明白了绘图只是最终的工作，先于绘图，要把游戏逻辑搞明白。正因为如此，我是在分别绘制方块和障碍物之后，才想好如何要检测方块与柱体的碰撞，想到需要一个方块类，其中包括运动状态和X,Y坐标等等，这些完善工作先放到以后完成，先把雏形做好。

width="100%" height="600" src="//jsrun.net/UTKKp/embedded/result,js/light/" allowfullscreen="allowfullscreen">

0x5 小结

雏形先做到这，思路比较混乱了，该去打球了。
还有很多小细节没有控制好，比如跳跃撞墙的坐标我还没计算好，撞墙后也会突然闪现到天上等等。
对于学习方面，虽然学了一些canvas的内容，但是暴露出自己JS基础薄弱，写的代码质量低下，而且构架设计有问题（几乎没有构架）。不过呢，还算学到一点东西吧。
下一节来继续完善这个雏形。