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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了游戏技巧收纳——碰撞检测相关的知识,希望对你有一定的参考价值。

碰撞检测

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

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

以上是关于游戏技巧收纳——碰撞检测的主要内容,如果未能解决你的问题,请参考以下文章

android 游戏 碰撞检测

pygame游戏检测矩形是否碰撞指定颜色的自定义函数(仅5行代码)

pygame游戏检测矩形是否碰撞指定颜色的自定义函数(仅5行代码)

没有墙壁时的敌人与墙壁的碰撞检测

如何在游戏循环中只检测一次碰撞而不是连续检测碰撞?

Java游戏中的圆形碰撞检测