keyCode-鍵盤的事件

Posted on In

這章節要介紹的是：鍵盤的事件

🍋 瀏覽器會偵測到「user 在按的是哪個按鍵」

html:

🎃 畫面上，有三支火箭

1
2
3
4
<div class="map"></div>
<img class="rocket rocket-1" src="https://i.ibb.co/bNdXsr3/rocket.png">
<img class="rocket rocket-2" src="https://i.ibb.co/bNdXsr3/rocket.png">
<img class="rocket rocket-3" src="https://i.ibb.co/bNdXsr3/rocket.png">

css:

🎃 三支火箭，用「絕對定位」來寫它們各自的「初始位置」：

🍋 bottom: 0; 三支火箭的bottom都是靠在最下面
🍋 用left把三支火箭的位置區隔開來

🎃 用transition做「漸變效果」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html{
    height: 100%;
}
body{
    background-image: url(https://i.ibb.co/F66mWF2/map.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
}
.rocket{
    position: absolute;
    bottom: 0;
    transition: all 1s cubic-bezier(1, 0.08, 0, 1.19);
    /*ease、linear、ease-in、ease-out、ease-in-out*/
}
.rocket-1{
    left: 80px;
}
.rocket-2{
    left: 180px;
}
.rocket-3{
    left: 280px;
}

我要做的功能是：

  • 按下「1」，.rocket-1就會發射
  • 按下「2」，.rocket-2就會發射
  • 按下「3」，.rocket-3就會發射

火箭的bottom原本都是在「0」的位置，發射後，就會飛到「超過瀏覽器的位置」

JS 作法如下：

1️⃣ 在<body>做監聽事件

🎃 建立變數body，選取「整個<body>的內容」：var body = document.body;

在<body>做監聽事件 .addEventListener

🎃 當我「點擊鍵盤」時，就會觸發「keydown事件」

🎃 將 function 命名為goRocket

1
2
3
4
5
var body = document.body;


// 在<body>做監聽事件
body.addEventListener('keydown',goRocket,false);

2️⃣ function goRocket(e){}

查詢「我點擊的是哪個按鍵」

先來看一下，點擊「數字 1」會出現什麼結果
JS:
🎃 在 function 小括號裡面加上「參數e」，透過「參數e」來得知：我目前在按的是「哪個按鍵」

🎃 用e.keyCode來查詢「目前，我點擊的是哪個按鍵」

1
2
3
function goRocket(e){
    console.log(e.keyCode);
}

在這個瀏覽器中，
🍋 我按下「數字 1」，在 Console 就會顯示「49」
🍋 我按下「數字 2」，在 Console 就會顯示「50」
🍋 我按下「數字 3」，在 Console 就會顯示「51」
🍋 我按下「空白鍵」，在 Console 就會顯示「32」

📖 這些數字代表的是 「鍵盤上，每個按鍵的編號」

📖 在做「鍵盤式移動的遊戲」時，就可以利用這個方式去做，例如：當 user 點擊「編號 32」時，就執行某個行為

用switch寫「條件判斷式」

‼️ 因為在這個「火箭發射的案例」中，「按下數字 1, 2, 3」分別就會執行「相對應的行為」–> 每個條件都會符合–> 所以這裡很適合用switch來寫

JS:
🎃 在switch小括弧中，帶入的參數是「e.keyCode」

🎃 case: 如果「我點擊的是“編號 49”」，就會去「更改.rocket-1的style狀態」

🍋 更改style狀態–> 從「bottom: 0;」變成「bottom: 2000px;」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function goRocket(e){
    console.log(e.keyCode);
    switch(e.keyCode){
        case 49:
            document.querySelector('.rocket-1').style.bottom = '2000px';
            break;
        case 50:
            document.querySelector('.rocket-2').style.bottom = '2000px';
            break;
        case 51:
            document.querySelector('.rocket-3').style.bottom = '2000px';
            break;            
    }
}

😄 寫完 JS 程式碼了！

調整飛行速率

如何調整「火箭的飛行速率」呢？

在 css 裡面，
🎃 調整「transition的秒數」就可以調整「飛行速率」了

例如我把秒數從「1s」改成「5s」，速率就會變很慢

1
2
3
4
5
6
.rocket{
    position: absolute;
    bottom: 0;
    transition: all 5s cubic-bezier(1, 0.08, 0, 1.19);
    /*ease、linear、ease-in、ease-out、ease-in-out*/
}

調整速率曲線

css:

1
2
3
4
5
6
.rocket{
    position: absolute;
    bottom: 0;
    transition: all 5s cubic-bezier(1, 0.08, 0, 1.19);
    /*ease、linear、ease-in、ease-out、ease-in-out*/
}

🎃 「cubic-bezier(1, 0.08, 0, 1.19)」是用來「調整速率的曲線」

在 Chrome 的開發者工具中，打開cubic-bezier的紫色小框框（下圖紅色箭頭處），就可以用「不同數值」來「調整速率的曲線」

預設的速率曲線

css:

1
2
3
4
5
6
.rocket{
    position: absolute;
    bottom: 0;
    transition: all 5s cubic-bezier(1, 0.08, 0, 1.19);
    /*ease、linear、ease-in、ease-out、ease-in-out*/
}

除了「使用cubic-bezier來調整“速率曲線”」之外，在transition中，原本就有一些「預設的速率曲線」可以直接使用：

🍋 ease
🍋 linear
🍋 ease-in
🍋 ease-out
🍋 ease-in-out

完整 JS 程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var body = document.body;

function goRocket(e){
    console.log(e.keyCode);
    switch(e.keyCode){
        case 49:
            document.querySelector('.rocket-1').style.bottom = '2000px';
            break;
        case 50:
            document.querySelector('.rocket-2').style.bottom = '2000px';
            break;
        case 51:
            document.querySelector('.rocket-3').style.bottom = '2000px';
            break;            
    }
}

// 在<body>做監聽事件
body.addEventListener('keydown',goRocket,false);

我的 codepen 範例

https://codepen.io/saffranwang/full/ExawXYO