rckjncwlng rckjncwlng - 4 months ago 8
CSS Question

Make all div.obstacles have the same function

I am making a simple game that if the characters touch the "obstacle" which is another

div
the character that touches it will slow down while they are collided.

I already have a code for this, but it is only working for my
.obstacle1 div
even if I tried using
jquery.each
or I'm just missing something.

Here is the code which is working only for
.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);
}

});


Here is my fiddle.

Answer

Here's a fiddle with my suggested fix: https://jsfiddle.net/40evn8pr/

The problem is that you're 'flattening' the obstacles jquery selection to a single value when you're directly asking for its offset/width/height. You should ask every element from the jquery selection what its offset is with an '$.each' loop to have every obstacle work.

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

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

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