用原生 JS 写一个简易版的台球

,突发奇想想用JS写一个台球小游戏，磕磕碰碰之后，算是实现了一个简易版的。用到的知识主要是通过递归来调用requestAnimationFrame，以及一些简单的三角函数角度计算。requestAnimationFrame就是一个JS动画帧，简单来说和定时器有点相似，但是动画呈现出来的效果比定时器更流畅,性能更好。,先获取鼠标在页面的坐标，然后减去球心的坐标，就得到了一个相对坐标。然后把球心当成原点，计算出鼠标相对球心的角度，最后把这个角度赋值给球杆的transform属性，就可以实现球杆跟随鼠标旋转的效果了,球杆其实是由 3 个盒子组成的，最外面的大盒子来控制球杆的旋转，大盒子里面有两个盒子 gan2 和 gan3， gan3 这个盒子用来放球杆的图片。gan2 这个盒子是看不到的，它负责把球杆向外面撑开。所以球杆的动画就很简单了，只要增加和减少 gan2 盒子的宽，就能实现球杆的伸缩了。,实现动画就是用尾递归来重复调用 requestAnimationFrame 函数。,母球的击球动画同样是通过尾递归来重复调用 requestAnimationFrame 函数，但是涉及到墙壁反弹，以及撞击子秋，母球的移动函数的参数会复杂一点。,母球移动的速度和距离，是通过i这个变量来控制的，这个函数每调用一次，i 会递减。x 和 y 这两个参数会接收一个 -1 到 1 之间的值，起到一个方向系数的效果，通过参数把球杆的撞击方向传递进来。碰到边界之后，就把对应的系数取负，然后用新系数执行移动函数，就能起到反弹的效果了。,这是最麻烦的一步，撞击后两个球的运动轨迹都会发生变化。只考虑最普通的撞击，子球的运动方向应该是撞击点与子球球心这条直线的方向，这个比较好计算。母球的撞击后的方向应该是以撞击点的那条切线进行反弹，三角函数几乎忘光了，这个我也不知道怎么计算了，所以用了个简易的算法，就和撞墙壁一样直接反弹,这样会导致某些角度下,母球撞击之后的方向不正常。,把这个撞击判断加到母球移动的函数里面，然后再补充一个子球的移动函数，整个代码就写完了,,,这个小游戏实现的并不完美，因为用到了太多的递归，很多细节方面不好控制，球的运动轨迹也很难计算，在某些角度下会出现BUG。球虽然是圆的，但是它的盒子是正方形，所以撞击有的时候会看着很奇怪。移动的函数写的也有缺陷，它不能复用，如果想添加多个球，函数就得改。,这个破产版的台球主要就是写着玩一玩，尝试了一下JS动画的实现 , 不喜勿喷。