javascript - Properly centering div based on child element -

This is a post from Game Div of Stack Exchanges, however, I think this problem is on the stack overflow More is applicable because it is making roguelike-style game

With HTML5 without using canvas (only divs) with / p>

/ strong> Pure JS ( ) I'm trying to enlarge tile size (font size) while the camera is centered inside the camera. For some reason, when the size of the tile is not equal to the map size, then the camera is a bit far away.

Note that 3D effect is aimed at; I believe it adds some required depth, and just looks super cool: D

When tile scale (row 4 in Bela) 9 (very undesirable; dots should be aligned on the player's Y axis, not at some angle):

when tileScale is 25 (at the point!):

< P>

Here is some relevant (trim) code: / P>

  window.onre Size = function () {game.viewportWidth = Math.max (document.documentElement.clientWidth, window.innerWidth || 0); Game.viewportHeight = Math.max (document.documentElement.clientHeight, window.innerHeight || 0); Game.windowSize = Math.man (game.viewportWidth, game.viewportHeight); // DODRS Sense Mono has a ratio of 3: 4 (width: height), easily // It can be problematic I'm not sure. Game.tileWidth = game.windowSize * .6 / game.tileScale; Game.tileHeight = game.windowSize * .8 / game.tileScale; } // Update Camera Status (Need Help?) This.updateCamera = function () {// Get player coordinates (-5 because we need to get player tile center) // Tiles with tiles Width Plus game window (internal square) size divided by two var left = ((-game.player.x-.5) * game.tileWidth + game.windowSize / 2) + "px"; Var top = ((-Game.player.i5) * game.tileHeight + game.windowSize / 2) + "px"; Game.planeContainer.style.left = left; Game.planeContainer.style.top = Top; }  

How can I ensure that the dots should always be prepared instead of a slight angle at the center of the screen? My current proof states that the game.planeContainer object state is not being installed properly.

I know this is a difficult problem, so any help would be greatly appreciated. thank you in advanced!

()

Remove Transmission: Translation ( -50%, -50%);