整理這些技術筆記真的很花時間,如果你願意 關閉 Adblock 支持我,我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你!ヽ(・∀・)ノ
PixiJS V5 教學(10) - 鍵盤控制
前言
接下來這一篇將會來介紹如何使用鍵盤來控制圖片,讓目前 PIXI 更像一個遊戲。
鍵盤監聽
首先在這邊我們會需要使用到 JavaScript 的鍵盤監聽,而主要監聽的按鈕不意外是上、下、左、右,此外還有打 CS 常見的 W (上)、S (下)、A (左)、D (右) 年齡暴露了。
假使若你不清楚 上、下、左、右以及 W (上)、S (下)、A (左)、D (右) 按鈕不清楚的話,可以使用 event.keyCode 來查看
1 | |
所以我們可以知道每一個相對應的 keydown
- 上 - 38
- 下 - 40
- 左 - 37
- 右 - 39
- W (上) - 87
- S (下) - 83
- A (左) - 65
- D (右) - 68
若對於 JavaScript 基礎觀念不清楚的話,這邊推薦可以看一下我先前參加鐵人在寫的 RE:從零開始的學習 JS 生活 系列。
鍵盤移動
前面我們已經知道相對應的鍵盤按鍵號碼了,那麼接下來就是要實作鍵盤移動的部分,這邊將會挪用先前範例來做修正
1 | |
參考文獻
整理這些技術筆記真的很花時間,如果你願意 關閉 Adblock 支持我,我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你!ヽ(・∀・)ノ