PixiJS V5 教學(10) - 鍵盤控制

前言

接下來這一篇將會來介紹如何使用鍵盤來控制圖片,讓目前 PIXI 更像一個遊戲。

鍵盤監聽

首先在這邊我們會需要使用到 JavaScript 的鍵盤監聽,而主要監聽的按鈕不意外是上、下、左、右,此外還有打 CS 常見的 W (上)、S (下)、A (左)、D (右) 年齡暴露了

假使若你不清楚 上、下、左、右以及 W (上)、S (下)、A (左)、D (右) 按鈕不清楚的話,可以使用 event.keyCode 來查看

1
2
3
4
5
const body = document.querySelector('body');

body.addEventListener('keydown',(e) => {
console.log(e.keyCode);
})

所以我們可以知道每一個相對應的 keydown

  • 上 - 38
  • 下 - 40
  • 左 - 37
  • 右 - 39
  • W (上) - 87
  • S (下) - 83
  • A (左) - 65
  • D (右) - 68

若對於 JavaScript 基礎觀念不清楚的話,這邊推薦可以看一下我先前參加鐵人在寫的 RE:從零開始的學習 JS 生活 系列。

鍵盤移動

前面我們已經知道相對應的鍵盤按鍵號碼了,那麼接下來就是要實作鍵盤移動的部分,這邊將會挪用先前範例來做修正

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const body = document.querySelector('body');

body.addEventListener('keydown',(e) => {
switch(e.keyCode) {
case 38:
case 87:
container.y -= 5;
break;
case 40:
case 83:
container.y += 5;
break;
case 37:
case 65:
container.x -= 5;
break;
case 39:
case 68:
container.x += 5;
break;
default:
break;
}
})

參考文獻

0%