Javascript for loop/timer conflit

[luiscvalmeida]

Hello,
I'm doing a javascript based game for my college project.
That's based on a beaver that has to jump from trunk to trunk to avoid falling in the water.

The thing is that the trunks are moving from the right to the left, I created them randomly giving each of those a diferent ID, example: tronco1, tronco2, tronco3.

The problem is that I want to detect the collision between the beaver and all the trunks and for some unknown reason the beaver only collides with the last trunk sent randomly by the function.

Here is the function that create the trunks:

function lancatroncos() {

    var randomtronco = parseInt(Math.random() * 2) + 1;
    var randomtroncoy = parseInt(Math.random() * postroncosy.length);

    contatroncos++;

    document.getElementById("jogo").innerHTML += "<img id='tronco" + contatroncos + "' src='imagens/tronco" + randomtronco + ".png' />";
    document.getElementById("tronco" + contatroncos).style.position = "absolute";
    document.getElementById("tronco" + contatroncos).style.zIndex = 0;
    document.getElementById("tronco" + contatroncos).style.left = 775 + "px";
    document.getElementById("tronco" + contatroncos).style.top = postroncosy[randomtroncoy] + "px";

}

Here is the function that should detect the collision and give the beaver different "velocity":

function desclocacastor() {

    var topcastor = parseInt(document.getElementById("castor2").style.top);
    var leftcastor = parseInt(document.getElementById("castor2").style.left);

    for (y = 0; y <= contatroncos; y++) {

        var toptronco = parseInt(document.getElementById("tronco" + y).style.top);
        var lefttronco = parseInt(document.getElementById("tronco" + y).style.left);

        if (topcastor + 50 >= toptronco && topcastor + 50 <= toptronco + 40
            && leftcastor >= lefttronco && leftcastor <= lefttronco + 150) {
            colisaotronco = true;
        } else {
            colisaotronco = false;
        }
 
    }

        if (colisaotronco === false){
            velocidadecastor = 5;
        }
        if (colisaotronco === true){
            velocidadecastor = 2;
        }


    document.getElementById("castor2").style.left = leftcastor - velocidadecastor + "px";

}

The first function apresented is running every 2 secounds via a timer, and the secound every 0,050 secounds, via timer aswell.

I tryed many different ways, I did alerts to know what the for loop is giving, but it seems just fine...
Reminder: The problem is that the for loop only detects the collision against the LAST trunk created.

 

[vacunita]

Have you checked for any errors that may be halting execution for all logs except the last one?

How are you setting the beaver's left and top position?

Have you alerted topcastor and leftcastor through your second loop? Do your comparison's hold up?




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[luiscvalmeida]

Hello Phil,
Yes, I did it all, everything seems just fine, but for some reason the beaver only collides with the last log trown, the for loop should be accessing all the logs sent, not only 1...

 

[vacunita]

<b>How are you setting the beaver's left and top position?</b>
How are you setting this?

<b>Have you alerted topcastor and leftcastor through your second loop? Do your comparison's hold up?
</b>
I don't think they hold up

if (topcastor + 50 >= toptronco && topcastor + 50 <= toptronco + 40
            && leftcastor >= lefttronco && leftcastor <= lefttronco + 150) {
            colisaotronco = true;
        } else {
            colisaotronco = false;
        }
 
    }

Let's say topcastor is 100 and toptronco is 80
100+50 >= 80 this is true
100+50 <= 80 + 40 this is false.
That immediately kills the collision.

Now you have 4 things that all need to be true for there to be a collision. If a single one of them is not true, then there's no collision.

Again how are you setting your beaver's top and left positions?

Can you alert the values of the beaver's position when its supposed to be colliding and confirm the if statements should be triggering?

Show us some values for topcastor, and leftcastor when there should be a collision.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech