兒時回憶,利用vanilla.js & canvas打造打磚塊遊戲吧!(30 Days challenge-21)

前言

呼~vanilla.js的專案只剩沒幾個了! 總覺得有些可惜,雖然不用框架要寫很多功能都會挺費工的,但有時候還是學到不少基礎的運作原理。我上一次玩canvas是在很久以前JS30的專案,那時候僅是用筆畫一隻可愛的皮卡丘就讓我挺高興了。

今天則要利用canvas做相較起來複雜許多的打磚塊遊戲,做完之後我的感想是…打死我也不再幹這種事了,2D的繪圖與判斷實在是很燒腦,花的時間比預期多了很多,但還是挺有趣的!

使用技術

專案介紹

這是一個最基本的打磚塊遊戲,藉由判斷球與磚塊或是操作桿的位置來判斷是否反彈等邏輯。
磚塊的部份採用二維陣列儲存,並藉由在每個磚塊加入visible屬性作為顯示的判斷,若為false在填滿磚塊時令style=transparent達到消失的效果。
大致的原理就是不斷的重新繪製畫布,每一次的重繪過程都檢查球與操控桿的位置來做條件判斷,聽起來很簡單..但寫起來真的挺複雜的~!

專案預覽

專案連結

github
demo

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s