快捷導(dǎo)航

javascript利用鍵盤控制小方塊的移動

更新時間：2020年04月20日 10:29:16 作者：loving-cat

這篇文章主要為大家詳細(xì)介紹了javascript利用鍵盤控制小方塊的移動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了利用鍵盤控制小方塊的移動，供大家參考，具體內(nèi)容如下

原理

1. 利用鍵盤控制移動，則需要了解onkeydown函數(shù)，表示某個按鍵被按下，可以以此綁定一個事件響應(yīng)函數(shù)，當(dāng)鍵盤被按下時候，觸發(fā)此事件，進(jìn)行移動

2. keyCode 對于keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關(guān)。因此我們可以根據(jù)keycode返回的字符碼來判斷用戶所按下的鍵，下面就是一個用于測試上下左右按鍵的js代碼，經(jīng)過我的測試之后，返回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.方塊的移動實際上就是坐標(biāo)的改變，因此需要offsetLeft 和offsetTop 來獲得當(dāng)前方塊的坐標(biāo)，然后將坐標(biāo)進(jìn)行一定的更改，就可以實現(xiàn)移動的效果了，下面給出代碼

window.onload = function() {
  document.onkeydown = function(event) {
   event = event || window.event;
   //設(shè)置移動速度
   var speed = 10;
   //當(dāng)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;

   }
  };
  
  };

這樣就可以簡單實現(xiàn)方塊的移動，但是此時我們會發(fā)現(xiàn)一個問題，當(dāng)我們進(jìn)行移動的時候，按住按鍵不松手，理論上方塊應(yīng)該直接平滑的進(jìn)行移動，但實際上并非如此，第一下它會有一個小的停頓，這實際上是瀏覽器防止誤觸所設(shè)置的，因此我們需要對此進(jìn)行優(yōu)化

解決方案

這里我采用了定時器的做法來解決這個問題，因為控制移動的因素有兩個，一個是控制方向，一個是控制速度，控制方向沒有問題，因此我們需要改變速度
setInterval（function(){},time）;這是一個定時器，我們只需要在time時間內(nèi)調(diào)用一次函數(shù)，就可以解決停頓的問題了

下面附上修改后的完整代碼

<!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");
  //設(shè)置移動速度
  var speed = 10;
  //設(shè)置移動的方向
  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;

   //當(dāng)ctrl和方向按鍵同時按下時，提升移動速度
   if(event.ctrlKey) {
   speed = 50;
   } else {
   speed = 10;
   }
   //使dir等于keycode的值
   dir = event.keyCode;

   //當(dāng)鼠標(biāo)松開時，停止移動     ---如果不寫這一個會造成無法停止移動的效果
   document.onkeyup = function() {
   dir = 0;
   };

  };

  };
 </script>
 </head>

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

</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: