2024 iThome 鐵人賽

DAY 11

切版動態樣式處理

遊戲相關動畫盤點遊戲進入頁背景動畫 (CSS 動畫) 遊戲教學提示動畫 (CSS 動畫) 時間軸拉伸 (CSS 動畫 + JS 操作) 卡片排序 (CSS...

0 Like 0 留言 377 瀏覽

DAY 12

功能製作遊戲說明與燈箱

在寫可維護的程式章節中，第五點原則提到了「讓程式碼可複用和可泛化」。今天，我們將著手開發功能，即將原有的 HTML 切版與 JavaScript 邏輯結合。...

0 Like 0 留言 348 瀏覽

DAY 13

功能製作 (drag and drop mobile 上)

在實現拖放功能時，我考慮了兩種主要方法：一是使用原生的 HTML5 拖放 API，另一是利用 touchstart 觸碰事件。綜合考慮後，我選擇了使用觸碰事件，...

0 Like 0 留言 474 瀏覽

DAY 14

功能製作 (drag and drop mobile 下)

代碼審查與反思 DOM 操作與資料驅動的反思功能模組化與流程觸控事件的優化卡片排列與動畫優化 DOM 操作與資料驅動的反思在當前的實現中，我們主要透...

1 Like 0 留言 207 瀏覽

DAY 15

功能製作複雜的時間軸拉伸處理

HTML、CSS 與 JavaScript 解析 HTML 模板時間軸容器（timelineContainerEl）時間軸（timelineEl）提示（hin...

0 Like 0 留言 358 瀏覽

DAY 16

功能製作卡片提示與卡片區塊移動處理

卡片提示與卡片區塊移動處理代碼解析我使用一個叫 handleAnswerProcess 的函示，去包含會在作答的時候去處理作答相關的工作，但主要三大功能為...

0 Like 0 留言 186 瀏覽

DAY 17

功能製作計分分數回饋

HTML、CSS 與 JavaScript 解析 HTML 模板 JavaScript 邏輯遊戲狀態紀錄資料 handleScore 程式碼解釋 St...

1 Like 0 留言 358 瀏覽

DAY 18

功能製作遊戲狀態與進度(優化)

為了賦予未來程式碼更高的靈活性和可用性，我們試著釐清和優化某些關鍵環節。今日，將專注於以下三個核心議題進行深入的分析和調整：在設計過程中，步驟計數應該是從...

0 Like 0 留言 210 瀏覽

DAY 19

過場動畫製作設計

今日我們將踏入這個專案最具挑戰性的階段。然而，在開始之前，大概可以想像就是一個卡片作答之後的重新排序。我們拆解工作流程大約是以下。首先，我們會進行初步的作答。接...

0 Like 1 留言 168 瀏覽

DAY 20

過場動畫實踐

問題與挑戰放下去的時候，因為卡片數增加，需重新微調每張卡片的位置（如果一開始一個蘿蔔一個坑可能會比較好處理，但是無法做到卡片交疊的效果，可能就沒那麼好看，紐...

0 Like 0 留言 279 瀏覽

第十五屆佳作

系列文章