這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !
系統提示:「If you fail, don't forget to learn your lesson.」,PixiJS青銅玩家還卡關於自定義function階段,僅獲得經驗提昇等級。
昨天寫了「大方向:這個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)」可以為任一基本型別、一個物件或是函式。
把以上文字整理成一張圖:
物件宣告
再來是建立物件的方法,基本上有兩種:物件建構式、物件實字
var person = new Object();
person.name = "Hello";
person.age = 20;
person.sayHi = function(){
console.log("Hi");
}
var person = {
name: "Hello",
age: 20,
sayHi: function(){
console.log("Hi")
}
}
物件屬性的存取方法
建立物件後,如果想要存取物件的屬性,基本上有兩種方法:Dot notation、Bracket notation
var person = {
name: "Hello",
age: 20,
sayHi: function(){
console.log("Hi")
}
}
person.name; //"Hello"
person.age; //20
var person = {
name: "Hello",
age: 20,
sayHi: function(){
console.log("Hi")
}
}
person["name"]; //"Hello"
person["age"]; //20
中括號[ ]裡面如果放的是字串而不是變數,要記得加上引號。
pixiJS寫一寫變成在理解JS QQ對JS實在學淂還太過淺顯,所以一碰到大觀念就完完全全的卡住,只好回過頭把JS好好的學習,明天會寫事件處理的部份,後天則會寫bind(),剩下的三四天預計會寫一些運用在遊戲中可能會需要的內容(例如角色移動時,角色依然置中、可以換場景等等)