iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

Phaser 幫我撐個 30 天 系列

鐵人鍊成 | 共 30 篇文章 | 15 人訂閱 訂閱系列文 團隊浪流連九程式匠自然產生的佛系碼農專區
DAY 1

Day 1:前言

》前言 大家好,這是我第一次參加鐵人賽。 一開始不知道要挑什麼題目,那就挑沒有學過的 Phaser 吧(疑?)其實有一次在逛網頁的時候,看到非常吸引我的網頁 h...

2018-10-16 ‧ 由 K. 分享
DAY 2

Day 2:基本環境設定

》一開始基本的事前準備為下列三項,可依照個人喜好決定 瀏覽器:Google Chrome 開發工具:VS Code Web Server:VS Code 上的...

2018-10-17 ‧ 由 K. 分享
DAY 3

Day 3:生命週期

》生命週期 除了前一天新增的基本設定外,這次我們要來看看 life cycle 有哪些可以使用,且用在什麼時機 init:初始化 preload:加載素材(圖片...

2018-10-18 ‧ 由 K. 分享
DAY 4

Day 4:基本變形

》深度、變形 深度:當載入很多素材,有時候需要調整它的前後位置,就像 css 的 z-index 一樣 變形:可以想像成 css 3 的 scale、rotat...

2018-10-19 ‧ 由 K. 分享
DAY 5

Day 5:更新畫面

》旋轉、更新 旋轉:將物件以角度或弧度,進行旋轉。如 css 3 的 rotate(n deg) 更新:update 生命週期 》Javascript 內容 旋...

2018-10-20 ‧ 由 K. 分享
DAY 6

Day 6:使用者互動

》互動、偵測重疊 對於一個遊戲,畫面上可能會有點擊鍵盤、滑鼠、觸控來與畫面上的角色做互動。 》Javascript 內容 在生命週期 init 上,定義變數,這...

2018-10-21 ‧ 由 K. 分享
DAY 7

Day 7:重新與暫停

》重新與暫停 除了 player,今天先創建其它物件到場景上,我們這邊新增兩台坦克,並讓它們動起來。 如果 player 與 house 重疊的話,代表到家了,...

2018-10-22 ‧ 由 K. 分享
DAY 8

Day 8:群組

》群組 今天的內容比較簡單,我們要來使用群組的功能,來創建重複的房子 》Javascript 內容 可以用群組創建重複的物件,節省一些事情。 scene.cre...

2018-10-23 ‧ 由 K. 分享
DAY 9

Day 9:Resize

》Resize 目前我們的遊戲寬高設為 640 x 320,但我們希望可以在任何視窗、裝置大小可以填滿整個畫面,讓遊戲體驗能夠更好,更加完善。 原本的狀況,如圖...

2018-10-24 ‧ 由 K. 分享
DAY 10

Day 10:Camera

》Camera Phaser 有提供一些 camera 上的特效,如 fade shake flash,今日我們會提到如何使用這些特效、偵聽動畫結束後以及防止多...

2018-10-25 ‧ 由 K. 分享