提姆寫程式

0%

JS 筆記 - KeyCode 事件

發表於 更新於 分類於 Disqus：
用鍵盤控制怎麼設定的?

JavaScript Note

keyCode 事件很多會用來做遊戲或是網頁互動的功能，很有意思的語法。

本次主題

使用鍵盤數字 1, 2, 3 使元素向上飛出螢幕外。

先來寫結構，有三個元素，程式碼如下:

HTML

1
2
3
4
5
<div class="group">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>
  • 有三個元素，有一些是共同項目，所以就用 .box 寫在一起，當中為了要讓球飛出去，使用 transition 的特性做動畫，其中速率調整有一個貝茲曲線的語法，可以透過 F12 開發人員工具，去調整喜歡的數值。
  • 因為是使用整個瀏覽器，所以只要在 .box 中直接寫上 position: absolute; 絕對定位在 body 中，並且 bottom:0; 使初始狀態在螢幕最底下。
  • 分別把三個 .box1, .box2, .box3 靠左間距各差 200px，這個是邊調整邊看螢幕的距離，可以自己調整成喜歡的距離。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.box {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transition: all 3s cubic-bezier(1, -0.01, 0, 0.99);
  /* 貝茲曲線 */
}

.box1 {
  left: 30px;
  background-color: #d2ff55;
}

.box2 {
  left: 230px;
  background-color: orange;
}

.box3 {
  left: 430px;
  background-color: red;
}

再來寫互動，先選取到 body，原因是 body 內互動

1
var body = document.body; //指整個瀏覽器

在 body 中新增一個監聽事件，屬性為 keydown，也就是要用按下鍵盤的行為。

1
2
body.addEventListener("keydown", boxFly, false);
//在瀏覽器新增監聽事件，使用 keydown 的語法，function 名稱為 boxFly。

函式名稱為 boxFly，便在下方建立一個函式，並來確認一下按鍵的編號。

1
2
3
function boxFly(e) {
  console.log(e.keyCode); //確認鍵盤的編號
}

透過 console.log 查詢後可以得到鍵盤編號，為了符合筆電跟桌電鍵盤都可以使用，項目較多，可以使用 switch，作為物件的選擇，希望在按下按鍵後才啟動行為，所以每一個 case 後面都加上 break，避免按一下就全部啟動了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
switch (
  e.keyCode //因為項目多，可使用 switch
) {
  case 49: //上排數字鍵盤 1
    document.querySelector(".box1").style.bottom = "5000px";
    //選擇 .box1 當中的 CSS 裡面的 bottom 設定值動態改成 5000px
    break; //跑完後就不再跑
  case 50: //上排數字鍵盤 2
    document.querySelector(".box2").style.bottom = "5000px";
    break;
  case 51: //上排數字鍵盤 3
    document.querySelector(".box3").style.bottom = "5000px";
    break;
  case 97: //數字鍵盤 1
    document.querySelector(".box1").style.bottom = "5000px";
    break; //跑完後就不再跑
  case 98: //數字鍵盤 2
    document.querySelector(".box2").style.bottom = "5000px";
    break;
  case 99: //數字鍵盤 3
    document.querySelector(".box3").style.bottom = "5000px";
    break;
}

JavaScript

完整程式碼:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var body = document.body; //指整個瀏覽器

body.addEventListener("keydown", boxFly, false);
//在瀏覽器新增監聽事件，使用 keydown 的語法，function 名稱為 boxFly。

function boxFly(e) {
  console.log(e.keyCode); //確認鍵盤的編號
  switch (
    e.keyCode //因為項目多，可使用 switch
  ) {
    case 49: //上排數字鍵盤 1
      document.querySelector(".box1").style.bottom = "5000px";
      //選擇 .box1 當中的 CSS 裡面的 bottom 設定值動態改成 5000px
      break; //跑完後就不再跑
    case 50: //上排數字鍵盤 2
      document.querySelector(".box2").style.bottom = "5000px";
      break;
    case 51: //上排數字鍵盤 3
      document.querySelector(".box3").style.bottom = "5000px";
      break;
    case 97: //數字鍵盤 1
      document.querySelector(".box1").style.bottom = "5000px";
      break; //跑完後就不再跑
    case 98: //數字鍵盤 2
      document.querySelector(".box2").style.bottom = "5000px";
      break;
    case 99: //數字鍵盤 3
      document.querySelector(".box3").style.bottom = "5000px";
      break;
  }
}

來 CodePen 玩一下: https://codepen.io/hnzxewqw/full/oNXZROM

同場加映，從左到右的效果: https://codepen.io/hnzxewqw/pen/KKpWjby