iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Software Development

遊戲之美 - 連連看經典遊戲開發 系列

看了『程式之美-微軟技術面試心得』一書後,對裡面許多遊戲的演算法邏輯及題目都頗感興趣。

連連看是我小時候很喜歡的一款遊戲,因此在這次的鐵人賽裡我選擇了這款遊戲來做鐵人賽的題目。

要在這三十天內使用我所熟悉的PixiJS來開發一款連連看遊戲,並在此分享開發的心得及過程。

鐵人鍊成 | 共 31 篇文章 | 65 人訂閱 訂閱系列文 RSS系列文
DAY 21

[21- Pixi教學] 連線效果實作-Graphics

連連看連線及選擇題示 在進行遊戲時,清楚的玩家操作說明及互動是很重要的遊戲要素。因此,像一般的連連看遊戲,都會在玩家選擇圖示之後,把玩家所選擇的圖示做效果,提示...

2018-11-05 ‧ 由 Claire Chang 分享
DAY 22

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

GreenSock 下面是GSAP官網對這個產品的說明: Think of GSAP as the Swiss Army Knife of javascrip...

2018-11-06 ‧ 由 Claire Chang 分享
DAY 23

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

堆疊與佇列 堆疊 (Stack) 加入(push)與刪除(pop)於同一端 具有後進先出(LIFO, Last-in-First-out)或先進後出(FILO...

2018-11-07 ‧ 由 Claire Chang 分享
DAY 24

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

實作提示按鈕 新增檔案TipBtn.ts,內容如下: import { ButtonBase } from "./ButtonBase";...

2018-11-08 ‧ 由 Claire Chang 分享
DAY 25

[25- Pixi教學] 遊戲開始、結束與過關畫面

遊戲關卡概念 每個遊戲一般都會需要關卡的概念,也就是過關後可以再重新進行遊戲,並且需要有關卡結局畫面。 今天我們就是要製作這樣的一個過關或遊戲結束的畫面,如下圖...

2018-11-09 ‧ 由 Claire Chang 分享
DAY 26

[26- Pixi教學] 實作所有遊戲功能

還未完成的功能 前一篇的成果和我們的mockup相比 還有時間、生命和FB按鈕還未完成。 今天我們要將這些功能全部實作完成。 時間倒數 新增Clock.ts,...

2018-11-10 ‧ 由 Claire Chang 分享
DAY 27

[27- Pixi教學] PixiParticles

Particles System 遊戲經常透過粒子系統製作各種視覺效果,例如火焰、煙霧、下雨、沙塵、爆炸等效果,並不容易使用一般的動畫工具製作。通常粒子系統在三...

2018-11-11 ‧ 由 Claire Chang 分享
DAY 28

[28- 相關工具] PixiJS devtools

開發人員工具 Chrome 開發者工具是網頁開發者常在使用的偵錯工具,可以檢查下載的檔案、html的dom元素檢視及編輯、調整css等… 開發工具打開方式:...

2018-11-12 ‧ 由 Claire Chang 分享
DAY 29

[29- 相關工具] 效能評估工具

遊戲效能評估方式 FPS是指影格速率,是用於測量顯示張數的量度。測量單位為「每秒顯示張數」(Frame per Second,FPS)或「赫茲」,一般來說FPS...

2018-11-13 ‧ 由 Claire Chang 分享
DAY 30

[30- 相關工具] 手機遠程測試

Android系統的手機設備偵錯 在電腦上的偵錯工具首推的就是 Chrome 開發者工具,但是由於若我們想要做手機遊戲,不同的設備有可能會有不同的狀況,我們會需...

2018-11-14 ‧ 由 Claire Chang 分享