Question

我正在制作一个简单的游戏，如果角色触摸另一个div的“障碍物”，那么碰到它的角色会在碰撞时减速。

我已经有了这方面的代码，但即使我尝试使用.obstacle1 div或者我只是遗漏了某些东西，它也仅适用于我的jquery.each。

以下代码仅适用于.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>

CSS

* {
    padding: 0;
    margin: 0;
}

.field-container {
    overflow: scroll;
}

.field {
    width: 1550px;
    height: 700px;
    border: 1px solid red;
    position: relative;
}

.characters {
    position: absolute;
    width: 50px;
    height: 50px;
    transition: .1s ease-in-out;
}

.character1 {
    background-color: blue;
    top: 100px;
    left: 0;
}

.character2 {
    background-color: green;
    top: 175px;
    left: 0;
}

.character3 {
    background-color: red;
    top: 250px;
    left: 0;
}

.obstacle1 {
    height: 50px;
    width: 50px;
    background-color: lightblue;
    position: absolute;
    top: 200px;
    left: 500px;
}

.obstacle2 {
    height: 50px;
    width: 50px;
    background-color: lightblue;
    position: absolute;
    top: 120px;
    left: 750px;
}

的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);       
    }

});

这是我的fiddle。

Answer 1

我觉得你差不多好。对于你的循环，你可以使用

作为模型

     $(".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; 


    ...

});

Answer 2

这是我建议修复的小提琴： https://jsfiddle.net/40evn8pr/

问题在于，当您直接询问其偏移/宽度/高度时，您将障碍物jquery选择“展平”为单个值。你应该从jquery选择中询问每个元素的偏移是什么，并使用'$ .each'循环来使每个障碍都有效。

$(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);       
}
});

使所有div.obstacles具有相同的功能

2 个答案: