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

前言

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

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

使用技術

• Canvas API
• requestAnimationFrame API
• vanilla.js

專案介紹

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

專案預覽

專案連結

github
demo