快捷導(dǎo)航

javascript利用鍵盤控制小方塊的移動(dòng)

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

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

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

原理

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

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

window.onload = function() {
  document.onkeydown = function(event) {
   event = event || window.event;
   //設(shè)置移動(dòng)速度
   var speed = 10;
   //當(dāng)ctrl和方向按鍵同時(shí)按下時(shí)，提升移動(dòng)速度
   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;

   }
  };
  
  };

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

解決方案

這里我采用了定時(shí)器的做法來解決這個(gè)問題，因?yàn)榭刂埔苿?dòng)的因素有兩個(gè)，一個(gè)是控制方向，一個(gè)是控制速度，控制方向沒有問題，因此我們需要改變速度
setInterval（function(){},time）;這是一個(gè)定時(shí)器，我們只需要在time時(shí)間內(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è)置移動(dòng)速度
  var speed = 10;
  //設(shè)置移動(dòng)的方向
  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和方向按鍵同時(shí)按下時(shí)，提升移動(dòng)速度
   if(event.ctrlKey) {
   speed = 50;
   } else {
   speed = 10;
   }
   //使dir等于keycode的值
   dir = event.keyCode;

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

  };

  };
 </script>
 </head>

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

</html>

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

您可能感興趣的文章: