iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

菜雞用 Phaser 拾起童年遊戲 系列

每個孩子心中都一定有憧憬過自己完成一個遊戲,自己創造一個遊戲,但是始終沒有那個動力,於是我來完成以前的我常常妄想的成為遊戲擁有者的夢想,利用 Phaser 來撰寫一些童年曾經默默在桌子底下,拿著舊式的按鍵式手機所玩起的成就感遊戲,讓我們一起回到童年那段躲避老師與教官的遊戲世界吧!透過這個 30 天來完成一些小遊戲!

鐵人鍊成 | 共 30 篇文章 | 17 人訂閱 訂閱系列文 RSS系列文 團隊甘阿餒
DAY 1

菜雞用 Phaser 拾起童年遊戲 01

前言 來説說為什麼想做這個吧!一開始還在煩惱主題要寫些什麼,突然一個念頭閃過,不然來試試網頁遊戲吧!於是找了一個沒用過的2D遊戲框架 Phaser 開啟了我的遊...

2020-09-14 ‧ 由 Dino 分享
DAY 2

菜雞用 Phaser 拾起童年遊戲 02

Phaser 是一個免費的2D遊戲框架,用於製作HTML5遊戲,是由 Photon Storm 所開發的。 Phaser 是什麼? Phaser是一個HTML...

2020-09-15 ‧ 由 Dino 分享
DAY 3

菜雞用 Phaser 拾起童年遊戲 03

基本介紹 我們可以利用 Phaser 的 Game 物件來創造場景,並且給他config參數來設定它。 const config = { type: P...

2020-09-16 ‧ 由 Dino 分享
DAY 4

菜雞用 Phaser 拾起童年遊戲 04

讓我們利用官方的範例開起我們的旅程吧~GO!GO!GO! 可以先到點擊下載,把官方的素材先載下來~如果懶得一天一天跟著做的人可以用它裡面的 code 唷~! 讓...

2020-09-17 ‧ 由 Dino 分享
DAY 5

菜雞用 Phaser 拾起童年遊戲 05

昨天我們完成了我們的地圖,今天來加上我們的主角吧! create 加入主角 我們的主角一樣要有物理碰撞的效果,所以一樣要透過 physics 來加入我們的主角...

2020-09-18 ‧ 由 Dino 分享
DAY 6

菜雞用 Phaser 拾起童年遊戲 06

昨天我們完成了我們的主角~今天來幫遊戲增加得分機制跟障礙吧:) 得分星星 在場景內增加星星來讓主角獲取分數,有一整排星星送給他 XD // 創建星星物件的 gr...

2020-09-19 ‧ 由 Dino 分享
DAY 7

菜雞用 Phaser 拾起童年遊戲 07

來!來!來!進入我們此系列文的主軸了,讓我們走入童年回憶的遊戲裡吧! 第一個遊戲我想先來的心心念念的小朋友下樓梯,讓我們開始吧! Photo by Brade...

2020-09-20 ‧ 由 Dino 分享
DAY 8

菜雞用 Phaser 拾起童年遊戲 08

昨天我們已經把我們的素材都載進來也佈置在場景內了! 那今天就讓我們來讓他們動起來吧!Let's go! Photo by Fab Lentz on Unspl...

2020-09-21 ‧ 由 Dino 分享
DAY 9

菜雞用 Phaser 拾起童年遊戲 09

做到這裡會發現一件很可怕的事,因為我們的地板不是向官方範例的地形一樣用 staticGroup 產生的,所以他會被我們的主角推動,整個世界大亂啊QQ Phot...

2020-09-22 ‧ 由 Dino 分享
DAY 10

菜雞用 Phaser 拾起童年遊戲 10

昨天我們完成了基本的遊戲流程,今天我們來加上遊戲的機制吧! 遊戲機制 主角生命值為 10 碰到上方的尖刺要扣 4 生命值 踩到一個樓梯補 1 生命值 掉到最下...

2020-09-23 ‧ 由 Dino 分享