简单的JavaScript碰撞检测？

Question

我是一个有用的助手，可以为您进行翻译。以下是需要翻译的内容：

我正在尝试使用jquery、javascript、html和css制作一个简单的游戏。我一直卡在碰撞检测上。

代码：

var map = [
[0,1,0,0,0,1,0,0,],
[0,1,0,0,0,1,0,0,],
[0,1,0,0,0,1,0,0,],
[0,1,1,1,0,1,0,0,],
[0,0,0,0,0,0,0,2,]  
];

function DrawMap() {

    for(var i=0; i < map.length; i++){
        for(var j=0; j < map[i].length; j++){
            if(parseInt(map[i][j]) == 0){
            $("#container").append("<div class='air'></div>");
            }
            if(parseInt(map[i][j]) == 1){
            $("#container").append("<div class='block'></div>");
            }
            if(parseInt(map[i][j]) == 2){
            $("#container").append("<div class='spike'></div>");
            }
        }
    }

}

window.onload=function() {
    DrawMap();

}

更多代码：

var guy=document.getElementById('guy');

var up = 0;
var guyLeft = 0;
var health = 100;



function anim(e){



if(e.keyCode==83){
   up +=10;
   guy.style.top = up + 'px';
   if(up >=400){
     up -=10;
   }

 }

if(e.keyCode==87){
   up -=10;
   guy.style.top = up + 'px';
if(up <=0){
     up +=10;
   }  
}




 if(e.keyCode==68){
   guyLeft +=10;
   guy.style.left = guyLeft + 'px';
     if(guyLeft >= 700){
     guyLeft -= 10;
   }d
 }

if(e.keyCode==65){
   guyLeft -=10;
   guy.style.left = guyLeft + 'px';
 if(guyLeft <= 0){
     guyLeft += 10;
   }
}

}

document.onkeydown=anim;im;

- mattheblockboss D

---

document.onkeydown=anim;im; 应该改为 document.onkeydown=anim;，对吧？另外，您能把您的HTML代码添加在这里吗？ - GeekAb

从根本上讲，您可能想采取的方法是不仅在像素级别上跟踪人物的位置，而且在map[i][j]坐标中跟踪他的位置。然后，您可以检查人物将要进入的下一个单元格，以确定是否应该发生碰撞。实际上，最好只在i、j坐标中跟踪人物的位置，然后使用函数将它们映射到显示坐标。 - PMV

你可以先测试 if (up <= 0) { up = 0; }，然后再分配样式。 - Nina Scholz

附注：在您的if语句中，请使用以下内容：if(e.keyCode==83){up+=10; if(up>400){up-=10;} guy.style.top=up+'px';}（点击链接）。这就是Nina Scholz在上面的评论中所说的。 - myfunkyside

小建议：如果您已经在使用jQuery，那就彻底使用它。这可以让您的生活变得更轻松。因此，请使用jQuery等效于所有纯JS的代码，例如$(window).load(function(){...}); 而不是 window.onload = function(){...};, 和 $(document).keydown(function(){...}); 而不是 document.onkeydown=function(){...}; 等。 - myfunkyside

Answer 1

简短回答：使用document.elementFromPoint(x,y);来检测玩家位置上的元素。

详细回答：请看下面的代码片段。

现在，我意识到我在你的代码中做了很多改动，包括不必要的功能更改。抱歉，这是因为一开始我只是自己玩，但现在它可能对某些人有用。
（您可能不熟悉所使用的某些语法，请参见我的文章底部以获取一些解释。）

碰撞部分在function checkCollision()中，if子句在$(document).keydown内：

• 在keydown的if子句中调用checkCollision(): else {tile = checkCollision(...);。
• 基本上，我检查玩家的前方（俯视图）是否会在即将到来的位置发生碰撞：
  (for (var i=corner1; i<corner2; ++i) {...})。
  • 根据碰撞的瓷砖（“spike”或“block”），我要么生成一个警报（console.log），要么将checkTile返回给调用checkCollision()的if子句。
• 如果返回了tile，则使用tile的位置确定player的位置：
  $(player).css("left",(tile?$(tile).offset().left+$(tile).width():x));。

代码片段：

//DOCUMENT-READY==========================
$(document).ready(function() {
  //VARS----------------------------------
  var step = 10;
  var health = 100;
  
  //MAP-----------------------------------
  var map = [
    [0,1,0,0,0,1,0,0],
    [0,1,0,0,0,1,0,0],
    [0,1,0,0,0,1,0,0],
    [0,1,1,1,0,1,0,0],
    [0,0,0,0,0,0,0,2]
  ];
  
  //DRAW MAP------------------------------
  (function() {
    var tile = "";
    for (var y=0,county=map.length; y<county; ++y) {
      $("#canvas").append('<div class="tile-row" id="row_'+(y+1)+'"></div>');
      for (var x=0,countx=map[y].length; x<countx; ++x) {
        switch (parseInt(map[y][x])) {
          case 0: tile="air"; break;
          case 1: tile="block"; break;
          case 2: tile="spike"; break;
          default: tile="error";
        }
        $("#row_"+(y+1)).append('<div class="tile '+tile+'"></div>');
      }
    }
  })();
  
  //SET BOUNDARIES------------------------
  var xMin=$("#canvas").offset().left, xMax=xMin+$("#canvas").width()-$("#player").width();
  var yMin=$("#canvas").offset().top, yMax=yMin+$("#canvas").height()-$("#player").height();
  
  //PLACE PLAYER--------------------------
  $("#player").css("left",xMin).css("top",yMin);
  
  //MOVE PLAYER---------------------------
  $(document).keydown(function(e){
    var player=document.getElementById("player"), tile=null;
    var x=$(player).offset().left, playerLeft=x, playerRight=playerLeft+$(player).width();
    var y=$(player).offset().top, playerTop=y, playerBottom=playerTop+$(player).height();
    
    function checkCollision(playerCorner1x, playerCorner1y, playerCorner2x, playerCorner2y) {
      var collisionTiles=["block","spike"];
      //check if the front of the player is colliding with the environment
      var front = (playerCorner1x==playerCorner2x?playerCorner1x:playerCorner1y);
      var corner1 = (front==playerCorner1x?playerCorner1y:playerCorner1x);
      var corner2 = (front==playerCorner1x?playerCorner2y:playerCorner2x);
      //check every pixel along the front for collision
      for (var i=corner1; i<corner2; ++i) {
        var checkTile = document.elementFromPoint((front==playerCorner1x?front:i), (front==playerCorner1y?front:i));
        if (collisionTiles.indexOf(checkTile.className.split(" ")[1]) != -1) {
          if ($(checkTile).hasClass("spike")) {console.log("YOU DEAD!");}
          else if ($(checkTile).hasClass("block")) {return checkTile;}
          break;
        }
      }
    }
    
    if(e.which==37 || e.which==65){ //LEFT,A
      x -= step;
      if (x <= xMin) {x = xMin;}
      else {tile = checkCollision(playerLeft-step,playerTop, playerLeft-step,playerBottom);}
      $(player).css("left",(tile?$(tile).offset().left+$(tile).width():x));
    }
    if(e.which==39 || e.which==68){ //RIGHT,D
      x += step;
      if (x >= xMax) {x = xMax;}
      else {tile = checkCollision(playerRight+step,playerTop, playerRight+step,playerBottom);}
      $(player).css("left",(tile?$(tile).offset().left-$(player).width():x));
    }
    if(e.which==38 || e.which==87){ //UP,W
      y -= step;
      if (y <= yMin) {y = yMin;}
      else {tile = checkCollision(playerLeft,playerTop-step, playerRight,playerTop-step);}
      $(player).css("top",(tile?$(tile).offset().top+$(tile).height():y));
    }
    if(e.which==40 || e.which==83){ //DOWN,S
      y += step;
      if (y >= yMax) {y = yMax;}
      else {tile = checkCollision(playerLeft,playerBottom+step, playerRight,playerBottom+step);}
      $(player).css("top",(tile?$(tile).offset().top-$(player).height():y));
    }
  });
});

div {margin:0; padding:0; border-style:none; box-sizing:border-box; overflow:hidden;}

/*CANVAS================*/
#canvas {display:inline-block;}

/*TILES=================*/
.tile-row {width:100%; height:40px;}
.tile {float:left; width:40px; height:100%;}
.tile.air {background-color:skyblue;}
.tile.block {background-color:sienna;}
.tile.spike {background-color:gray;}
.tile.error {background-color:red;}

/*PLAYER================*/
#player {position:absolute; width:15px; height:15px; background-color:black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="canvas"></div>
<div id="player"></div>

jsfiddle: https://jsfiddle.net/Lqw9w06z/11/

解释/注释：

• (function(){...})();是一种IIFE（立即执行函数表达式），它是一种自动执行的函数。
• front==playerCorner1x?playerCorner1y:playerCorner1x被称为条件（三元）运算符，它基本上是一个紧凑的if语句。
• 瓦片的大小在CSS中设置：
  .tile-row {width:100%; height:40px;}和.tile {width:40px; height:100%;}。
  这决定了整个画布/游戏板的大小。
• 我修改了您的for循环，以便将一行中的所有瓦片包装在一个包含的div中。

---

旁注：

由于某种原因，在一个特定的位置没有注册到碰撞（见下文）。
如果有人能够解释为什么在这个特定的位置会发生这种情况，我会非常高兴！

- myfunkyside

---

这帮助我克服了最大的障碍，谢谢你（尽管网站“建议”我不要这样做）。 - mattheblockboss D