javascript - 使用javascript移动div

Question

我需要知道这段代码的问题是什么。只要单击右键，它的意思就是将位置右侧的像素数量更改为 2。但出于某种我不知道的原因，div 只向右移动一次，仅此而已。

document.onkeydown = KeyPressed;

    function KeyPressed(k) {
    
    var LeftBtn = 37;
    var RightBtn = 39;
    var UpBtn = 38;
    var DownBtn = 40;
    
    var Player = document.getElementById("Player");
    var BeginningPos = 0;
    
    if (k.keyCode == RightBtn) {
        BeginningPos = BeginningPos + 20;
        Player.style.left = BeginningPos + "px"; 
    }
    
    }

#Background { 
    height:400px; 
    width:600px; 
    outline: 5px solid black; 
    position:relative; } 
 
    #Player { 
    position:absolute; 
    height:20px; 
    width:40px; 
    outline: 5px solid black; 
    background-color:red; left: 0; 
    font-size:10px;
    color:#fff;
    padding:20px;
    }

<div id="GameBackground">
    <div id="Player"></div>   
    </div>

Answer 1

变量 BeginningPos 需要退出函数，现在每次单击按钮时该值将始终为 0，因此按钮将移动一次，仅此而已。

document.onkeydown = KeyPressed;
var BeginningPos = 0;
function KeyPressed(k) {

   var LeftBtn = 37;
   var RightBtn = 39;
   var UpBtn = 38;
   var DownBtn = 40;

   var Player = document.getElementById("Player");

   if (k.keyCode == RightBtn) {
      BeginningPos = BeginningPos + 20;
      Player.style.left = BeginningPos + "px"; 
    }
}