JS 中 Math 对象的【三角函数】的用法与实战例子【打靶游戏】 | Math.tan(), Math.cos(), Math.sin()

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a727911438/article/details/70329228

不少人在学习JavaScript的时候,都知道有那么一个用于数学计算的类 Math,现在来简单回顾以下,强大的 Math 类中,有哪些属性和哪些方法:




如果用JS做前端的时候,就会发现跟 Math 类打交道比较少。但是如果用 Node.js  做后台,或用 JS 写游戏的时候,Math 类就会无处不在,尤其是 random()、round()、abs()、ceil()、floor() 等方法很常用。本篇文章就来说说Math 类中的 sin()、cos()、tan() 这三个中学时期的数学重点究竟在JS中怎么用。



一、理论部分


Math 类的 sin(x)、cos(x)、tan(x) 中的 x 参数是弧度,那么,弧度是什么?


最直观地说,一个 60度 的角,可以用 60°来表示,也可以用 π / 3 (圆周率除以3)来表示;


同理,一个 90度 的角,可以用 90°来表示,也可以用 π / 2 (圆周率除以2)来表示;


还有,一个 180度 的角,可以用 180°来表示,也可以用 π 来表示。



那么,【60°=π / 3】,90°=π / 2180°=π】,等号的左边是度数,右边是弧度



是否回忆起来一个这么的例子,【 cos(60°) = cos(π/3 ) = 1/2 = 0.5


换句话说,一个角度,可以用度数来表示,也可以用弧度来表示。因为弧度更加符合计算机的计算模式,所以,Math 类的 sin(x)、cos(x)、tan(x) 中的 x 参数类型为弧度。


中学时期,我们知道,30、45、60、90、180 这些角度是特殊角,用弧度来表示相对容易,所以我们当时只背了这么特殊角度的弧度值,然后理所当然地,慢慢地遗忘了弧度的概念,本文也不阐述弧度的概念,而是直接上一条公式,怎么转换度数为弧度值:


------------------------------------------------------------

弧度 = 角度 × π / 180

-----------------------------------------------


怎么应用到代码里面?


var angle = 60;    //假设角度为60度

var radian = angle * Math.PI / 180;    //计算出弧度

console.log( Math.cos(radian) );    //输出cos 60度的值


用法就这么简单!理论部分到此结束,接下来讲一点实战部分。




二、实战部分


需求:做一个小游戏,有一把枪,一个靶子。枪头的角度可以旋转,靶子可以左右移动。现在要控制枪头对准移动的靶子射击,直到靶子射到烂为止。(下图为简单的图形界面,红点为锚点)




整一个小游戏的开发都很简单。只有在碰撞的实现上有点难度,传统做法,每次一开枪,射出去的子弹一碰到靶子就视为打中靶子。


现在问题是,传统做法中的子弹如果速度太快的情况下,碰撞检测很大可能会失效(原理请自己翻阅游戏开发相关书籍)。所以,不能用传统做法来实现碰撞,那怎么办?想象一下,子弹的射击速度非常快,一开枪,一瞬间,就会沿着瞄准的方向射去。我们只需要在开枪的时候,判断靶子是否与射线碰撞了,如果碰撞则射中,否则射偏。




有了这个思路,就可以扩展了,加上枪头的旋转,和靶子的移动需求后,实现这个碰撞就需要用到三角函数了!为了便于理解,画一下原理图:





根据原理图,我们可以细化代码实现的每一步的原理:


1、先计算出枪头跟靶子的垂直方向距离(dui_bian)。

2、将枪头的旋转的角度转化为弧度(radian)。

3、根据弧度(radian)和枪头跟靶子的垂直方向距离(dui_bian)两个已知量可以计算出武器真正射击的子弹到目标位置的水平距离(lin_bian)。

4、通过枪头跟靶子的垂直方向距离(dui_bian)武器真正射击的子弹到目标位置的水平距离(lin_bian)与偏移值计算,可以得出一个坐标(x, y)。

5、判断坐标(x, y)是否在靶子内部,是则视为打中靶子,否则就是打偏了。



有人要问,本文的内容不是关于三角函数的应用吗?请注意第3步,确实是用到了三角函数的 Math.tan() 方法。

写一个伪代码吧:

var lin_bian = dui_bian / Math.tan( radian );      //计算出武器真正射击的子弹到目标位置的水平距离(lin_bian)





正文结束!

本文有误之处,欢迎指点!


猜你喜欢

转载自blog.csdn.net/a727911438/article/details/70329228
今日推荐