iT邦幫忙

2022 iThome 鐵人賽

DAY 24
0
Modern Web

PixiJS青銅玩家系列 第 24

【LV. 24】PixiJS青銅玩家:helper function - keyboard()(2)物件

  • 分享至 

  • xImage
  •  

▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統提示:「If you fail, don't forget to learn your lesson.」,PixiJS青銅玩家還卡關於自定義function階段,僅獲得經驗提昇等級。

▉ 主線任務:helper function - keyboard( )之物件

▍任務說明

昨天寫了「大方向:這個function做了哪些事情」,今天將要來研究他裡面的JS概念,第一個碰到的就是物件!

▍作法

function keyboard(keyCode) {
  var key = {};
  key.code = keyCode;
  key.isDown = false;
  key.isUp = true;
  key.press = undefined;
  key.release = undefined;
  //The `downHandler`
  key.downHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isUp && key.press) key.press();
      key.isDown = true;
      key.isUp = false;
    }
    event.preventDefault();
  };

  //The `upHandler`
  key.upHandler = function(event) {
    if (event.keyCode === key.code) {
      if (key.isDown && key.release) key.release();
      key.isDown = false;
      key.isUp = true;
    }
    event.preventDefault();
  };

  //Attach event listeners
  window.addEventListener(
    "keydown", key.downHandler.bind(key), false
  );
  window.addEventListener(
    "keyup", key.upHandler.bind(key), false
  );
  return key;
}

▍分析

這裡主要是看到了這大段程式碼,決定先來研究物件:

var key = {};

key.code = keyCode;
key.isDown = false;
key.isUp = true;
key.press = undefined;
key.release = undefined;
key.downHandler = function(event){...}
key.upHandler = function(event){...}

於是就先從JS的型別開始看起。

  • JS內建型別
    主要分成兩大類:基本型別、物件型別
    (基本型別之外的值都是物件)

    JS內建型別
            ├─基本型別(primitives)
            │    ├─string
            │    ├─number
            │    ├─boolean
            │    ├─null
            │    ├─undefined
            │    └─symbol
            └─物件型別(object)
    

    也可以從規範的第六章中,可以看到規範將JS型別分成了8種(雖然是列出7點,但第6點的Numeric Types又分成Number Type以及BigInt Type)

接著把物件拆分更細,看看他是怎麼組成的。

  • 物件>屬性>鍵值對

    An object is a collection of properties and has a single prototype object.
    The prototype may be the null value.
    

    我們一樣從規範ECMA 262來看看他對於物件的解釋,從上面得知,「物件」可以儲存零到多個「屬性(property)」,而一個「屬性」包含一組「鍵值對(key-value pair)」(或稱為name-value pair)。

    屬性的「鍵(key)」是一個字串型態。
    屬性的「值(value)」可以為任一基本型別、一個物件或是函式。

    把以上文字整理成一張圖:

  • 物件宣告
    再來是建立物件的方法,基本上有兩種:物件建構式、物件實字

    • 物件建構式(Object Constructor)
      new一個Object()建立物件,再給他屬性跟方法。
      var person = new Object();
      
      person.name = "Hello";
      person.age = 20;
      person.sayHi = function(){
          console.log("Hi");
      }
      
    • 物件實字(Object Literal)
      最常用的方法,用{}大括號來建立物件。
      var person = {
          name: "Hello",
          age: 20,
          sayHi: function(){
              console.log("Hi")
          }
      }
      
  • 物件屬性的存取方法
    建立物件後,如果想要存取物件的屬性,基本上有兩種方法:Dot notation、Bracket notation

    • 點點符號(Dot notation)
      利用點點(.)來存取物件的屬性。
      var person = {
          name: "Hello",
          age: 20,
          sayHi: function(){
              console.log("Hi")
          }
      }
      
      person.name; //"Hello"
      person.age; //20
      
      
    • 中括號符號(Bracket notation)
      利用中括號([ ])來存取物件的屬性。
      var person = {
          name: "Hello",
          age: 20,
          sayHi: function(){
              console.log("Hi")
          }
      }
      
      person["name"]; //"Hello"
      person["age"]; //20
      

      中括號[ ]裡面如果放的是字串而不是變數,要記得加上引號。


▉ 結語

pixiJS寫一寫變成在理解JS QQ對JS實在學淂還太過淺顯,所以一碰到大觀念就完完全全的卡住,只好回過頭把JS好好的學習,明天會寫事件處理的部份,後天則會寫bind(),剩下的三四天預計會寫一些運用在遊戲中可能會需要的內容(例如角色移動時,角色依然置中、可以換場景等等)


參考資料


上一篇
【LV. 23】PixiJS青銅玩家:helper function - keyboard()(1)
下一篇
【LV. 25】PixiJS青銅玩家:helper function - keyboard()(3)事件
系列文
PixiJS青銅玩家30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言