如何将图片放置在正确的位置

Question

我正在创建一个浏览器游戏，我的代码有问题。 看一下这个屏幕截图： Screenshot

当船只面向东，南或西时。它位于正确的网格中：C4。当您将航向切换到北方时，您仍应位于c4中，但是它将进入网格b4。另一个屏幕截图：Screenshot

我真的不明白为什么要这么做。我可以使用css将其下拉，但这会阻止动画被调用。

这是我的代码：

//css
<style>
#myAnimationRight {
  background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>right.png");
  background-size:     cover;                      
  background-repeat:   no-repeat;
  height:30px;
  position:absolute;
  width:55px;
  top:30px;
  left: 1px;
}
#myAnimationLeft {
  background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>left.png");
  background-size:     cover;                      
  background-repeat:   no-repeat;
  height:30px;
  position:absolute;
  width:55px;
  top:30px;
  right: 1px;
}
#myAnimationUp {
  background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>up.png");
  background-size:     cover;                      
  background-repeat:   no-repeat;
  height:55px;
  position:absolute;
  width:30px;
  bottom:1px;
  right: 30px;
}
#myAnimationDown {
  background-image: url("images/ships/ship<?php echo $_SESSION['getshiptype']; ?>down.png");
  background-size:     cover;                      
  background-repeat:   no-repeat;
  height:55px;
  position:absolute;
  width:30px;
  top:1px;
  right: 30px;
}
</style>
// javascripts
<script>
  function myMoveRight() {
    var elem = document.getElementById("myAnimationRight");  
    var pos = 0;
    var id = setInterval(frame, 50);
    Clock.pause();
    function frame() {
      if (pos == 105) {
        clearInterval(id);
        Clock.resume();
        keymanager.resume();
      } else {
        pos++;
        elem.style.left = pos + 'px';
        keymanager.suspend();
      }
    }
    MoveShip();
  }
</script>
<script>
  function myMoveLeft() {
    var elem = document.getElementById("myAnimationLeft");  
    var pos = 0;
    var id = setInterval(frame, 50);
    Clock.pause();
    function frame() {
      if (pos == 105) {
        clearInterval(id);
        Clock.resume();
        keymanager.resume();
      } else {
        pos++;
        elem.style.right = pos + 'px';
        keymanager.suspend();
      }
    }
    MoveShip();
  }
</script>
<script>
  function myMoveDown() {
    var elem = document.getElementById("myAnimationDown");  
    var pos = 0;
    var id = setInterval(frame, 50);
    Clock.pause();
    function frame() {
      if (pos == 105) {
        clearInterval(id);
        Clock.resume();
        keymanager.resume();
      } else {
        pos++;
        elem.style.top = pos + 'px';
        keymanager.suspend();
      }
    }
    MoveShip();
  }
</script>
<script>
  function myMoveUp() {
    var elem = document.getElementById("myAnimationUp");  
    var pos = 0;
    var id = setInterval(frame, 50);
    Clock.pause();
    function frame() {
      if (pos == 105) {
        clearInterval(id);
        Clock.resume();
        keymanager.resume();
      } else {
        pos++;
        elem.style.bottom = pos + 'px';
        keymanager.suspend();
      }
    }
    MoveShip();
  }
</script>
//html / php
<?php
        if($shipheading == "E")
        {
          echo '<div id ="myAnimationRight"></div>';
        }
        elseif($shipheading == "W")
        {
          echo '<div id ="myAnimationLeft"></div>';
        }
        elseif($shipheading == "S")
        {
          echo '<div id ="myAnimationDown"></div>';
        }
        elseif($shipheading == "N")
        {
          echo '<div id ="myAnimationUp"></div>';
        }
?>

任何帮助将不胜感激。