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"; 
    }
}

Answer 2

每次运行KeyPressed函数时，BeginningPos都被重新声明并设置为0.请参阅以下codepen并查看console.log

https://codepen.io/anon/pen/mXJBOY

快速而肮脏的修复将是以下

var BeginningPos = 0;

document.onkeydown = KeyPressed;

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"; 
}

}

希望有所帮助。

Answer 3

您的函数每次调用时都会将BeginningPos重置为零。

在函数外部移动var 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) {
    console.log(BeginningPos);
    BeginningPos = BeginningPos + 20;
    Player.style.left = BeginningPos + "px"; 
  }

}

https://jsfiddle.net/tlynch001/t1r86Lf0/

Answer 4

因为在每个keydowm事件中你设置了start left position = 0;

       while ((bytes_read = read(pfd[0], readbuf, sizeof(readbuf)-1) > 0)) {
                readbuf[bytes_read]='\0';
                fprintf(stdout, "%s\n", readbuf);
       }

但是你需要在向右移动之前获得当前的矩形位置

var BeginningPos = 0;

这是一些快速解决方案，但它可能会对您有所帮助。

Answer 5

只有逻辑错误。＆＃39; BeginningPos＆＃39;的范围变量在函数内部。在函数外声明它。固定代码：

[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"; 
}

}
window.addEventListener('keydown',KeyPressed);

Answer 6

在keyPressed（）函数中，声明beginPos = 0

function KeyPressed(k) {

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

var Player = document.getElementById("Player");
var BeginningPos = 0; //Right here to be exact

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

}

你需要在函数之外声明BeginningPos，因为它当前将它设置为0，然后每次你点击时加20，导致它只出现一次。

使用javascript移动div

6 个答案: