iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ 系列

想到能讓畫面動起來就覺得很有趣~
天天練習 go go go!!
前方挑戰不容易讓我們一起動起來 ε= ᕕ( ᐛ )ᕗ

參賽天數 17 天 | 共 17 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day01 - 複習 canvas 做個同化別人的小方塊

今天去打疫苗,想說做個感染人的壞東西,可惜沒時間好好美化他,主要做出以下功能設定兩個角色(Friend 與 Leader)與一個舞台(Game),做角色跟舞台前...

2021-09-16 ‧ 由 lobsterpp 分享
DAY 2

Day02 - 用 canvas 做漸變色塗鴉筆

今天想做色彩漸變,角色很單純只有筆刷一位,預計做出的效果是在網頁上用滑鼠塗色,讓筆刷跟著滑鼠游標移動,並且滑鼠移動時記錄當下的筆刷位子(其實也就是當下的滑鼠的位...

2021-09-17 ‧ 由 lobsterpp 分享
DAY 3

Day03 - 複習 canvas translate 與 rotate

今天簡單複習一下 translate 與 rotate 用法,試著畫圓餅 不免俗的設置 canvas 畫布 wheelCanvas = document.get...

2021-09-18 ‧ 由 lobsterpp 分享
DAY 4

Day04 - 微調讓昨天的輪盤轉起來

今天微調讓整個輪盤轉動 wheelCanvas = document.getElementById('wheelCanvas') ctx = wheelCan...

2021-09-19 ‧ 由 lobsterpp 分享
DAY 5

Day05 - 讓輪子依隨機速度轉動並漸慢停下來

今天更新了輪子讓玩家點擊頁面時輪子會轉動,而轉速利用 Math.log(t) 達到先快後慢的漸慢效果 var Wheel = function (){...

2021-09-20 ‧ 由 lobsterpp 分享
DAY 6

Day06 - 學習 Class

先前使用 function 作為建構類別的方法 var Game = function(){} Game.prototype.myFun = function(...

2021-09-21 ‧ 由 lobsterpp 分享
DAY 7

Day07 - 小記 Array.concat 與 Array.from 儲存滑鼠位子

arrrayFirst.concat(arraySecond) 可以把兩個 array 合併起來,直接合併,不會理會兩個 array 的內容物是否有重複 var...

2021-09-22 ‧ 由 lobsterpp 分享
DAY 8

Day08 - 試用 material color tool 哦

之前就一直覺得網頁配色好難,今天試用了 material color tool,覺得之後設計網頁可以先來用用他,大家也可以去玩玩看 特色就是能自選 Primar...

2021-09-23 ‧ 由 lobsterpp 分享
DAY 9

Day09 - dat GUI

dat-gui cdndat-gui github // dat gui var controls = { distance: 0, color...

2021-09-24 ‧ 由 lobsterpp 分享
DAY 10

Day10 - 今天只先鋪底座標軸,明天來畫 BMO

var canvasBmo = document.getElementById('canvasBmo'); var ctxBmo = canvasBmo.get...

2021-09-25 ‧ 由 lobsterpp 分享