實作提示按鈕 新增檔案TipBtn.ts，內容如下： 在GameBoard.ts裡的constructor監聽TipsRequest事件 並新增所需要的方法 因為若玩家此時選擇了其他的方塊，我們需要把提示的框消除掉以避免混淆 並實作消除提示紅框的功能 實作重整按鈕 新增檔案ReloadBtn.ts，內容如下： 在GameBoard.ts裡的constructor監聽ReloadBoardRequest事件 並實作所需的方法 今日成果 線上demo：http://claire-chang.com/ironman2018/1108/ 今日成果下載：ironman20181108

堆疊與佇列 堆疊 (Stack) 加入(push)與刪除(pop)於同一端 具有後進先出(LIFO, Last-in-First-out)或先進後出(FILO, First-in-Last-out)性質的有序串列 例子：疊盤子、發牌、走迷宮 佇列 (Queue) 加入(enqueue)與刪除(dequeue)於不同端(front & rear) 先進先出(FIFO, First-in-First-out) 例子：排隊買票、坐公車 實作復原功能 復原功能比較像是走迷宮，一定是先從最後一步開始復原，因此這邊我們採用堆疊的方式。堆疊最簡單的實作方式就是使用array，並用pop以及push來塞入、取出資料。 首先先創建一個類別名為RevertBtn.ts 接著在GameScene.ts加入RevertBtn這個按鈕 然後去GameBoard.ts註冊GameFlowEvent.RevertBackRequest這個事件 並新增revertBoard的方法 然後在每次成功連線時，將成功連線的方塊的值和位置存進陣列裡 今日成果 線上展示：http://claire-chang.com/ironman2018/1107…

GreenSock 下面是GSAP官網對這個產品的說明： Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects,…

連連看連線及選擇題示 在進行遊戲時，清楚的玩家操作說明及互動是很重要的遊戲要素。因此，像一般的連連看遊戲，都會在玩家選擇圖示之後，把玩家所選擇的圖示做效果，提示玩家已經選擇了某個符號。並且在玩家選擇了第二個符號且連線成功時，會顯示所經過的路徑，並畫出一條線來消除這兩個符號，如下圖： 在這一篇裡，我們就要實做這樣的功能。 Graphics 這邊是官網使用Graphics的一個使用範例：Graphics 這是API說明：http://pixijs.download/release/docs/PIXI.Graphics.html 下面是畫線的一個簡單範例： 成果如下： 而這是畫矩型的一個簡單範例： 成果如下： 為方塊加上選取效果 在過去，我們在產生方塊是直接new一個Sprite並加入場景，而現在方塊要能夠有被選取、取消選取的功能，因此我們將方塊拉出成為一個獨立的類別GameIcon。 其內容如下： 接著我們在GameBoard.ts裡，撰寫兩個方法iconSelected及iconUnSelected如下： 然後改寫GameBoard.ts裡的createIcon方法 為消除加上連線路徑 當成功消除兩個方塊時，應該要有剛剛連線的路徑，這樣使用者才能夠確定連線的方式是正確的，現在我們要為遊戲加上這個功能。 我希望能夠在盤面的上方加上一層圖層，能夠繪製剛剛成功消除的方塊的連線路徑。之前我們在[6 – 遊戲邏輯] 連線消除程式撰寫的地方，所撰寫的Path類別若呼叫canLinkInLine()結果反回為true的話，同時亦會把所經的路徑的點塞入path_Detail這個陣列裡面。 所以這個類別的主要職責，應該是要能夠把輸入的path裡的路徑畫出來。為了要使這個圖層能更方便的在各個地方被取用，我使用了singleton方法來建立這個物件，這樣所有的類別都可以利用LinkedLine.instance來取得這個元件惟一的實體。 下面為LinkedLine.ts的資料 接著在GameBoard.ts裡連線成功時加上這行來繪製連線 並在GameScene.ts裡加上LinkedLine元件…

動畫物件 在一般的2D遊戲中，動畫可以用2D骨骼動畫製作（如：Spine）、粒子系統（如：Particles）、或者使用Tween(如：gsap）以及逐格動畫來製作。 下面為這四種動畫的介紹： 骨骼動畫：針對角色動畫的骨架做設定，並且經由改變骨骼元件方向及變形來讓角色做出如行走、跳躍等動態動作。使用骨骼動畫可以大大降低角色所占的圖像空間，尤其是在2D的遊戲裡，這是不可或缺的技術。 粒子系統：有許多編輯器可以編輯出粒子效果的設定檔，並藉由粒子系統的程式來做出特效。 Tween：針對一個物件的某個屬性去設定一段時間將該屬性從a數值變成b數值。可以用在物件位移（更動x、y屬性）、放大縮小（更動scale）、旋轉（更動rotate）等效果上。也可以更改自定義屬性，如跑分效果（將分數慢慢加上去）。 下面是官網上的一個效果範例： 逐格動畫：逐格動畫是最簡單原始的動畫類型，由許多張的動態圖組合成為一幅動畫。逐格動畫的動畫製作能夠最精緻、最多樣化，但是也需要花最多力氣在繪製圖像，並且會有很大的檔案大小。其原理與一般電影、gif檔相同。 逐格動畫 PIXI.extras.AnimatedSprite是在Pixi.JS裡處理動畫的類別，官網對此類別的說明如下： An AnimatedSprite is a simple way to display an animation depicted by a list of…

PIXI顯示元件介紹 PixiJS裡較常使用的顯示元件有：PIXI.Container、Sprite、AnimatedSprite PIXI.Container在官網上的解釋如下： A Container represents a collection of display objects. It is the base class of all display objects that act as a container…

開啟按鈕效果 官網點擊效果範例：https://pixijs.io/examples/#/basics/click.js 預設sprite是無法被點擊到的，因為要偵測這些事件會讓sprite更耗資源，因此如果我們想要讓一個sprite可以被點擊，則要特別對元件設定： 在連連看專案加入按鈕 ButtonBase 因為連連看裡面有許多個按鈕，每個按鈕雖然功能不同，但是會有許多相似的設定，因此將按鈕抽出一個ButtonBase的父類別 ButtonBase.ts的內容如下： SoundBtn 新增一個檔案SoundBtn.ts，製作聲音開/關按鈕，內容如下： GameScene 因為除了聲音按鈕外，要設定整個場景還需要加入非常多東西，因此我新增了一個類別叫GameScene，主要在將所有場景上的物件加進場景裡 GameScene.ts其內容如下  實作靜音功能 在SoundMgr.ts加上靜音功能 今日成果 線上demo：http://claire-chang.com/ironman2018/1102/ 檔案下載：ironman20181102

 PixiJS Sound PixiJS本身有開發可供使用的PIXI.sound。 並且官網上有很詳細的使用範例以及API手冊：PixiJS Sound PixiJS Sound最大的優點是它可以與pixi的素材共用同一個Loader，下載mp3的資源檔案。並支援相當多種的音樂格式，也可以將多個音效壓縮在一個mp3內，再根據要開始與結束的秒數去切成多個聲音資源。在一般的狀況下，PixiJS Sound應為搭配PixiJS首選可使用的音樂函式庫 PixiJS Sound於TypeScript 不過很可惜的，PixiJS Sound現在在typescript上的支援度尚不是那麼的好。PixiJS Sound並沒有推出針對type script專案的函式庫，在開發上會帶給使用typescript的人帶來一些困擾。因此我選擇了另一款很受歡迎的聲音函式庫howler 下面是howler.js一些簡單的使用範例  在連連看專案內使用Howler 在ResourcesList.ts裡新增要下載的mp3檔案 新增SoundMgr.ts內容如下： 在Main.ts加入 並呼叫load()來下載音檔 需要注意的是，因為howler的loader與pixi本身的是兩個不同的loader，所以像這樣的寫法，很有可能剛進遊戲音效會還沒有載入完成，等到載完後才會播放聲音。如果希望一定要剛進遊戲就有聲音，那就需要把拿掉loading page的判斷另外加上音效是否載入完成的判斷。 今日成果…

 加入loading page 上一篇的成果在載入檔案時畫面就會停在那邊，一般的遊戲通常會有一個下載中的畫面，告知使用者現在下載了幾％，還差幾％還未下載完成。 因此今日我們就要來製作這個loading page 首先，在index.html裡加上一個div 並在style.css裡設定 這樣我們就會有一個很簡單的loading畫面如下圖 更新loading進度 直接用jquery去操控剛剛所設定的div裡面的文字顯示，來更新現在的下載進度： 整個Loader.ts修改後的程式碼如下： EventEmitter介紹 PIXI.utils.EventEmitter使用EventEmitter3，在pixiJSv4之後已直接被整理到pixi裡了。 這個套件可以讓我們在js裡很方便的使用事件，在動畫處理上，事件的監聽與發送可以讓我們在處理動畫上更加輕鬆，也可以降低這些元件間的相依性。 下面是EventEmitter3上的一個簡單使用範例 如果我們希望整個遊戲共用一個EventEmitter，可以將產生的EventEmitter做export： 要使用這個物件可以直接import進來 發送下載完成事件 在Loader.ts加入下面的程式碼： 接著在Main.ts裡設定下載完後要做的事情： 上面需要注意，因為我們在Loader.loader.load()裡將下載後的resource存在一個變數裡，所以我們可以直接使用 Loader.resources[“background”].texture 來取得某一個resource id下的texture。…

用PIXI.Sprite來載入圖檔 在PIXI.Sprite裡有一個fromImage(‘URL’)的方法可以直接讓我們將某個圖檔載入Sprite裡面，如： 但這只能針對單張圖檔，而不能處理SpriteSheet的狀況。 並且當我們在做一個遊戲專案時，通常會需要先載完所有的遊戲素材，這樣才不會在進遊戲時看到未載完圖檔的空白而產生錯誤或破圖。 因此較多的時候，我們都會使用PIXI.loaders去下載並監聽下載進度，製作一個loading bar。 並在素材載入完成後才進入遊戲。  PIXI.loaders 下面為一個PIXI.loaders的簡單使用範例 PIXI.loaders是從resource-loader擴展的。 下面為resource-loader的GitHub上的一個簡單使用範例： 從範例可以看出，我們可以用onProgress、onError、onLoad、onComplete 來取得現在的下載進度，並且根據所傳入的參數來更新loading page要顯示的資訊。  開始載入連連看圖檔 新增一個檔案名為ResourcesList.ts，用來設定要載入的圖片並設定一個識別id給它。 其內容如下： 接著新增Loader.ts檔案，用來載入並監控下載進度。 並在Main.ts裡加上  觀察事件觸發時機 從console視窗可以看到我們在Loader內所下的log被觸發的時機 從上圖可知：…