iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

在JS的世界碰碰撞撞乒乒乓乓!30天一起玩Matter.js! 系列

筆者也是初次接觸Matter.js,最近想找前端碰撞顯示的Library來玩,適逢鐵人賽期間,機會難得決定和大家一起來讀讀這個酷炫的Library,除了API文件的閱讀分享,也會提供一些範例實力,期待最後能產出很多酷玩意兒!

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 21

Day21. 伸縮自如的,向量圖像砲 - SVG

昨天聊到小五郎叔叔脖子上的傷痕,今天要來聊日本的國民漫畫航海王,大家有看過航海王的話想必對我們的主角魯夫不陌生,魯夫的絕招就是橡膠果實帶給他的能力,伸縮自如的─...

DAY 22

Day22. 當蘋果掉到牛頓頭上,牛頓被敲醒了 - Gravity

一開始到現在,雖然我們沒有特別提到,物體就那麼自然的向下掉,就像蘋果掉到牛頓頭上的自然,這背後的理所當然,就是重力在作用。今天我們要來介紹 engine 上的...

DAY 23

Day23. 發動魔法卡,融合 - Composite (上)

又來到預計會拆成上中下篇幅的大單元了!大家有看過遊戲王嗎?你們知道青眼白龍跟別人借錢會變成什麼嗎?答案是,青眼究極(借錢,台語)龍!如果你相信了,那你可能沒有認...

DAY 24

Day24. 發動魔法卡,融合 - Composite (中)

昨天了解了 Composite 是什麼後,一如我們本來的安排,今天要來介紹的是 Composites 這個快速創建 Composite 的模組,裡面提供的方法全...

DAY 25

Day25. 發動魔法卡,融合 - Composite (下)

今天是 Composite 單元的最後一篇,既前兩篇看了基本屬性、建構方法後,最後一篇要來看 Composite 模組到底有哪些方法,讓我們能夠用來操控或獲取...

DAY 26

Day26. 星多天空亮,人多智慧廣 - Plugins

來到了第 26 天,其實我們快把所有的模組都走過一遍了,今天是最後一天單獨介紹某個特色的,接下來 3 天筆者會安排一個實作來為我們這次的 30 天內學到的內容做...

DAY 27

Day27. 雖然今年是2021,但我們要做2048(1)

賣了那麼多天關子的最後實作,今天就要揭曉我們的題目了:不知道大家有沒有玩過前些年很火紅的一款小遊戲呢?如果沒有,那請讀者先到這個網址來線上玩一下。 這是一款叫做...

DAY 28

Day28. 雖然今年是2021,但我們要做2048(2)

昨天我們打好底了,有基本的容器,還有一些泛用的函式可以呼叫。今天來到實作第二天,讓我們來看看今天的需求: 基本容器宣告與畫面初始 依據滑動改變重力...

DAY 29

Day29. 雖然今年是2021,但我們要做2048(3)

來到2048的最後一天!看看這麼多的刪除線!雖然可能我們不一定能清光我們購物網站上的願望清單,但是今天,讓我們一起清空這裡列的代辦清單。 基本容器宣告與畫面...

DAY 30

Day30. 是結束,也能是開始 - Review

今天是鐵人賽的最後一天,我們的內容已經在昨天全數告一段落。 我們今天來分結構回顧一下我們的 30天,也是做一個 Index 幫助大家了解 Matter.js 的...