Question

尝试在通过数组时检测两个方块之间的碰撞。在检测到左侧的碰撞时，我似乎无法让方块停止将一个像素剪切到另一个像素中。

向左移动时，在黑色方块上，我检查左上角X坐标，左上角Y坐标，左下角X坐标和下方Y坐标，看是否检测到碰撞。

<pre>function collision(map,x,y,e) {


  if (map[Math.floor((y-1)/25)][(Math.floor((x)/25))] == 1 || map[Math.floor((y+26)/25)][(Math.floor(x/25))] == 1 && e==37) {
    return true;
}



   if (map[Math.floor((y)/25)][(Math.floor((x)/25))] == 1 || map[Math.floor((y+25)/25)][(Math.floor((x)/25))] == 1 && e==38) {
    return true;
    }

}

document.addEventListener("keydown", function(e) {

    ctx.clearRect(x,y,25,25);

    switch(e.keyCode) {

  case 37:

  if (!collision(map,x,y,e.keyCode)) {
  x--;
  }
break;
<code>

非常感谢任何有关此方法的提示。我曾尝试查看Mozilla的github（https://github.com/mozdevs/gamedev-js-tiles/blob/gh-pages/square/logic-grid.js）上的示例，但我无法使用reduce函数来检查tile碰撞的方式。

下面的JS小提琴

https://jsfiddle.net/bcvwubw0/36/

Javascript Canvas 2d碰撞检测

0 个答案: