[24- Pixi教學] 提示、重整按鈕功能實作

實作提示按鈕

新增檔案TipBtn.ts,內容如下:

在GameBoard.ts裡的constructor監聽TipsRequest事件

並新增所需要的方法

因為若玩家此時選擇了其他的方塊,我們需要把提示的框消除掉以避免混淆

並實作消除提示紅框的功能

實作重整按鈕

新增檔案ReloadBtn.ts,內容如下:

在GameBoard.ts裡的constructor監聽ReloadBoardRequest事件

並實作所需的方法

今日成果

線上demo:http://claire-chang.com/ironman2018/1108/
今日成果下載:ironman20181108

[23- Pixi教學] 復原按鈕功能實作

堆疊與佇列

堆疊 (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
今日成果下載: ironman20181107

[22- Pixi教學] 按鈕動態- Tween

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, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms.

因為GSAP可以使用GPU加速,因此在執行速度效能上會勝過jQuery,也因為它是很單純的去漸變改變某個屬性,所以我們可以很容易的使用在任何我們可操控的屬性上去製作動畫效果,是一個十分強大好用的工具。

要嘗試動畫效果的樣式和程式寫法,官網有提供GSDevTools可供我們使用,可以更容易的編輯我們要的動畫樣式

TweenLite

TweenLiteTweenMax是當我們只有一個Tween時可使用的,例如:把一個物件從左邊移到右邊。

而這兩個類別的差異在於TweenMax提供更多的參數和方法可供我們使用

TimelineLite

TimelineLiteTimelineMax則是當我們要做一系列的Tween時可使用的,例如:某按鈕按下去要先放大再縮小再彈回來。

而TimelineLite與TimelineMax的差異也是TimelineMax提供更多方法和參數可以使用。

為按鈕加Tween效果

首先我們要在專案裡加入使用gsap

以及@types/gsap

設定在build的時後要複製TweenLite.min.js及TimelineMax.min.js到libs裡(gulpfile.js)

並在index.js裡加上

接著修改ButtonBase.ts的內容如下:

今日成果

線上成果展示:http://claire-chang.com/ironman2018/1106/
今日成果下載:ironman20181106