在慕课网上看来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()函数进行固定就行了。
当然也在其他的很多地方得到了不少体会,上述三点,我个人觉得这个游戏包含的比较经典的地方。当然,我在这里只是做的简短的总结和引入。如果感兴趣可以自行研究。