iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

Day1. 請Matter.js同學自我介紹一下

嗨,雖然說第一篇的目的是簡單了解一下Matter.js,但在那之前我要偷渡一下自我介紹XD 這是筆者第一次參加鐵人賽,第一篇我們先稍微聊聊筆者跟這次的題目。 筆...

DAY 2

Day2. Hello Matter.js World!

今天我們要來看到第一個畫面了! 30天內所有寫的扣筆者都會放在這個Git專案(https://github.com/AhChao/MatterJSPractic...

DAY 3

Day3. 從Example Code瞧瞧Matter.js的盤古開天

說好今天要來談談昨天的那段扣裡,究竟寫了些什麼。 為什麼可以像傑克一樣神奇,產生出這樣的畫面呢? 我們今天會一段一段,用概略的方式帶大家看過這段扣,最後會分析一...

DAY 4

Day4. 其實一切東西都在那,只是少了渲染 - Render

昨天談到了我們的彈珠台,開了那麼多需求,大家有猜到今天要從哪個需求開始看起嗎? 沒錯!哪個需求都不是,我們先來看看這個世界樣貌的顯現根本,也就是最基本的 Ren...

DAY 5

Day5. 在沒有運轉前,世界就是靜止的 - Runner

昨天談了Render,那今天要開始針對我們的需求實作了嗎? 我只能說,沒錯我們快要來談需求實作了,但是不是今天,今天我們要來談談Runner。 Runner是提...

DAY 6

Day6. 依點成形,創造物件 - RigidBody(上)

經歷了前兩天的基礎介紹,今天我們終於要到創建物件的環節了,而這個標題我想已經說明了一切,沒錯,這篇是上! 有上就有下! 創建物件及物件互動的篇幅較長,有很多東西...

DAY 7

Day7. 依點成形,創造物件 - RigidBody(中)

暨昨天介紹了物體的基本建立,我們今天來到中篇,沒錯,中篇後面還會有一個下篇,因為筆者寫著寫著發現篇幅會過長,決定再拆成兩篇,長度會比較剛好,今天會專注在 Bod...

DAY 8

Day8. 依點成形,創造物件 - RigidBody(下)

今天是陪了我們兩天的剛體的最後一集,是不是開始有點想念它了呢? 那沒關係,好好珍惜我們今天跟剛體相處的環節,如果懷念它,可以再回去複習前面的環節。 今天的Dem...

DAY 9

Day9. 一起動手做彈珠台!(1)

今天!!是令人興奮的實作!!不再是單純呼叫API文件的範例碼,而是具備意義/情境的程式。之後只要出現這個標題,表示我們要用學到的知識分階段來完成我們的彈珠台。...

DAY 10

Day10. 人與人之間偶有摩擦,物體與物體之間叫做碰撞 - Collision(上)

我們先前已經有了碰撞,但是之前我們其實都是使用預設的物理現象與engine模組來製造碰撞,其實並沒有太深入去了解 Matter.js 是怎麼處理與看待碰撞這件事...