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

前言

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

鍵盤監聽

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

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

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 生活 系列。

鍵盤移動

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

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;
  }
})

參考文獻

• KeyboardEvent
• Test for multiple cases in a switch, like an OR (||)