Search code examples
javascriptweb-worker

Bug with -= and web workers


I'm developing a little game in JS and I'm using many web workers to manage my enemies. Here is my ennemis.js code (it's my web worker):

var xEnnemis, nbrEnnemis;
var x=0;
//Seul objectif : calculer les positions des ennemis.
onmessage = function(e) {
    var idEnnemis = String(e.data[0]);
    var recXEnn = String(e.data[1]);




    xEnnemis = recXEnn;
    var recSpeedEnn = String(e.data[2]);
    vitesseEnnemis = recSpeedEnn;

    animationEnnemisInterval = setInterval(calculateEnnemisPos, 120); //60

    function calculateEnnemisPos(){
            if (xEnnemis>0){
                xEnnemis -= vitesseEnnemis;
            }else{
                xEnnemis=0;
            }
        //console.log("Send datas + "+ idEnnemis);
        postMessage([idEnnemis, xEnnemis]);
    } 
}

And here is my main script

if (typeof(Worker) !== "undefined") {console.log("Tu supportes les workers  !")} else {console.log("Sorry bro...");} 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
//ENEMIE
var nbrnnemis = 3; //Math.floor(Math.random() * (3 - 5 + 1) ) + 5;
var ennemie = new Image();
ennemie.src = "media/zombie.png";
var xEnnemisGen = [];
var vitesseEnnemis = [];
var posEnnemisrecue = [];
var ennemisRecu = 0;
var animZombie=0;
for (i=0;i<nbrEnnemis; i++){
    var w = new Worker('ennemis.js');
    xEnnemisGen[i] = 500;
    //xEnnemisGen[i] = Math.floor(Math.random() * (1401 - 1290 + 1) ) + 1281;
    vitesseEnnemis[i] = Math.floor(Math.random() * (4 - 10 + 1) ) + 4;
    //console.log("Envoyé au worker : " +i + " " + xEnnemisGen[i] + " " + vitesseEnnemis[i] );
    w.onmessage = test;
    w.postMessage([i, xEnnemisGen[i], vitesseEnnemis[i]]);
}
console.log("Nombres d'ennemis : " + nbrEnnemis);
//console.log(xEnnemis);
function test(e){
    var id = String(e.data[0]);
    var position = String(e.data[1]);
    //console.log("Just received "+e.data+ " from Worker !"); //fait ramer de ouf
    console.log("Recu la position: "+position+" avec l'id: " +id);
    posEnnemisrecue.push(position);
    ennemisRecu++;
    if (ennemisRecu == nbrEnnemis){
        if (animZombie==23){animZombie=0;}else{animZombie+=1;}
        for (i=0;i<nbrEnnemis;i++){
            ctx.drawImage(ennemie, animZombie*118,0, 118,177, posEnnemisrecue[i], 500, 118,177);
            console.log("c'est dessiné + "+ posEnnemisrecue[i]);
        }
        posEnnemisrecue=[];
        ennemisRecu = 0;
        //ctx.clearRect(0,0,1280, 720);
        ctx.drawImage(ennemie, animZombie*118,0, 118,177, 0, 0, 118,177);
        console.log(animZombie);
        console.log("dessiné " + animZombie);
    }
}

But sometimes the value of xEnnemis sent by my web worker does not decrease; it even increases as we can see on this log:

dessiné 6
Recu la position: 500 avec l'id: 2
Recu la position: 0 avec l'id: 1
Recu la position: 0 avec l'id: 0
c'est dessiné + 500
c'est dessiné + 0
7
dessiné 7
Recu la position: 500 avec l'id: 2
Recu la position: 0 avec l'id: 1
Recu la position: 0 avec l'id: 0
c'est dessiné + 500
c'est dessiné + 0

Do you have any idea of why ? Thanks !

Edit: May the fourth, after test of the C.Champagne version

Okay, just tested, seems not to work. The string wasn't the answer. Thanks anyway for your help !

The new Log:

dessiné 15
Recu la position: 0 avec l'id: 0
Recu la position: 2100 avec l'id: 1
Recu la position: 0 avec l'id: 2
c'est dessiné + 0
c'est dessiné + 2100
c'est dessiné + 0
16
dessiné 16
Recu la position: 0 avec l'id: 0
Recu la position: 2101 avec l'id: 1
Recu la position: 0 avec l'id: 2
c'est dessiné + 0
c'est dessiné + 2101
c'est dessiné + 0
17
dessiné 17
Recu la position: 0 avec l'id: 0
Recu la position: 2102 avec l'id: 1
Recu la position: 0 avec l'id: 2
c'est dessiné + 0
c'est dessiné + 2102
c'est dessiné + 0
18

As you can see, it's even increasing. I wonder if it's not the fault of my test(e) function of my main script, which is called too many times at once and does anything.

Just tested it on Chrome, to see if it was not a navigator error, and it's doing the same. If you have any idea, because I'm stuck. Thanks in advance !

Edit: 7 May 2018

Okay guys, just found out ! it's because

vitesseEnnemis[i] = Math.floor(Math.random() * (4 - 10 + 1) ) + 4;

returns sometimes wrong values ! I don't know why, but here are some results

Array [ -1, 0, -1 ]

As you can see, I will continue my investigation. If you ever had the same problem, please comment this post !

Thanks in advance !

Escatrag


Solution

  • Sooooo, after looking more precisely about this line

    vitesseEnnemis[i] = Math.floor(Math.random() * (4 - 10 + 1) ) + 4;
    

    I decided to check if the syntax was correct. The MDN link here spells the correct syntax. Instead of my line, my code should be

    vitesseEnnemis[i] = Math.floor(Math.random() * (4 - 1 + 1) ) + 1;
    

    Everything is now running fine, I pass the question as solved.

    Thanks for your help !