variable keeps increasing even after it was supposed to be reset to 0

Question

I'm making a multiplayer html5 game using socket.io and node.js, and there is a variable that I want to keep below a certain number, but it keeps increasing even after I reset it. I have two main files, app.js: my server, and Index.html: The client

here is my code:

reset_sx = function() {
  if (sx > 96) {
    console.log(sx);
    sx = 0;
  }
}

  socket.on("newPositions", function(data) {
    ctx.clearRect(0, 0, 500, 500);
    for (var i = 0; i < data.length; i++)
      ctx.drawImage(img.player, sx, sy, 32, 48, data[i].x, data[i].y, 32, 48);
      reset_sx();
  });



  document.onkeydown = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: true });
      sx += 32;
      sy = 96;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: true });
      sx += 32;
      sy = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: true });
      sx += 32;
      sy = 48;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: true });
      sx += 32;
      sy = 144;
    }
    // w
  };
  document.onkeyup = function(event) {
    if (event.keyCode === 68) {
      socket.emit("keyPress", { inputId: "right", state: false });
      sx = 0;
    }
    //d
    else if (event.keyCode === 83) {
      socket.emit("keyPress", { inputId: "down", state: false });
      sx = 0;
    }
    //s
    else if (event.keyCode === 65) {
      socket.emit("keyPress", { inputId: "left", state: false });
      sx = 0;
    }
    //a
    else if (event.keyCode === 87) {
      socket.emit("keyPress", { inputId: "up", state: false });
      sx = 0;
    }
    // w
  };
</script>

"newPositions" is emitted in a seperate app.js file:

  var pack = [];
  for (var i in PLAYER_LIST) {
    var player = PLAYER_LIST[i];
    player.updatePosition();
    pack.push({
      x: player.x,
      y: player.y,
      number: player.number
    });
  }
  for (var i in SOCKET_LIST) {
    var socket = SOCKET_LIST[i];
    socket.emit("newPositions", pack);
  }
}, 1000 / 25);

Expected result: after sx gets above 96 it will be reset to 0.

Actual result: after sx gets above 96 it goes to 128 then 160
(sx is incremented by 32) then is reset to 0

If I need to add more please tell me.

I am a noob programmer so if I have done anything stupid, please help

Answer 1

It is difficult to tell for sure without your server-side code but 'newPositions' is likely not being emitted right away. You could put reset_sx in your onkeydown function instead (after the if block).

edit: in the app.js file - that appears to be only part of the function, we need to be able to see the rest of it.