javascript利用键盘控制小方块的移动

网络编程 2024/12/24 佚名

3 1 2

本文实例为大家分享了利用键盘控制小方块的移动，供大家参考，具体内容如下

原理

1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动

2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；

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

3.方块的移动实际上就是坐标的改变，因此需要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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js键盘控制小方块移动,js键盘控制移动,js键盘控制小方块

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“javascript利用键盘控制小方块的移动”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

javascript利用键盘控制小方块的移动

vue实现淘宝购物车功能

vue实现购物车的监听

评论“javascript利用键盘控制小方块的移动”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接