iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Software Development

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

用Canvas寫小遊戲

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

[Day01]用Canvas打造自己的遊樂場-出發

去年透過同事得知了IT鐵人賽的存在.看著頒獎典禮上,大家喜悅的神情,產生了參賽的念頭,我也想嚐嚐那努力堅持後的滋味. 感謝同事今年的組團邀約,讓我有機會挑戰自我...

2020-09-16 ‧ 由 大白鯊 分享
DAY 2

[Day02]用Canvas打造自己的遊樂場-HTML、Canvas、JavaScript

今天要來簡單介紹一下之後會用到的三個必要工具 HTML 我相信大家都對於HTML相當的熟悉,我也是這樣認為的,但當我問自己,要如何解釋HTML時,才驚覺自己...

2020-09-17 ‧ 由 大白鯊 分享
DAY 3

[Day03]用Canvas打造自己的遊樂場-HTML基本結構、JS引入

這30天內的遊戲編輯,為了方便,每一個遊戲個寫成一個HTML檔,JavaScript的程式碼也直接在HTML檔案中編譯,就不另外分割出來了. 今天先簡單介紹一下...

2020-09-18 ‧ 由 大白鯊 分享
DAY 4

[Day04]用Canvas打造自己的遊樂場-Canvas登場

前面介紹了HTML的主要架構,也介紹了如何引入JS.現在呢,直接在畫面上加入一個canvas的元件. 這邊單純引入canvas,那目前只有給他一個名稱play...

2020-09-19 ‧ 由 大白鯊 分享
DAY 5

[Day05]用Canvas打造自己的遊樂場-繪畫

昨天完成引入了Canvas元件,也先用繪製長方形的方式來製作背景色,今天呢就要來說一下canvas內建的繪圖,把目前我所想到之後會使用的,先做個簡單的介紹. 那...

2020-09-20 ‧ 由 大白鯊 分享
DAY 6

[Day06]用Canvas打造自己的遊樂場-BB 開工

經過前幾天的基礎介紹,今天可以開始寫遊戲啦,第一個遊戲呢,我想來寫一個經典遊戲:Brick Breaker,為什麼挑選這遊戲呢?? 是這樣的,這遊戲只需要簡單的...

2020-09-21 ‧ 由 大白鯊 分享
DAY 7

[Day07]用Canvas打造自己的遊樂場-BB 補一下我的開發環境、彈跳、分割[]

突然發現前面雖然有提到,這次的程式是在HTML檔案中寫JS,但我沒有提過自己的開發環境以及如何執行程式,這邊就簡單補充一下握個人的習慣. 我自己常用的程式語言大...

2020-09-22 ‧ 由 大白鯊 分享
DAY 8

[Day08]用Canvas打造自己的遊樂場-BB 彈跳版、元件化、重置

今天要加入遊戲中一個重要的元素,玩家控制的平板,進行左右的控制,球若碰觸到平板時,會反彈. 好的那我們先把玩家控制的平板畫出來,在這裡先但停一下,我們往後面開發...

2020-09-23 ‧ 由 大白鯊 分享
DAY 9

[Day09]用Canvas打造自己的遊樂場-BB 反彈角度、球速

昨天的內容我們完成了球與paddle的互動,在我們把磚塊畫出來之前,我今天想先來處理一下球速還有角度的問題.球速跟角度有啥問題呢?? 球速其實只是單純我覺得一直...

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

[Day10]用Canvas打造自己的遊樂場-遊戲版面、剩餘生命

今天首要任務呢是要做一下遊戲範圍的修改,在我遊戲的規劃中,未來會在畫面最上方顯示玩家剩餘性命數量,所以需要在最上方空出一個區域來. 我們用畫線的方式來做區隔就好...

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