CSSをkeyDownに配置

私は飛行機のゲームを作っています。私はミサイルを撃つために、私はミサイルのクラスとdivを作成し、私の飛行機の位置を使用してミサイルを配置するJavaScript関数を使用しています。CSSをkeyDownに配置

問題は私のトップポジションです。ここで

が私のKeyDown機能です...

document.onkeydown = function(e) { 
     (e.keyCode === 37) ? player.left-= 10 
     : (e.keyCode === 38) ? player.top-= 10 
     : (e.keyCode === 39) ? player.left += 10 
     : (e.keyCode === 40) ? player.top += 10 
     : (e.keyCode === 32) ? missiles.push({top: player.top - 8, left: player.left + 34}) 
     : player = player; 
     drawMissiles(); 


     (player.top <= 400) ? player.top = 400 
     : player = player; 



     drawPlayer(); 
}

これは「トップ」との性質を持つ空のミサイル配列にオブジェクトを追加します「左」。

私はそのようにように、私のCSSスタイルとして使用されている上部と底部の特性と私のHTMLにそのdiv要素を追加するには、JavaScriptの機能を使用しています。..

function drawMissiles() { 
      let content = ""; 
      missiles.map(function(missile) { 
       content+= "<div class='missile' style='left:"+missile.left+"px;, top:"+missile.top+"px;'></div>" 
        document.getElementById("missiles").innerHTML = content; 
       }) 
      } 
     drawMissiles();

私の「左」プロパティが働いていますしかし、私の「トップ」はそうではありません。私のミサイルは私のページの一番上にあります。