一个HTML游戏总结

在慕课网上看来HTML游戏视频，吃鱼小游戏，刚刚开始看的时候，觉得挺好玩，应该很简单，就去看了看，本来想很快做完，结果，发现并没有想想中的那么简单，视频长度是大约6个小时，我总共花了20多个小时才搞定。发此博客，总结通过此次学习学到的几个重要的知识点。

1.      跟踪算法

名字是我自己定了，因为没有接触过制作游戏，根据自己的理解取的一个名字。意思就是，鱼跟着鼠标走，随着鱼离鼠标的距离越近，速度会越慢。以下是它的算法。

//aim 目标坐标

//cur 当前坐标

//ratio 速率

function lerpDistance(aim, cur,ratio) {

vardelta = cur - aim;

returnaim + delta * ratio;

}

可以先用直线上的两点测试一下这个算法。如果是二维的坐标系的话，那就要x,y坐标分别使用这个算法来实现。大家有兴趣可以试一下。

2.      旋转算法

这个算法在这个游戏里面使用起来是什么效果呢？其实就是鱼会跟着鼠标旋转（鱼的嘴巴会一直指着鼠标）。如果第一个算法理解了的话，第二个就很好理解了。代码如下：

function lerpAngle(a, b, t) {

vard = b - a;

if(d > Math.PI) d = d - 2 * Math.PI;

if(d < -Math.PI) d = d + 2 * Math.PI;

returna + d * t;

}

与第一个原理差不多，只不是一个是距离逼近，一个是角度逼近。大家有兴趣可以自己进行研究。在这里就不做过多的解释了。

3.      贝塞尔曲线

在此之前，没有接触过贝塞尔曲线，游戏中用的是二次的贝塞尔曲线对植物进行顺水摇摆。运用到这个游戏里的时候真的很简单。三个点，起始点，控制点和终止点。实现的原理是固定起始点和控制点，将终止点在水平方向上进行一定幅度的摇摆。这个使用sin()函数进行固定就行了。

当然也在其他的很多地方得到了不少体会，上述三点，我个人觉得这个游戏包含的比较经典的地方。当然，我在这里只是做的简短的总结和引入。如果感兴趣可以自行研究。