iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Software Development

用Canvas打造自己的遊樂場 系列

用Canvas寫小遊戲

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文 團隊薪水被偷
DAY 21

[Day21]用Canvas打造自己的遊樂場-Galaxian 收尾

今天就快速的來幫這遊戲收尾吧,昨天完成的進度到敵人會發射子彈.那今天要做的事情有兩個,一個是判定玩家被擊中.另一個則是若生命沒了重置遊戲,還有敵人被全滅要重置遊...

2020-10-06 ‧ 由 大白鯊 分享
DAY 22

[Day22]用Canvas打造自己的遊樂場-分裂球 開工

第二個遊戲花的時間比我預期的長,剩下幾天的時間我想來完成一個走迷宮的遊戲.不過在正式開始前,我想先花一點時間來做一個算不上遊戲,但我蠻歡的小程式.記憶中,以前的...

2020-10-07 ‧ 由 大白鯊 分享
DAY 23

[Day23]用Canvas打造自己的遊樂場-分裂球 球

今天要做的部分是球的部分,從第一個遊戲就有畫球了,為何要需要特別拿出來說呢?因為這次球有比較多需要注意跟處理的地方,例如城市起始的時候場上會只有一顆球,隨機給予...

2020-10-08 ‧ 由 大白鯊 分享
DAY 24

[Day24]用Canvas打造自己的遊樂場-分裂球 分裂

今天來寫一下球的分裂,就完成了這一個小程式.先來建立一個處理分裂的函式 // 球分裂 split = (old_x, old_y) => { if...

2020-10-09 ‧ 由 大白鯊 分享
DAY 25

[Day25]用Canvas打造自己的遊樂場-labyrinth 開工

最後一個遊戲是走迷宮的小遊戲,今天呢會先畫出整張迷宮地圖;如果一眼能看到整張地圖的話難度其實不高,所以明天會縮小顯示的畫面,只能看到部分的路,一個地圖迷霧的效果...

2020-10-10 ‧ 由 大白鯊 分享
DAY 26

[Day26]用Canvas打造自己的遊樂場-labyrinth 迷霧效果

昨天是把整張地圖繪製出來,不過這樣一下子就能看清長張地圖的路線,缺乏了挑戰性,這邊要將地圖可視範圍縮小,縮小成一次只能看到5*5塊磚的大小.那要修改一下畫面的繪...

2020-10-11 ‧ 由 大白鯊 分享
DAY 27

[Day27]用Canvas打造自己的遊樂場-labyrinth 鍵盤控制角色

今天要來加入玩家角色,以及用鍵盤來控制角色 // 玩家 var player_x; var player_y; resetPlayer = () =>...

2020-10-12 ‧ 由 大白鯊 分享
DAY 28

[Day28]用Canvas打造自己的遊樂場-labyrinth 收尾

今天要來把迷宮遊戲做個收尾,其實也就檢查一下有沒有哪裡有問題,那因為後來覺得55塊磚的範圍還有有點大,所以改成33.另外就是在checkMapBrick有寫錯,...

2020-10-13 ‧ 由 大白鯊 分享
DAY 29

[Day29]用Canvas打造自己的遊樂場-補充 localstorage

今天要補充一個前端的小儲存空間,window.localstorage.這是什麼呢?localstorage是html5所提供的一個儲存空間,會根據瀏覽器的不同...

2020-10-14 ‧ 由 大白鯊 分享
DAY 30

[Day30]用Canvas打造自己的遊樂場-挑戰心得

30天的挑戰就這樣結束了,現在的心情怎麼有些空虛呢??哈哈哈,為什麼會這樣呢??我想跟題目有關吧,起出挑選這題目的原因,是把這第一次參加的鐵人賽,定位在挑戰自己...

2020-10-15 ‧ 由 大白鯊 分享