Javascript 使所有分区障碍物具有相同的功能

我正在做一个简单的游戏，如果角色碰到另一个

div

的“障碍物”，当他们碰撞时，碰到障碍物的角色会减速

我已经有了这方面的代码，但它只适用于我的

.obstacle1 div

，即使我尝试使用

jquery。每个
或者我只是缺少了一些东西

以下是仅适用于
的代码。obstacle1

HTML

<div class="field">
  <div id="char1" class="characters character1">char1</div>
  <div id="char2" class="characters character2">char2</div>
  <div id="char3" class="characters character3">char3</div>
  <div class="obstacles obstacle1">1</div>
  <div class="obstacles obstacle2">2</div>
</div>

jQuery

$(document).ready(function(){

    intervalCharacters = setInterval(function(){
        moveChar();
    },100);

    function moveChar() {
        $(".characters").each(function(){
            move($(this));
        });
    }

    /*--------------
        OBSTACLES
    ---------------*/
    var obstacle1 = $(".obstacles");
    var obstacle1CurrentPosX = obstacle1.offset().left;
    var obstacle1CurrentPosY = obstacle1.offset().top;
    var obstacle1Height = obstacle1.outerHeight();
    var obstacle1Width = obstacle1.outerWidth();
    var totalY = obstacle1CurrentPosY + obstacle1Height;
    var totalX = obstacle1CurrentPosX + obstacle1Width; 

    function checkIfCollidesChar(thisChar) {
        var thisCharPosX = thisChar.offset().left;
        var thisCharPosY = thisChar.offset().top;
        var thisCharWidth = thisChar.outerWidth();
        var thisCharHeight = thisChar.outerHeight();
        var totalCharY = thisCharPosY + thisCharHeight;
        var totalCharX = thisCharPosX + thisCharWidth;  

        if (totalY < thisCharPosY || obstacle1CurrentPosY > totalCharY || totalX < thisCharPosX || obstacle1CurrentPosX > totalCharX) {
            return false;
            console.log("FALSE");
        } else {
            return true
            console.log("TRUE");
        }
    }


/* ----- 
move the characters 
---- */
    var moveFromLeft = 0;
    var maxPosition = 1500;
    function move(thisChar) {
        var _this = thisChar;
        var currentPosition = _this.offset().left;
        var charSpeed = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
            if(checkIfCollidesChar(_this)) {
                if(_this.offset().left > maxPosition) {
                    moveFromLeft = maxPosition;
                }else{
                    moveFromLeft = currentPosition + (charSpeed*.25);
                }
            }else{
                if(_this.offset().left > maxPosition) {
                    moveFromLeft = maxPosition;
                }else{
                    moveFromLeft = currentPosition + charSpeed;
                }
            }

        _this.css({
            "left" : moveFromLeft,
        });


        if(moveFromLeft > maxPosition) {
            checkIfFinish(_this);
            _this.css({
                "left" : maxPosition+"px",
            });
        } 

        _this.html(moveFromLeft);       
    }

});

$（文档）.ready（函数（）{
intervalCharacters=setInterval（函数（）{
moveChar（）；
},100);
函数moveChar（）{
$（“.characters”）。每个（函数（）{
移动（$（此））；
});
}
/*--------------
障碍
---------------*/
var obstacle1=$（“.障碍”）；
var obstacle1CurrentPosX=obstacle1.offset（）.left；
var obstacle1CurrentPosY=obstacle1.offset（）.top；
var obstacle1Height=obstacle1.outerHeight（）；
var obstacle1Width=obstacle1.outerWidth（）；
var totalY=障碍物1当前位置+障碍物1高度；
var totalX=障碍物1当前位置x+障碍物1宽度；
函数检查碰撞器（thisChar）{
var thisCharPosX=thisChar.offset（）.left；
var thisCharPosY=thisChar.offset（）.top；
var thisCharWidth=thisChar.outerWidth（）；
var thisCharHeight=thisChar.outerHeight（）；
var totalCharY=此CharPosy+此CharHeight；
var totalCharX=thisCharPosX+thisCharWidth；
if（totalYtotalCharY | | totalXtotalCharX）{
返回false；
控制台日志（“假”）；
}否则{
返回真值
console.log（“真”）；
}
}
/* ----- 
移动角色
---- */
var movefromfloft=0；
var maxPosition=1500；
函数移动（thisChar）{
var _this=thisChar；
var currentPosition=_this.offset（）.left；
var charSpeed=Math.floor（Math.random（）*（10-0+1））+0；
如果（检查碰撞器（_this））{
如果（_this.offset（）.left>maxPosition）{
moveFromLeft=最大位置；
}否则{
moveFromLeft=当前位置+（charSpeed*.25）；
}
}否则{
如果（_this.offset（）.left>maxPosition）{
moveFromLeft=最大位置；
}否则{
moveFromLeft=当前位置+charSpeed；
}
}
_这个是.css({
“左”：从左移动，
});
如果（从左移动>最大位置）{
checkIfFinish（_this）；
_这个是.css({
“左”：最大位置+“px”，
});
} 
_this.html（moveFromLeft）；
}
});

这是我的名片。
我觉得你差不多不错了。对于您的循环，可以使用作为模型

     $(".characters").each(function(){
                move($(this));
            });

在您的情况下，这将提供：

$(".obstacles").each(function(){
    var obstacle1 = $(this)
    var obstacle1CurrentPosX = obstacle1.offset().left;
    var obstacle1CurrentPosY = obstacle1.offset().top;
    var obstacle1Height = obstacle1.outerHeight();
    var obstacle1Width = obstacle1.outerWidth();
    var totalY = obstacle1CurrentPosY + obstacle1Height;
    var totalX = obstacle1CurrentPosX + obstacle1Width; 


    ...

});

下面是我建议的解决方案：

问题是，当您直接请求其偏移量/宽度/高度时，您正在将jquery选择“展平”为单个值。您应该使用“$.each”循环询问jquery选择中的每个元素的偏移量，以使每个障碍物都起作用

$(document).ready(function(){
intervalCharacters = setInterval(function(){
    moveChar();
},100);

function moveChar() {
    $(".characters").each(function(){
        move($(this));
    });
}

var position = ["first","second","third"];
var counter = 0; 
function checkIfFinish(thisChar) {
    var position2 = position[counter];
    counter++;

    $(".result").append("<br>Position"+position2+ " counter" + counter + " : " + thisChar.attr("id"));

    if(counter >= 3) {
        clearInterval(interval);
    }
}


/*--------------
    OBSTACLES
---------------*/
var obstacle1 = $(".obstacles");    

function checkIfCollidesChar(thisChar) {
    var thisCharPosX = thisChar.offset().left;
    var thisCharPosY = thisChar.offset().top;
    var thisCharWidth = thisChar.outerWidth();
    var thisCharHeight = thisChar.outerHeight();
    var totalCharY = thisCharPosY + thisCharHeight;
    var totalCharX = thisCharPosX + thisCharWidth;

    var isCollision = false; 
    $.each(obstacle1, function(i, ob) {
        var obstacle1CurrentPosX = $(ob).offset().left;
        var obstacle1CurrentPosY = $(ob).offset().top;
        var obstacle1Height = obstacle1.outerHeight();
        var obstacle1Width = obstacle1.outerWidth();
        var totalY = obstacle1CurrentPosY + obstacle1Height;
        var totalX = obstacle1CurrentPosX + obstacle1Width;

        if (!(totalY < thisCharPosY || obstacle1CurrentPosY > totalCharY || totalX < thisCharPosX || obstacle1CurrentPosX > totalCharX)) {
            isCollision = true;
        }
    });

    return isCollision;
}


/* ----- 
move the characters 
---- */
var moveFromLeft = 0;
var maxPosition = 1500;
function move(thisChar) {
    var _this = thisChar;
    var currentPosition = _this.offset().left;
    var charSpeed = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
        if(checkIfCollidesChar(_this)) {
            if(_this.offset().left > maxPosition) {
                moveFromLeft = maxPosition;
            }else{
                moveFromLeft = currentPosition + (charSpeed*.25);
            }
        }else{
            if(_this.offset().left > maxPosition) {
                moveFromLeft = maxPosition;
            }else{
                moveFromLeft = currentPosition + charSpeed;
            }
        }

    _this.css({
        "left" : moveFromLeft,
    });


    if(moveFromLeft > maxPosition) {
        checkIfFinish(_this);
        _this.css({
            "left" : maxPosition+"px",
        });
    } 

    _this.html(moveFromLeft);       
}
});

$（文档）.ready（函数（）{
intervalCharacters=setInterval（函数（）{
moveChar（）；
},100);
函数moveChar（）{
$（“.characters”）。每个（函数（）{
移动（$（此））；
});
}
变量位置=[“第一”、“第二”、“第三”]；
var计数器=0；
函数checkIfFinish（thisChar）{
var位置2=位置[计数器]；
计数器++；
$（“.result”）.append（“
位置”+position2+“计数器”+counter+”：“+thisChar.attr（“id”））；
如果（计数器>=3）{
间隔时间；
}
}
/*--------------
障碍
---------------*/
var obstacle1=$（“.障碍”）；
函数检查碰撞器（thisChar）{
var thisCharPosX=thisChar.offset（）.left；
var thisCharPosY=thisChar.offset（）.top；
var thisCharWidth=thisChar.outerWidth（）；
var thisCharHeight=thisChar.outerHeight（）；
var totalCharY=此CharPosy+此CharHeight；
var totalCharX=thisCharPosX+thisCharWidth；
var isCollision=false；
$.each（obstacle1，函数（i，ob）{
var obstacle1CurrentPosX=$（ob.offset（）.left；
var obstacle1CurrentPosY=$（ob）.offset（）.top；
var obstacle1Height=obstacle1.outerHeight（）；
var obstacle1Width=obstacle1.outerWidth（）；
var totalY=障碍物1当前位置+障碍物1高度；
var totalX=障碍物1当前位置x+障碍物1宽度；
如果（！（totalYtotalCharY | | totalXtotalCharX））{
isCollision=true；
}
});
回归整合；
}
/* ----- 
移动角色
---- */
var movefromfloft=0；
var maxPosition=1500；
函数移动（thisChar）{
var _this=thisChar；
var currentPosition=_this.offset（）.left；
var charSpeed=Math.floor（Math.random（）*（10-0+1））+0；
如果（检查碰撞器（_this））{
如果（_this.offset（）.left>maxPosition）{
moveFromLeft=最大位置；
}否则{
moveFromLeft=当前位置+（charSpeed*.25）；
}
}否则{
如果（_this.offset（）.left>maxPosition）{
moveFromLeft=最大位置；
}否则{
moveFromLeft=当前位置+charSpeed；
}
}
_这个是.css({
“左”：从左移动，
});
如果（从左移动>最大位置）{
checkIfFinish（_this）；
_这个是.css({
“左”：最大位置+“px”，
});
} 
_this.html（moveFromLeft）；
}
});
简化你的小提琴，以真正阐明要点，这将是很有帮助的。也许更短的距离+更多的障碍更频繁
$(document).ready(function(){
intervalCharacters = setInterval(function(){
    moveChar();
},100);

function moveChar() {
    $(".characters").each(function(){
        move($(this));
    });
}

var position = ["first","second","third"];
var counter = 0; 
function checkIfFinish(thisChar) {
    var position2 = position[counter];
    counter++;

    $(".result").append("<br>Position"+position2+ " counter" + counter + " : " + thisChar.attr("id"));

    if(counter >= 3) {
        clearInterval(interval);
    }
}


/*--------------
    OBSTACLES
---------------*/
var obstacle1 = $(".obstacles");    

function checkIfCollidesChar(thisChar) {
    var thisCharPosX = thisChar.offset().left;
    var thisCharPosY = thisChar.offset().top;
    var thisCharWidth = thisChar.outerWidth();
    var thisCharHeight = thisChar.outerHeight();
    var totalCharY = thisCharPosY + thisCharHeight;
    var totalCharX = thisCharPosX + thisCharWidth;

    var isCollision = false; 
    $.each(obstacle1, function(i, ob) {
        var obstacle1CurrentPosX = $(ob).offset().left;
        var obstacle1CurrentPosY = $(ob).offset().top;
        var obstacle1Height = obstacle1.outerHeight();
        var obstacle1Width = obstacle1.outerWidth();
        var totalY = obstacle1CurrentPosY + obstacle1Height;
        var totalX = obstacle1CurrentPosX + obstacle1Width;

        if (!(totalY < thisCharPosY || obstacle1CurrentPosY > totalCharY || totalX < thisCharPosX || obstacle1CurrentPosX > totalCharX)) {
            isCollision = true;
        }
    });

    return isCollision;
}


/* ----- 
move the characters 
---- */
var moveFromLeft = 0;
var maxPosition = 1500;
function move(thisChar) {
    var _this = thisChar;
    var currentPosition = _this.offset().left;
    var charSpeed = Math.floor(Math.random() * (10 - 0 + 1)) + 0;
        if(checkIfCollidesChar(_this)) {
            if(_this.offset().left > maxPosition) {
                moveFromLeft = maxPosition;
            }else{
                moveFromLeft = currentPosition + (charSpeed*.25);
            }
        }else{
            if(_this.offset().left > maxPosition) {
                moveFromLeft = maxPosition;
            }else{
                moveFromLeft = currentPosition + charSpeed;
            }
        }

    _this.css({
        "left" : moveFromLeft,
    });


    if(moveFromLeft > maxPosition) {
        checkIfFinish(_this);
        _this.css({
            "left" : maxPosition+"px",
        });
    } 

    _this.html(moveFromLeft);       
}
});