标签：效果 bsp 判断 注意 游戏 技术 圆形 运动 svg
碰撞检测
最近在学canvas和svg绘图技术，当做到动画时，觉得以后可以做一些小游戏，这时候碰撞检测就非常重要了。比如在svg中绘制一个来回移动的小球，碰到画布的边缘就返回的效果。这是最简单的碰撞检测了。
当小球的横坐标或者纵坐标到达临界值时，就改变direction，然后往相反的方向移动，核心代码如下：
1 var x = 50; 2 var y = 50; 3 var xDirection = 1; 4 var yDirection = 1; 5 6 7 setInterval(function(){ 8 //碰撞检测的核心 9 x += 5*xDirection; 10 if(x>=450){ 11 xDirection = -1; 12 }else if(x<=50){ 13 xDirection = 1; 14 } 15 16 y += 5*yDirection; 17 if(y>=350){ 18 yDirection = -1; 19 }else if(y<=50){ 20 yDirection = 1; 21 } 22 c1.setAttribute(‘cx‘, x); 23 c1.setAttribute(‘cy‘, y); 24 }, 42);
这里需要注意x和y的判断是分开的，而且要活用direction这种正负1的思路。同理的还有布尔值的切换判断状态也是一种思路。最终实现的效果为小球沿着45度角不断运动，碰撞后改变方向。
其中HTML部分，就是一个SVG画布，里面一个circle。
<h3>绘制圆形</h3>
<svg id="s10" width="500" height="400">
<circle id="c1" r="50" cx="50" cy="50" fill="#afa"></circle>
</svg>
关于临界值的判断可以分成很多情况，这里只是例举了最简单的判断，主要学习碰撞检测的思路。后面遇到更复杂的碰撞再来补充。
标签：效果 bsp 判断 注意 游戏 技术 圆形 运动 svg
原文地址：http://www.cnblogs.com/mini-fan/p/6067918.html
