飞行射击类游戏很常用的追踪子弹,或者塔防里面固定炮台打 怪物的时候,为了保证子弹不会打空,追踪是必要的。
然而,这是极其简单的事情。
在每一帧里判断当前子弹和目标位置的距离和方向,不断修正 速度方向即可。
1 2 3 4 5 6 7 8 9 |
// this.x, this.y 表示当前子弹的位置 // this.tar.x, this.tar.y 表示当前目标的位置 var dis = Math.sqrt(Math.pow((this.tar.x-this.x), 2) + Math.pow((this.tar.y - this.y), 2)); var angleX = (this.tar.x - this.x)/dis; var angleY = (this.tar.y - this.y)/dis; this.speedX = speed * angleX; this.speedY = speed * angleY; this.x += this.speedX; this.y += this.speedY; |
算出速度方向,然后 速度*dt 叠加到 位移即可。
PS: 这篇文章里面加一点,我们在做现代浏览器相关的应用的时候,为什么推荐用 requestAnimationFrame.
我这里根据自己的经验和理解列几个好处:
- 刷新率基本稳定在 60 帧每秒,只要你的机器性能不是天差地别,那么基本上各大现代浏览器,只要支持 requresAnimationFrame, 这个数值基本保持一致。这对动画流畅度和易控程度有很大好处。
- 现代浏览器为了增加运行效率,基本都采用了多 tab 并行的模式,也就是一个 tab 一个进程。单独处理。这样有好处,合理利用计算机计算资源,新开的进程不会影响别的进程。但是也有坏处,就是每个 tab 之间的直接联系必然也减弱了。最直接的表现就是假如你用 setInterval 或者 setTimeout 完成一个大量动画的 app,那么当你最小化浏览器或者离开这个 tab 很久再回到这个 tab 的时候,由于 setInterval 之类的一直后台运行,但是前台的渲染并没有跟上。所以再回到这个 tab 时,可能你的页面上出现了一大堆没来的及渲染的动画表现。 这显然是不符合预期的。 而 requestAnimationFrame 则恰恰可以解决这个问题。
当然,requestAniamtionFrame 也不是所有的都支持。兼容方案很简单:
1 2 3 4 5 6 7 8 9 10 |
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { window.setTimeout(callback, 1000/60); }; })(); |
暂时还没了解过 requestAnimationFrame 的同学可以 google 一下,使用方式和 setTime 很类似。简单的知识点。
【追踪子弹 Demo】
看看 2017 年 4 月 11 日
如果要改成第一个子弹命中后第二个子弹才出来怎么弄
两个Canvas小游戏 | 一世浮华一场空 2015 年 2 月 9 日
[…] 其实我的第二个游戏 demo 的创意完全来自于岑安的追踪子弹-初中简单的物理和数学, 里面也有具体说为何要用 requestAniamtionFrame。大家有空可以看看岑安的文章, 篇篇精品。 […]
两个Canvas小游戏 | 一世浮华一场空 2015 年 2 月 8 日
[…] 其实我的第二个游戏 demo 的创意完全来自于岑安的追踪子弹-初中简单的物理和数学, 里面也有说具体说为何要用 requestAniamtionFrame。大家有空可以看看岑安的文章, 篇篇精品。 […]
minren 2012 年 2 月 29 日
同学,塔防里的子弹不会拐弯吧 -_-||
horizon 2012 年 2 月 29 日
需要的哦,做过就知道。 如果不追踪的话。无法保证你发出打某个人的子弹 会准确到达那个人身上。
所以,不过不这样做,会遇到的情况就是当 rpc 跑的较快或者 地图较大时。你发出的子弹会 在 rpc 的身后爆炸。 但是 rpc 仍需掉血。 因为塔防一般是必中的