为了账号安全,请及时绑定邮箱和手机立即绑定

如何修复此 Javascript 程序中的移动错误,使其在同时按下两个键时不会中断?

如何修复此 Javascript 程序中的移动错误,使其在同时按下两个键时不会中断?

慕田峪7331174 2023-08-24 15:50:03
我正在编写一个用箭头键移动的盒子。我想对其进行编程,以便当我按下键盘上的某个键时,间隔会检测按下的键并将数值放入名为 KeyDown 的数组中。函数 keyPressed 检测 keyCode 是否已在 keyArray 中,以便不再调用它,并使框在屏幕上缩放,但以一致的速度缩放。如果 keyPressed 函数没有找到重复项,则会将其添加到要按时间间隔运行的数组中,并使用 moveMover 来移动盒子。然后,当按下的键被抬起时,该特定实例将从整个数组中拼接出来。当我按向左键和箭头键时,程序会正常工作。但是,当我同时按下两个键时,程序无法拼接两个键,因此,其中一个键仍在运行。然后盒子不断向左或向右移动。我尝试用逻辑来寻找解决方案,但我不明白。这是全html的盒子移动程序,带有css标签和样式标签。function getTheStyle(id, styleProperty) {  var elem = document.getElementById(id);  var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue(styleProperty);  return theCSSprop;}function keyPressed(e, keyArray) {  //check if keyCode is already in the keyArray  for (i = 0; i < keyArray.length; i++) {    if (keyArray[i] == e.keyCode) {      return;    }  }  keyArray.push(e.keyCode);}function keyLifted(e, keyArray) {  //check for every instance of the keyCode and splice it out, theory one instance, go through key array and make sure there isnt a copy anywhere  for (i = 0; i < keyArray.length; i++) {    if (keyArray[i] == e.keyCode) {      keyArray.splice(i - 1, 1);      console.log(keyArray);    }  }}function moveMover(mover, keyArray) {  //loop through key array, if number 39, if finds left key getting pressed, then add 2  for (var i = 0; i < keyArray.length; i++) {    if (keyArray[i] == 39) {      //left      mover.style.left = parseInt(getTheStyle(mover.id, "left")) + 2 + "px";      console.log(keyArray);    } else if (keyArray[i] == 37) {      //right      mover.style.left = parseInt(getTheStyle(mover.id, "left")) - 2 + "px";      console.log(keyArray);    }  }}//-----------MAIN PROGRAM ----------------------var MoverTimer; //timer for user controled elementvar mover; //inner moving elementvar keysDown = []; //all the currently depressed keyswindow.onload = function() {  mover = document.getElementById("mover");  MoverTimer = setInterval(function() {    moveMover(mover, keysDown);  }, 5);}body {  background-color: skyblue;}
查看完整描述

1 回答

?
喵喵时光机

TA贡献1846条经验 获得超7个赞

你有一个错误keyLifted。它应该拼接在i,而不是i - 1:


function keyLifted(e, keyArray) {

  //check for every instance of the keyCode and splice it out, theory one instance, go through key array and make sure there isnt a copy anywhere

  for (i = 0; i < keyArray.length; i++) {

    if (keyArray[i] == e.keyCode) {

      keyArray.splice(i, 1);

      console.log(keyArray);

    }

  }

}


查看完整回答
反对 回复 2023-08-24
  • 1 回答
  • 0 关注
  • 89 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信