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

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

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

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

(吐槽,CSDN的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,增加开始界面,声音,动画元素。

发布了39 篇原创文章 · 获赞 37 · 访问量 10万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章