HTML5小游戏研究（二）:完善上一节的问题

昨天打球打得不错，找到手感上来两个crossover，简直无情。心情好了，继续解决遗留问题。

首先，看看需要搞定哪些问题

• 加速跳跃
• 各种bug
• 碰撞检测

(吐槽,优快云的markdown编辑器有BUG，之前打到一半的文章，因为我编辑了一下另一篇，文章内容都没了，这是因为他的HTML5存储有问题，所有文章公用一个存储区域）

加速跳跃

之前的跳跃太呆了，完全匀速，我玩了好久原著找感觉，发现他的方块跳跃是有加速度的，于是先加上一个跳跃的加速度。

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

各种BUG

由于我之前列举了好多问题，但由于文章丢了，我反复调试消灭了很多BUG，我自己也想不起来有什么了。

比如，方块落地的一瞬间会猛的前进一小段距离；撞墙后方块会在天上闪一下。诸如种种，都是一些小细节的参数微调，花点时间调试就可以。

碰撞检测

这个真是难到我了，实在想不出什么好办法来判断方块撞墙。搜索了一些方法，但对我这个案例的应用性不强，最容易理解的方法是给方块和障碍的边加坐标，但是太麻烦了了。

刚开始思考时，我给障碍加了一个辅助线，我发现匀速跳跃只有贴着线才能勉强通过。我就开始琢磨跳跃的轨迹和碰撞的关系。
3

我仔细观察了原著，他的方块跳跃的轨迹好像一个半圆，而这个半圆又是（障碍物高度 x 2）外接圆的轨迹，然后轨迹的半径在外接圆的半径的基础上加上方块的，就完美的解决了碰撞的问题。因为方块在空中转180度，从跳跃到落地的轨迹，正好是这个外接圆的外切矩形的运动轨迹，这样几乎不存在方块在空中时，边角碰到障碍的情况。我觉得是个不错的方法。

于是我也如法炮制，做了一个类似的，但是因为想不出来怎么才能跳出来半圆轨迹。这个也是有BUG的，如果仔细尝试。暂时先做一个，日后再研究。

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

小结

经过慢慢修改，逐渐有一点意思了，看来CANVAS做这个也是可以的，昨天看的电影《明日世界》里说“想象力比知识更重要”，要多想少限制自己。接下来，继续消除bug，增加开始界面，声音，动画元素。