游戏技巧收纳——碰撞检测

Posted 2020-08-19

碰撞检测

　　最近在学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>

关于临界值的判断可以分成很多情况，这里只是例举了最简单的判断，主要学习碰撞检测的思路。后面遇到更复杂的碰撞再来补充。