Javascript 敌人跟随玩家

Question

我正在为一个大学项目编写一个 lil js 游戏。 我有一张 2d 地图，我可以用箭头移动我的玩家。敌人每 5 秒生成一次，并由函数引导：

enemy.updatePosition = function() {
    if(enemy.isAttacking === false) {           
            var diffX = Math.floor(player.x - enemy.x);
            var diffY = Math.floor(player.y - enemy.y);

            //security distance by player --> superEnemy type 1 uses arrows
            var distance = getDistanceBetweenEntities(player, enemy);
            var gap = 20;


            enemy.pressingRight = diffX > gap;
            enemy.pressingLeft = diffX < -gap;
            enemy.pressingDown = diffY > gap;
            enemy.pressingUp = diffY < -gap;

            enemy.isStopped = false;


                if(enemy.speedX < 0)
                    enemy.speedX = - enemy.speedX;
                if(enemy.speedY < 0)
                    enemy.speedY = - enemy.speedY;
                //bumpers check if hitting a wall or end of map
                var rightBumper = {x:enemy.x + 15, y:enemy.y};
                var leftBumper = {x:enemy.x - 15, y:enemy.y};
                var upBumper = {x:enemy.x, y:enemy.y - 25};
                var downBumper = {x:enemy.x, y:enemy.y + 20};

                if(currentMap.isPositionWall(rightBumper)) {
                    enemy.x -= 1;
                } else {
                    if(enemy.pressingRight)
                        enemy.x += enemy.speedX;
                }
                if(currentMap.isPositionWall(leftBumper)) {
                    enemy.x += 1;
                } else {
                    if(enemy.pressingLeft)
                        enemy.x -= enemy.speedX;
                }

                if(currentMap.isPositionWall(downBumper)) {
                    enemy.y -= 1;
                } else {
                    if(enemy.pressingDown)
                        enemy.y += enemy.speedY;
                }
                if(currentMap.isPositionWall(upBumper)) {
                    enemy.y += 1;
                } else {
                    if(enemy.pressingUp)
                        enemy.y -= enemy.speedY;
                }

                //set position again if the center of the draw 
                //of enemy goes out of map's limits
                if(enemy.x  < enemy.width/2)
                    enemy.x  = enemy.width/2;
                if(enemy.x  > currentMap.width - enemy.width/2)
                    enemy.x  = currentMap.width - enemy.width/2;
                if(enemy.y < enemy.height/2)
                    enemy.y = enemy.height/2;
                if(enemy.y > currentMap.height - enemy.height/2)
                    enemy.y = currentMap.height - enemy.height/2;

        }
    }
}

所以我的敌人使用 diffX 和 diffY 的值跟随玩家。每个敌人都有自己的 speedX 和 speedY，例如：

    var random = 1 + Math.random()*7;   //from 1 to 8
    enemy.speedX = random;
    enemy.speedY = random;

结果是敌人开始重叠，特别是在他们进行攻击时（x 和 y 在攻击期间不会改变）。有没有一种简单的方法可以在不检查大量碰撞的情况下避免这种情况？谢谢大家

Answer 1

您有更多选择，但这里有一个简单的碰撞检测。 首先，您需要使每个enemy 都独一无二，就像给每个人一个唯一的名字一样。这不需要像敌人1，敌人2，......敌人223那样复杂。您可以在生成敌人的地方执行此操作，如下所示：

enemy['name'] = 'enemy' + i++;

所以你可以像这样访问它：

enemy.name;

重要提示：您应该编写某种位置，每次“敌人”更改位置或每次滴答时都会更新。

enemy['position'] = enemy.x+','+enemy.y;

制作一个数组，您可以写入每个enemy 的位置。我知道这不是最好的选择，但它很简单并且现在可以使用。

var pstns = [];

然后将每个敌人写入数组（只需在生成时执行）。我想提一下，以下不是好的做法。

var pstnsObj = {};
pstnsObj[enemy.name] = enemy.position;
pstns.push(pstnsObj);

接下来，您需要使用每个enemy 更新每个刻度在数组中的位置。这只是一个示例，您可以通过多种方式执行此操作，甚至可以自动执行此过程。

function updatePstns(id, position){
    pstns[id][Object.keys(pstns[id])[0]] = position;
    //just in case:
    return pstns;
}
//updating first enemy:
updatePstns(0, enemy.position);

现在是碰撞：

function checkCollision(){
    var count = 0;
    pstns.forEach(function(e){
        for(i=0; i<pstns.length; i++){
            if(pstns[e][Object.keys(pstns[e])[0]] == pstns[i][Object.keys(pstns[i])[0]]){
               count++;
            }
        }
        if(count > 1){
            console.log('enemy ' + pstns[e] + 'collides with ' + count + 'enemies');
        }
    });
}