JavaScript实现键盘控制方块移动及消除按键延迟

作者：小圆点时间：2026-10-23 17:37:23浏览：276

本文详解如何使用JavaScript结合onkeydown事件与keyCode判断按键，控制页面方块坐标移动。针对按住按键时浏览器产生的初始停顿延迟，通过setInterval定时器优化连续移动体验，提供完整代码实现平滑控制。

本文分享一个使用JavaScript通过键盘按键控制页面中小方块位置移动的实例，供读者参考学习。

实现原理

要实现键盘控制，首先需要掌握onkeydown事件，该事件在用户按下键盘按键时触发。通过绑定事件响应函数，可以在按键被按下时执行相应的移动逻辑。

在键盘事件处理中，keyCode属性用于标识被按下的键。对于keypress事件，它表示生成的Unicode字符码；而对于keydown和keyup事件，它表示虚拟键盘码，具体数值可能受键盘布局影响。通过监听keyCode返回值，可以判断用户按下的具体按键。经测试，上下左右方向键对应的keyCode分别为37、38、39和40。以下是一段用于测试方向键输入的JavaScript代码。


window.onload = function(){
  var box = document.getElementById("box");
  document.onkeydown = function(event){
   event = event || window.event;
   console.log(event.keyCode);
  }  
  };

方块的移动本质上是其DOM元素坐标的变化。通过获取元素的offsetLeft和offsetTop属性，可以获得方块当前的位置坐标，修改这些坐标值即可实现方块的位移。具体实现代码如下。


window.onload = function() {
  document.onkeydown = function(event) {
   event = event || window.event;
   //设置移动速度
   var speed = 10;
   //当ctrl和方向按键同时按下时，提升移动速度
   if(event.ctrlKey) {
   speed = 50;
   }
   //获取div
   var box01 = document.getElementById("box01");
   switch(event.keyCode) {
   /*keyCode返回按下按键的编码
    * 37 向左
    * 38向上
    * 39向右
    * 40向下
    */
   case 37:
    box01.style.left = box01.offsetLeft - speed + "px";
    break;
   case 39:
    box01.style.left = box01.offsetLeft + speed + "px";
    break;
   case 38:
    box01.style.top = box01.offsetTop - speed + "px";
    break;
   case 40:
    box01.style.top = box01.offsetTop + speed + "px";
    break;

   }
  };
  
  };

上述代码能实现基本的方块移动，但存在一个明显问题：当用户按住方向键不放时，方块并不会立即平滑连续移动，而是在第一次按键后出现短暂的停顿。这是浏览器为了防止按键重复触发而设置的默认机制。为了解决这一问题，需要对移动逻辑进行优化。

解决方案

这里采用定时器机制来解决上述停顿问题。移动控制涉及两个维度：方向与速度。方向由按键决定，而速度可以通过定时器来统一控制，从而消除初始停顿。
使用setInterval(function(){}, time)可以设定每隔time毫秒执行一次函数。通过定时器持续更新方块位置，即可实现无停顿的平滑移动效果。

以下是优化后的完整代码示例。


<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box01 {
  width: 100px;
  height: 100px;
  background-color: #008000;
  position: absolute;
  }
 </style>
 <script type="text/javascript">
  window.onload = function() {

  //获取div
  var box01 = document.getElementById("box01");
  //设置移动速度
  var speed = 10;
  //设置移动的方向
  var dir = 0;

  setInterval(function() {
   switch(dir) {
   /*keyCode返回按下按键的编码
    * 37 向左
    * 38向上
    * 39向右
    * 40向下
    */
   case 37:
    box01.style.left = box01.offsetLeft - speed + "px";
    break;
   case 39:
    box01.style.left = box01.offsetLeft + speed + "px";
    break;
   case 38:
    box01.style.top = box01.offsetTop - speed + "px";
    break;
   case 40:
    box01.style.top = box01.offsetTop + speed + "px";
    break;

   }

  }, 50)

  document.onkeydown = function(event) {
   event = event || window.event;

   //当ctrl和方向按键同时按下时，提升移动速度
   if(event.ctrlKey) {
   speed = 50;
   } else {
   speed = 10;
   }
   //使dir等于keycode的值
   dir = event.keyCode;

   //当鼠标松开时，停止移动     ---如果不写这一个会造成无法停止移动的效果
   document.onkeyup = function() {
   dir = 0;
   };

  };

  };
 </script>
 </head>

 <body>
 <div id="box01"></div>
 </body>

</html>

以上内容总结了利用JavaScript实现键盘控制方块移动的方法，并解决了按键重复延迟的问题，希望对读者有所帮助。欢迎继续支持本站获取更多技术分享。

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09