Why do my Elements have this weird offset?-CodePudding

Hello Stackoverflow Users, so I am making a game with HTML, I have to eat berries, but when I collect them, the more I collect (the max is 5), the more offset the extra body parts add to all of the body parts (minus the main one).

I have tried changing offset with the variables and loop I used, but nothing worked, no matter the math operator. All of jQuery code:

// Null Variables \\
/* These variables have no value. */
var bound;
var newFood;
var horizontalMatch;
var vertialMatch;

// Main Variables \\
/* These variables keep values in store. */
var background = $(".game-background");
var player = $(".game-player");
var verticalNum = 0;
var horizontalNum = 0;
var score = 0;
var speed = 20;
var updatePos = 0;
var numOfSnakes = 0;
var snakesArray = [];

// Main Functions \\
/* These are all of the function being called, and created. */

updateSnakeCSS = function (snakes) {
  if (snakes.length > -1) {
    //for (var i = 0; i < snakes.length; i  ) {
    console.log(snakes[numOfSnakes - 1]);
    $("."   snakes[numOfSnakes - 1]).css("position", "absolute");
    $("."   snakes[numOfSnakes - 1]).css("left", player.offset().left - 20);
    $("."   snakes[numOfSnakes - 1]).css("top", player.offset().top);
    $("."   snakes[numOfSnakes - 1]).css("border", "black");
    $("."   snakes[numOfSnakes - 1]).css("border-style", "outset");
    $("."   snakes[numOfSnakes - 1]).css("border-width", 2   "px");
    $("."   snakes[numOfSnakes - 1]).css("width", player.width());
    $("."   snakes[numOfSnakes - 1]).css("height", player.height());
    $("."   snakes[numOfSnakes - 1]).css("background-color", "red");
    //}
  }
};

addSnake = function (snakes) {
  if (numOfSnakes < 5) {
    var body = document.getElementsByTagName("body")[0];
    var newBodyPart = document.createElement("div");
    newBodyPart.className = "game-player"   numOfSnakes;
    body.appendChild(newBodyPart);
    snakes.push("game-player"   numOfSnakes);
    console.log(updatePos);
    numOfSnakes  ;
  }
};

updateScore = function () {
  score  ;
  $(".game-scoreboard").text("Berries: "   score);
};
createFood = function ($parentDiv) {
  if (newFood == null) {
    var x = WMath.random(220, background.width() * 1.5 - 100);
    var y = WMath.random(100, background.height());
    var body = document.getElementsByTagName("body")[0];
    newFood = document.createElement("div");
    newFood.className = "game-food";
    body.appendChild(newFood);
    $(".game-food").css("width", player.width() / 2);
    $(".game-food").css("border", "black");
    $(".game-food").css("border-style", "outset");
    $(".game-food").css("border-width", 1   "px");
    $(".game-food").css("height", player.width() / 2);
    $(".game-food").css("background-color", "red");
    $(".game-food").css("position", "absolute");
    $(".game-food").css("left", x);
    $(".game-food").css("top", y);
  }
};

var WMath = {
  random: function (min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min   1)   min); //The maximum is inclusive and the minimum is inclusive
  },
};

var WObject = {
  isTouching: function ($div1, $div2) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1   h1;
    var r1 = x1   w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2   h2;
    var r2 = x2   w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    console.log("Touching WObject");
    newFood = null;
    createFood(document.body);
    updateScore();
    addSnake(snakesArray);
    updateSnakeCSS(snakesArray);
    speed  = 2;
    $div2.remove();
    return true;
  },
};

createFood(document.body);

$(document).keyup(function (e) {
  var key = e.keyCode || e.which;

  const keys = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39,
  };
  if (key === keys.UP && verticalNum > 0 && !String(verticalNum).includes("e")) {
    verticalNum -= speed;
    if (verticalNum < 0) {
      verticalNum = 0;
    }
    if (snakesArray.length > -1) {
      for (var i = 0; i < snakesArray.length; i  ) {
        $("."   snakesArray[i]).css("top", player.offset().top   i * 23   updatePos);
        $("."   snakesArray[i]).css("left", player.offset().left   updatePos);
      }
    }
    $(".game-player").css("top", verticalNum);
    WObject.isTouching($(".game-player"), $(".game-food"));
  } else if (key === keys.DOWN && verticalNum < 475.8000000000002) {
    verticalNum  = speed;
    if (verticalNum > 475.8000000000002) {
      verticalNum = 475.8000000000002;
    }
    if (snakesArray.length > -1) {
      for (var i = 0; i < snakesArray.length; i  ) {
        $("."   snakesArray[i]).css("top", player.offset().top - i * 23 - updatePos);
        $("."   snakesArray[i]).css("left", player.offset().left - updatePos);
      }
    }
    $(".game-player").css("top", verticalNum);
    WObject.isTouching($(".game-player"), $(".game-food"));
  } else if (key === keys.LEFT && horizontalNum > 0 && !String(horizontalNum).includes("e")) {
    horizontalNum -= speed;
    if (horizontalNum < 0) {
      horizontalNum = 0;
    }
    if (snakesArray.length > -1) {
      for (var i = 0; i < snakesArray.length; i  ) {
        $("."   snakesArray[i]).css("left", player.offset().left   i * 23   updatePos);
        $("."   snakesArray[i]).css("top", player.offset().top   updatePos);
      }
    }
    $(".game-player").css("left", horizontalNum);
    WObject.isTouching($(".game-player"), $(".game-food"));
  } else if (key === keys.RIGHT && horizontalNum < 475.8000000000002) {
    horizontalNum  = speed;
    if (horizontalNum > 475.8000000000002) {
      horizontalNum = 475.8000000000002;
    }
    if (snakesArray.length > -1) {
      for (var i = 0; i < snakesArray.length; i  ) {
        $("."   snakesArray[i]).css("left", player.offset().left - i * 23 - updatePos);
        $("."   snakesArray[i]).css("top", player.offset().top - updatePos);
      }
    }
    $(".game-player").css("left", horizontalNum);
    WObject.isTouching($(".game-player"), $(".game-food"));
  }
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GAME</title>

    <style>
      .game-background {
        background-color: lightgray;
        width: 500px;
        height: 500px;
        position: absolute;
        top: 55px;
        left: 200px;
        border: black;
        border-style: solid;
        border-width: 10px;
      }

      .game-player {
        background-color: blue;
        width: 20px;
        height: 20px;
        position: relative;
        top: 0px;
        left: 0px;
        border: black;
        border-style: inherit;
        border-width: 2px;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <p class="game-scoreboard">Berries: 0</p>
    <div class="game-background">
      <div class="game-player"></div>
    </div>

    <script>
      // The Script shown in the JavaScript
    </script>
  </body>
</html>

CodePudding user response：

It's because of:

speed  = 2;

Remove it and it will work fine.

As you're using speed in calculating the verticalNum and horizontalNum everytime, so it increments it with 2 each time, giving a wrong position.

The output after removing it: