碰撞检测精度

Question

你们认为我如何改进我的网站asteroidfield.eu5.org上的碰撞检测代码？当前代码是

var dx = Math.abs(c1.getcx() - c2.getcx());
var dy = Math.abs(c1.getcy() - c2.getcy());
var dist = Math.sqrt((dx * dx) + (dy * dy));
if (dist - (c1.getR() + c2.getR()) <= 0) {
  if (done === false && invinc !== true) {
    game_over = true;
    done = true;
  }
}

C1指的是玩家的精灵，而C2是敌人的精灵。Getcx本质上是收集碰撞检测圈边缘的X位置，gety也是这样做的，但是收集Y位置。GetR返回碰撞检测圆的半径。

Answer 1

你可以改进的一件事是绝对值的获取。在一些浏览器中，按位绝对比Math.abs快。但这取决于浏览器的实现。

//bitwise absolute
function abs(n){
  return (n^(n>>31))-(n>>31);
}

您还可以将此部分分解到一个可读性变量中。其结果是布尔值。解释将在下一部分：

//foo true if less than or equal to 0, false if greater
var foo = dist - (c1.getR() + c2.getR()) <= 0; 

而且，在这段代码中，由于done和invinc是布尔型的，所以没有必要将它们与true和false进行比较。你可以在这种情况下直接使用它们。

if (done === false && invinc !== true) //when false, and not true (false)

if (!done && !invinc)                  //when not true (false) and not true (false)

在JS中，任务操作“向左溢出”。您可以执行以下操作:将true分配给done，并将相同的值“溢出”给game_over。

game_over = done = true;

此外，由于代码的结构，前一种情况只在分配给foo的条件小于或等于零或true时才会发生。因此，让我们将条件修改为：

if(foo && !done && !invinc) game_over = done = true;

最后，您的代码将如下所示：

var dx = Math.abs(c1.getcx() - c2.getcx());
var dy = Math.abs(c1.getcy() - c2.getcy());
var dist = Math.sqrt((dx * dx) + (dy * dy));
var foo = dist - (c1.getR() + c2.getR()) <= 0;

if (foo && !done && !invinc) game_over = done = true;

Answer 2

与其用坐标进行数学运算，不如尝试如下：

var board = ["0x0","0x1","0x2","0x3",
             "1x0","1x1","1x2","1x3",
             "2x0","2x1","2x2","2x3",
             "3x0","3x1","3x2","3x3",
             "4x0","4x1","4x2","4x3"]; //Grid-based game board

var player = {
    "x": 0,
    "y": 0,
    "location": "0x0"
};

var enemy = {
    "x": 0,
    "y": 0,
    "location": "0x0"
};

if (player.location == enemy.location){
    //Do things
}