JavaScript与圆

最近开始学习了一段时间的JavaScript,期间用js写了一个简单的小游戏----愤怒的小鸟,过程中遇到了很多问题,也想出了一些方法去解决,下面和大家分享一些其过程中遇到的问题和解决的方法。

首先，就是碰撞问题。

在游戏的设计过程中需要通过判断某种碰撞时来结束游戏或是触发其他的一些事件。对于碰撞我认为可以分为两种情况（如下图所示）：一种是完全碰撞，即A和B有一边完全重合在了一起，第二种是不完全全碰撞，即A、B的一边都只有部分重合。(假设A和B都是正方形)

对于判断是否完全碰撞相对简单，但是处理不完全碰撞相对有一些问题，应为要考虑到有效碰撞范围。如下图所示，A从右向左与B相碰撞，虚线的A与实线的A都在有效碰撞范围之内，这时就需要判断相碰撞时A是否在这个范围之内。这样的判断也相对比较容易实现，但这只是一个方向，还有另外几个方向，如果把这几个判断都搅在一起，写代码的时候难免会有些放晕。而且这种方式判断四个方向，即上、下、左、右处理起来还比较简单，但是处理不定向的碰撞就有些难度。

为了能更好的解决这一问题，我们可以对碰撞重新做一下规定，我们规定当不完全碰撞时只有 A 、 B 有重叠时才触发事件，如下图所示。

当我们做了这一点之后，问题就变得更简单了一些，然后再在 A 和 B 的内部做内切圆，利用这两个内切圆相切来作为判断碰撞的标准。

接下来，我们把这些问题如下图所示建立一个数学模型，假设A的圆心坐标为O1（x1，y1），B的圆心坐标为O2（x2，y2），O1和O2 的半径分别为r1和r2，A和B的距离为d，

;
如果r1+r2<=d则A和B相撞

在接下来我们把这个数学模型转换为js代码:
第一步,要对游戏的界面进行相对定位,对A、B进行绝对定位，
第二步，得到A、B对象，以下的用代码来说明

1. <script>
2. var aobj = document.getElementById("a");
3. var aobj = document.getElementById("b");
5. //假设a和b都是正方形,得到a和b的高
6. var ha = aobj.clientHeight;
7. var hb = bobj.clientHeight;
9. //得到a和b的位置
10. var xa = (parseInt(aobj.style.left)-0.5*ha); //这里加0.5倍的高主要是利于理解(即内切圆的圆心),也可以不加
11. var xa = (parseInt(aobj.style.top)-0.5*ha);
12. var xb = (parseInt(bobj.style.left)-0.5*hb);
13. var xb = (parseInt(bobj.style.top)-0.5*hb);
15. //计算a和b之间的距离
16. var d = Math.sqrt(Math.pow((xb-xa),2)+Math.pow((yb-ya),2));
17. //a和b内切圆的距离
18. var l = 0.5*(ha + hb);
20. //判断是否相撞
21. if(d<l){
22. //Code触发事件
23. }
24. </script>

同样 , 我们可以用外切圆的方式来判断如下子弹打飞机的碰撞方式。

对于比较规矩的形状可以使用一个外切圆来搞定，不规则的形状可以使用多个外切圆相交的方式，通过判断交集部分来判断，如下图的右边部分。

我个人认为，对于碰撞的问题，如果想要做的比较细可以使用大圆套小圆，进行层层判断，就如同打狙击战一样层层狙击。

同样的方法可以用来判断破坏力，或者杀伤力，与大圆相撞杀伤力一般，进入到里面的小圆又是另一种杀伤力，与半径越小的圆相撞的破坏力越大。

二、抛物线的产生

我们都知道，当物体抛出以后，理想状态下，水平方向的速度保持不变，垂直方向的速度会在不断的变化，即万有引力，所以在 js 代码模拟的时候也要考虑，重力加速度。以下用代码来说明一个下落之后的运动轨迹（非理想状态，即有空气阻力的影响）。

1. <script>
2. var vy=0; //设置垂直方向上的初速度
3. var imgobj=document.getElementById("imgid");
4. var g=0.05; //设置重力加速度
5. function show(){
6. var t=parseInt(imgid.style.top);
7. setInterval(function(){
8. //与地面相撞
9. if(t>446){
10. vy=-vy //当于地面相撞以后速度相反
11. g+=0.005; //在重力加速度上加一个空气阻力带来的影响
12. }
13. vy+=g; //垂直方向的速度
14. t+=vy; //小球每10毫秒的垂直方向改变的位置
16. //达到某值时不在反弹
17. if(t>449){
18. t=449;
19. }
20. imgobj.style.top=t+"px";
21. },10);
22. }
23. </script>

当然产生完美抛物线的最佳方法是使用二元一次方程进行数学建模。

附件中是我写的愤怒的小鸟的代码,其中拖拽事件我之间引用了强哥的代码这里要感谢强哥。我对代码没有做很好的优化，其中也不乏有很多漏洞，还望海涵。
愤怒的小鸟.zip

原文地址：http://bbs.lampbrother.net/read-htm-tid-149275.html

<script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/buttonLite.js#style=-1&uuid=&pophcol=3&lang=zh"></script> <script type=text/javascript charset=utf-8 src="http://static.bshare.cn/b/bshareC0.js"></script>

阅读(55) | 评论(0) | 转发(0) |

0

上一篇：我在宇宙最强的school里，修炼武功以及内功，然后踏入江湖

下一篇：我的技术分享——《反射与泛型》

相关热门文章

• 8500WN12核顶配 极速稳定上网...
• 元旦苏州游记_苏州旅游攻略...
• 上海网站建设相关的使用技巧...
• 上海网站建设的广告管理平台...
• 详细解析:关于PHP事件驱动问题...

• 毕业五年（续）
• 毕业五年
• 职业生涯规划
• 中国软件开发工程师之痛...
• 闲置书处理！

• 大家都是用什么来管理hadoop集...
• 网站被人挂了吗，添加了些程序...
• Nginx如何保证不走宕机的那个...
• 大家谈谈MYSQL客户端和服务器...
• 以下代码运行后为何会输出5?...

给主人留下些什么吧！~~

评论热议