JavaScript "if" conditions not working

I am currently creating a game with HTML/SCSS and jQuery/JavaScript.

I have a character div that moves around when pressing keyboard arrows with jQuery. This works with an if statement that defines where the player can move around, so it can't get out of a bigger div.

I wanted to create a pure JavaScript version of the game, and the player can move around and all, except if I put the if statements so it doesn't get out of the border.

Here is my CodePen

Here is my game (so far) with jQuery:

var jQueryVersion = function() {
  var game_anim = function() {

    var level = [
      [0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
      [0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
      [0, 0, 0, 0, 0, 3, 3, 0, 3],
    ];

    var $player = $("#player");
    var $game = $("#game");

    for (var i = 0; i < level.length; i++) {
      for (var j = 0; j < level[i].length; j++) {

        var n = level[i][j];

        if (n === 1) {
          $("<div>", {
            "class": "block stone ypos-0 xpos-" + [j]
          }).appendTo("#game");

        }

        if (n === 2) {
          $("<div>", {
            "class": "block stone ypos-1 xpos-" + [j]
          }).appendTo("#game");
        }
        if (n === 3) {
          $("<div>", {
            "class": "block stone ypos-2 xpos-" + [j]
          }).appendTo("#game");

        }

        if (n === 4) {
          $("<div>", {
            "class": "block stone ypos-3 xpos-" + [j]
          }).appendTo("#game");
        }

        if (n === "l") {
          $("<div>", {
            "class": "block lava ypos-" + [i] + " xpos-" + [j]
          }).appendTo("#game");
        }

      }
    }

    $(document).keydown(function(event) { // keycodes: left = 37, right = 39
      if (event.which == 39 || event.which == 68) { // right arrow or D
        if ($player.position().left < $game.width() - $player.width()) {
          $player.css("left", "+=10");
        }
      }
      if (event.which == 37 || event.which == 81 || event.which == 65) { // left arrow or Q on AZERTY or A on QWERTY
        if ($player.position().left > 0) {
          $player.css("left", "-=10");
        }
      }

      if (event.which == 38) {
        if ($player.position().top > 0) {
          $player.css("top", "-=10");
        }
      }
      if (event.which == 40) {
        if ($player.position().top < 500 - $player.height()) {
          $player.css("top", "+=10");
        }
      }

    });


  }

  $(document).ready(function() {

    game_anim();

  });
}
jQueryVersion();

#game {
  position: absolute;
  left: calc((100% - 800px)/2);
  height: 500px;
  width: 800px;
  border: 2px solid black;
}
.block {
  height: 50px;
  width: 50px;
  position: absolute;
}
.stone {
  background-color: black;
}
.lava {
  background-color: red;
}
#player {
  height: 50px;
  width: 50px;
  background-color: #3747C0;
  bottom: 0;
  position: absolute;
}
#player .eyes {
  border-radius: 50%;
  background-color: white;
  position: absolute;
  height: 10px;
  width: 10px;
}
#player .eye_R {
  left: 7px;
  top: 10px;
}
#player .eye_L {
  left: 32px;
  top: 10px;
}
#player .mouth {
  height: 8.5px;
  width: 32px;
  background-color: white;
  border-radius: 5px;
  left: calc((50px - 32px)/2);
  bottom: 10px;
  position: absolute;
}
.ypos-0 {
  bottom: 0px;
  position: absolute;
}
.ypos-1 {
  bottom: 50px;
  position: absolute;
}
.ypos-2 {
  bottom: 100px;
  position: absolute;
}
.ypos-3 {
  bottom: 150px;
  position: absolute;
}
.ypos-4 {
  bottom: 200px;
  position: absolute;
}
.ypos-5 {
  bottom: 250px;
  position: absolute;
}
.ypos-6 {
  bottom: 300px;
  position: absolute;
}
.ypos-7 {
  bottom: 350px;
  position: absolute;
}
.ypos-8 {
  bottom: 400px;
  position: absolute;
}
.xpos-0 {
  left: 0px;
  /*position: absolute;*/
}
.xpos-1 {
  left: 50px;
  /*position: absolute;*/
}
.xpos-2 {
  left: 100px;
  /*position: absolute;*/
}
.xpos-3 {
  left: 150px;
  /*position: absolute;*/
}
.xpos-4 {
  left: 200px;
  /*position: absolute;*/
}
.xpos-5 {
  left: 250px;
  /*position: absolute;*/
}
.xpos-6 {
  left: 300px;
  /*position: absolute;*/
}
.xpos-7 {
  left: 350px;
  /*position: absolute;*/
}
.xpos-8 {
  left: 400px;
  /*position: absolute;*/
}
.xpos-9 {
  left: 450px;
  /*position: absolute;*/
}
.xpos-10 {
  left: 500px;
  /*position: absolute;*/
}
.xpos-11 {
  left: 550px;
  /*position: absolute;*/
}
.xpos-12 {
  left: 600px;
  /*position: absolute;*/
}
.xpos-13 {
  left: 650px;
  /*position: absolute;*/
}
.xpos-14 {
  left: 700px;
  /*position: absolute;*/
}
.xpos-15 {
  left: 750px;
  /*position: absolute;*/
}
.xpos-16 {
  left: 800px;
  /*position: absolute;*/
}
.xpos-17 {
  left: 850px;
  /*position: absolute;*/
}
.xpos-18 {
  left: 900px;
  /*position: absolute;*/
}

<script src="http://ift.tt/1oMJErh"></script>

<div id="game">
  <div id="player">
    <div class="eyes eye_R"></div>
    <div class="eyes eye_L"></div>
    <div class="mouth"></div>
  </div>
</div>

---

---

As you can see, the character/player can move around, without getting out of the box.

Why won't my pure JavaScript work though?

Here is the same project with JavaScript:

var javascriptVersion = function() {

        var game_anim = function() {

                var level = [
                        [0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
                        [0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
                        [0, 0, 0, 0, 0, 3, 3, 0, 3],
                ];

                var player = document.getElementById('player');
                var game = document.getElementById("game");

                var left = 0;
                var top = 0;

                for (var i = 0; i < level.length; i++) {
                        for (var j = 0; j < level[i].length; j++) {

                                var n = level[i][j];

                                if (n === 1) {

                                        var blocks = document.createElement("div");
                                        blocks.classList.add("block", "stone", "ypos-0", "xpos-" + j);
                                        game.appendChild(blocks);

                                }

                                if (n === 2) {
                                        var blocks = document.createElement("div");
                                        blocks.classList.add("block", "stone", "ypos-1", "xpos-" + j);
                                        game.appendChild(blocks);
                                }
                                if (n === 3) {
                                        var blocks = document.createElement("div");
                                        blocks.classList.add("block", "stone", "ypos-2", "xpos-" + j);
                                        game.appendChild(blocks);
                                }

                                if (n === 4) {
                                        var blocks = document.createElement("div");
                                        blocks.classList.add("block", "stone", "ypos-3", "xpos-" + j);
                                        game.appendChild(blocks);
                                }

                                if (n === "l") {
                                        var blocks = document.createElement("div");
                                        blocks.classList.add("block", "lava", "ypos-0", "xpos-" + j);
                                        game.appendChild(blocks);
                                }

                        }
                }

                document.addEventListener('keydown', function(event) { // keycodes: left = 37, right = 39
                        if (event.keyCode == 39 || event.keyCode == 68) { // right arrow or D
                                if (player.style.left < game.style.width - player.style.width) {
                                        left += 10;
                                        player.style.left = (parseInt(left) + left) + "px";
                                }
                        }
                        if (event.keyCode == 37 || event.keyCode == 81 || event.keyCode == 65) { // left arrow or Q on AZERTY or A on QWERTY
                                if (player.style.left > 0) {
                                        left -= 10;
                                        player.style.left = (parseInt(left) + left) + "px";
                                }
                        }

                        if (event.keyCode == 38) {
                                if (player.style.top > 0) {
                                        top -= 10;
                                        player.style.left = (parseInt(top) + top) + "px";
                                }
                        }
                        if (event.keyCode == 40) {
                                if (player.style.top < (500 - player.style.height)) {
                                        top += 10;
                                        player.style.left = (parseInt(top) + top) + "px";
                                }
                        }

                });

        }
        game_anim();
}

javascriptVersion();

#game {
  position: absolute;
  left: calc((100% - 800px)/2);
  height: 500px;
  width: 800px;
  border: 2px solid black;
}

.block {
  height: 50px;
  width: 50px;
  position: absolute;
}

.stone {
  background-color: black;
}

.lava {
  background-color: red;
}

#player {
  height: 50px;
  width: 50px;
  background-color: #3747C0;
  bottom: 0;
  position: absolute;
}
#player .eyes {
  border-radius: 50%;
  background-color: white;
  position: absolute;
  height: 10px;
  width: 10px;
}
#player .eye_R {
  left: 7px;
  top: 10px;
}
#player .eye_L {
  left: 32px;
  top: 10px;
}
#player .mouth {
  height: 8.5px;
  width: 32px;
  background-color: white;
  border-radius: 5px;
  left: calc((50px - 32px)/2);
  bottom: 10px;
  position: absolute;
}

.ypos-0 {
  bottom: 0px;
  position: absolute;
}

.ypos-1 {
  bottom: 50px;
  position: absolute;
}

.ypos-2 {
  bottom: 100px;
  position: absolute;
}

.ypos-3 {
  bottom: 150px;
  position: absolute;
}

.ypos-4 {
  bottom: 200px;
  position: absolute;
}

.ypos-5 {
  bottom: 250px;
  position: absolute;
}

.ypos-6 {
  bottom: 300px;
  position: absolute;
}

.ypos-7 {
  bottom: 350px;
  position: absolute;
}

.ypos-8 {
  bottom: 400px;
  position: absolute;
}

.xpos-0 {
  left: 0px;
  /*position: absolute;*/
}

.xpos-1 {
  left: 50px;
  /*position: absolute;*/
}

.xpos-2 {
  left: 100px;
  /*position: absolute;*/
}

.xpos-3 {
  left: 150px;
  /*position: absolute;*/
}

.xpos-4 {
  left: 200px;
  /*position: absolute;*/
}

.xpos-5 {
  left: 250px;
  /*position: absolute;*/
}

.xpos-6 {
  left: 300px;
  /*position: absolute;*/
}

.xpos-7 {
  left: 350px;
  /*position: absolute;*/
}

.xpos-8 {
  left: 400px;
  /*position: absolute;*/
}

.xpos-9 {
  left: 450px;
  /*position: absolute;*/
}

.xpos-10 {
  left: 500px;
  /*position: absolute;*/
}

.xpos-11 {
  left: 550px;
  /*position: absolute;*/
}

.xpos-12 {
  left: 600px;
  /*position: absolute;*/
}

.xpos-13 {
  left: 650px;
  /*position: absolute;*/
}

.xpos-14 {
  left: 700px;
  /*position: absolute;*/
}

.xpos-15 {
  left: 750px;
  /*position: absolute;*/
}

.xpos-16 {
  left: 800px;
  /*position: absolute;*/
}

.xpos-17 {
  left: 850px;
  /*position: absolute;*/
}

.xpos-18 {
  left: 900px;
  /*position: absolute;*/
}

<div id = "game">
        <div id = "player">
                <div class = "eyes eye_R"></div>
                <div class = "eyes eye_L"></div>
                <div class = "mouth"></div>
        </div>
</div>

Thank you for your help!