Javascript 为什么我的JS Shmup将我的镜头向右移动？

我试图修改Jared Mills现有的JS/HTML5 shmup，使其垂直并更改精灵。更换精灵很容易。逻辑很有效。但是，我在渲染快照和碰撞检测时遇到了很多问题。代码“似乎”起作用了。。。但是，拍摄的方式并不正确

这是我的相关代码（其余的都没有激活。我所做的只是在空格键上发送垃圾邮件以“开火”（调用fireLaser（））请观看附带的动画GIF。假设画布为400x400像素

 fireLaser() {
  let laser = createLaserElement()
  mainPlayArea.appendChild(laser)
  moveLaser(laser)
}


function createLaserElement() {
  let xPosition = parseInt(window.getComputedStyle(shooter).getPropertyValue('left')) // assume 180px
  let yPosition = parseInt(window.getComputedStyle(shooter).getPropertyValue('top')) // assume 350px
  let newLaser = document.createElement('img')
  newLaser.src = 'images/bullet.png' // green paw
  newLaser.classList.add('laser')
  newLaser.style.left = `${xPosition-40}px` // should be +10, but... 
  newLaser.style.top = `${yPosition-20}px`
  return newLaser
}


function moveLaser(laser) {
  let laserInterval = setInterval(() => {
    let yPosition = parseInt(laser.style.top)
    let monsters = document.querySelectorAll(".monster")
    monsters.forEach(monster => {
      if (checkLaserCollision(laser, monster)) {
        monster.src = "images/explosion.png"   // dead skull
        monster.classList.remove("monster")
        monster.classList.add("dead-monster")
        scoreCounter.innerText = parseInt(scoreCounter.innerText) + 100
      }
    })
    if (yPosition <= 40) {  // shot didn't hit anything and reached the tp
      laser.remove()  // erase it
    } else {
      laser.style.top = `${yPosition - 4}px`  // move 4 pixels up
    }
  }, 10)
}

fireLaser（）{
让激光=createLaserElement（）
主游戏区。附加儿童（激光）
移动激光器（激光）
}
函数createLaserElement（）{
设xPosition=parseInt（window.getComputedStyle（shooter.getPropertyValue（'left'））//假设为180px
让yPosition=parseInt（window.getComputedStyle（shooter.getPropertyValue（'top'））//假设350px
让newLaser=document.createElement（'img'））
newLaser.src='images/bullet.png'//绿色paw
newLaser.classList.add（'laser'））
newLaser.style.left=`${xPosition-40}px`//应该是+10，但是。。。
newLaser.style.top=`${yPosition-20}px`
返回新激光器
}
功能激光器（激光器）{
让laserInterval=setInterval（（）=>{
让yPosition=parseInt（laser.style.top）
让monsters=document.queryselectoral（“.monster”）
怪物。forEach（怪物=>{
如果（检查激光集合（激光，怪物））{
monster.src=“images/explosion.png”//dead skull
怪物。类列表。移除（“怪物”）
怪物。类列表。添加（“死亡怪物”）
scoreCounter.innerText=parseInt（scoreCounter.innerText）+100
}
})
如果（yPosition在我发布问题的那一刻，我意识到问题不在代码中，而是在所附的样式表中，对不起。样式表将对象称为position:relative，这会弄乱坐标。将其更改为绝对后，问题自行解决