iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

1 Like 0 留言 877 瀏覽

鐵人賽 Modern Web DAY 27

防禦性 CSS - 建立「防患未然」的匠人心態系列第 27 篇

技術【Day27】CSS 語法 - 分組選擇器

情境 CSS 選擇器的分組，能夠幫助我們用更簡潔又更容易維護的寫法來達到同樣的效果。舉個例子來說，假設我們要讓兩個元素都改變顏色，不用分組選擇器的寫法會是這樣...

Taiming ‧ 2022-10-11 ‧團隊光明頂

1 Like 1 留言 1442 瀏覽

鐵人賽 Modern Web DAY 26

防禦性 CSS - 建立「防患未然」的匠人心態系列第 26 篇

技術【Day26】元件高度 - 響應式高度設計

情境響應式設計(Responsive Web Design)可使網站在不同的裝置上瀏覽時對應不同解析度皆有適合的呈現，減少使用者進行縮放、平移和捲動等操作行為...

Taiming ‧ 2022-10-10 ‧團隊光明頂

0 Like 0 留言 663 瀏覽

鐵人賽影片教學 DAY 25

視窗程式設計系列第 25 篇

技術【Day25】Class & Object簡介

嗨，大家好，今天是視窗程式設計第二十五天的影片教學，今天要來進入新的概念：Class 和 Object。試想一下，如果今天想儲存一個人的各種資訊，最直覺的想法...

Ericostco ‧ 2022-10-10

1 Like 0 留言 565 瀏覽

鐵人賽自我挑戰組 DAY 25

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 25 篇

技術 Arcade再進化-迷宮產生器(4)

進階的迷宮遊戲上次我們做出了二元樹迷宮的遊戲。但...你發現了？我們只需要往下、往右走就能到達終點！這實在有點蠢。讓我們改進這個問題吧！本篇內容以上篇...

小威老師 ‧ 2022-10-10

0 Like 0 留言 580 瀏覽

鐵人賽自我挑戰組 DAY 24

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 24 篇

技術 Arcade再進化-射擊遊戲(4)

第四章：戰機升級(速度改變，造型改變)，增加保命裝備成果展示: 戰機原本型態戰機改變型態護盾增加第一部分：戰機升級(速度改變)...

小威老師 ‧ 2022-10-09

1 Like 0 留言 863 瀏覽

鐵人賽 Modern Web DAY 25

防禦性 CSS - 建立「防患未然」的匠人心態系列第 25 篇

技術【Day25】元件高度 - 步驟對話框的高度

情境步驟對話框/步驟條元件，是透過一系列的編號步驟來顯示當前操作的進度。由於某些操作過於複雜繁瑣，或者有順序性，以至於不太適合一次把全部的資訊展示在一個頁面當...

Taiming ‧ 2022-10-09 ‧團隊光明頂

0 Like 0 留言 682 瀏覽

鐵人賽自我挑戰組 DAY 23

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 23 篇

技術 Arcade也能學演算法Ouo!? 演算法遊戲!(4)

第四篇：棋類遊戲-黑白棋演算法篇大綱遊戲內容關於黑白棋的規則確認可以連線連線後? 結束了? 範例程式遊戲內容 (此畫面是由空白網頁執行jav...

小威老師 ‧ 2022-10-08

0 Like 0 留言 712 瀏覽

鐵人賽影片教學 DAY 23

視窗程式設計系列第 23 篇

技術【Day23】視窗程式設計-推箱子的判斷流程

嗨，大家好，今天是視窗程式設計第二十三天的影片教學，昨天的影片教學當中，我們已經了解如何透過二維矩陣(Array)來建立地圖，今天要來實作推箱子的功能。地圖的...

Ericostco ‧ 2022-10-08

1 Like 0 留言 1048 瀏覽

鐵人賽 Modern Web DAY 24

防禦性 CSS - 建立「防患未然」的匠人心態系列第 24 篇

技術【Day24】Flexbox - 使用 justify-content: space-between 佈局

情境 Flexbox 是 CSS3 的盒子模型(box model)，他是我們現代響應式佈局設計上的一個重要利器。其中一個很重要的部分就是他可以幫助我們快速的做...

Taiming ‧ 2022-10-08 ‧團隊光明頂

0 Like 0 留言 570 瀏覽

鐵人賽自我挑戰組 DAY 22

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 22 篇

技術 Arcade再進化-空島跳躍者(4)

空島跳躍者上篇內容我們已經讓角色及背景都有貼圖，角色會摔死本篇內容由於本專案已接近完成，更新內容將放慢速度。本篇我們將製作競速的計時利用分數高低來...

小威老師 ‧ 2022-10-07

2 Like 0 留言 1302 瀏覽

鐵人賽 Modern Web DAY 23

防禦性 CSS - 建立「防患未然」的匠人心態系列第 23 篇

技術【Day23】Grid - 使用 Sticky

情境在網頁內容很豐富的情境中，頁面上放置導覽列是很重要的功能，如下圖：假設這是一個新聞或論壇網站，左邊 aside 部分就是我們的導覽列，上面有網站的 B...

Taiming ‧ 2022-10-07 ‧團隊光明頂

1 Like 0 留言 3495 瀏覽

鐵人賽 Modern Web DAY 22

防禦性 CSS - 建立「防患未然」的匠人心態系列第 22 篇

技術【Day22】Grid - 自動填滿效果

情境 CSS Grid 是一個格線佈局屬性，跟 Flexbox 的使用非常相似，是由外容器和內元件來組成整個結構。以下面結構為例： <div class...

Taiming ‧ 2022-10-06 ‧團隊光明頂

0 Like 0 留言 464 瀏覽

鐵人賽自我挑戰組 DAY 21

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 21 篇

技術 Arcade再進化-虛擬鍵盤的妙用(4)

你想將你遊戲最棒的成就記錄下來嗎? 本篇將帶領大家透過虛擬鍵盤套用在遊戲中，讓遊戲得分最高者可以顯示在遊戲的成就上，並顯示其分數。本篇將用Chase Th...

小威老師 ‧ 2022-10-06

0 Like 0 留言 561 瀏覽

鐵人賽自我挑戰組 DAY 20

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 20 篇

技術 Arcade再進化-迷宮產生器(3)

二元樹迷宮遊戲前面已經介紹過二元樹迷宮的生成原理以及在arcade網站中做出了簡易版的迷宮遊戲現在就讓我們把這兩個結合在一起吧本篇內容製作出上次迷宮遊...

小威老師 ‧ 2022-10-05

1 Like 1 留言 1657 瀏覽

鐵人賽 Modern Web DAY 21

防禦性 CSS - 建立「防患未然」的匠人心態系列第 21 篇

技術【Day21】Grid - 最小內容大小

情境談到響應式的佈局排版，除了 Flexbox 之外，還有一個不容忽視的重要屬性，就是 Grid。以下圖為例，我們透過 Grid 也能夠很輕易的將主要內容以...

Taiming ‧ 2022-10-05 ‧團隊光明頂

1 Like 0 留言 468 瀏覽

鐵人賽自我挑戰組 DAY 19

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 19 篇

技術 Arcade再進化-橫向捲軸遊戲(3)

在之前我們完成了地圖基本設定以及會尾隨在我們身後的小鬼?但是!!!遊戲中怎麼可以少了得分呢?!沒錯！我們今天就要來完成得分機制啦~努力得到全部的分數吧!( •̀...

小威老師 ‧ 2022-10-04

4 Like 0 留言 792 瀏覽

鐵人賽 Modern Web DAY 20

防禦性 CSS - 建立「防患未然」的匠人心態系列第 20 篇

技術【Day20】Flexbox - 最小內容大小

情境 Flexbox 的排版已經太方便，以至於網頁上到處都可以發現 Flexbox 的蹤跡。今天我們再來舉一個例子，假設我們需要做一個使用者管理頁面，那我們可能...

Taiming ‧ 2022-10-04 ‧團隊光明頂

0 Like 0 留言 1017 瀏覽

鐵人賽影片教學 DAY 18

視窗程式設計系列第 18 篇

技術【Day18】打磚塊遊戲序幕，球的彈跳規則設計

嗨，大家好，今天是視窗程式設計第十八天的影片教學，從今天的影片開始，要來進入新的遊戲專案，打磚塊的遊戲。打磚塊的遊戲專案，預計會實作以下功能：球會產生反方...

Ericostco ‧ 2022-10-03

0 Like 0 留言 443 瀏覽

鐵人賽自我挑戰組 DAY 18

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 18 篇

技術 Arcade再進化-射擊遊戲(3)

第三章：增加子彈Buff、時間倒數玩玩看第一部分:增加子彈Buff(獲得向外四散子彈) 找到十字星，會獲得隨機向外四散的子彈選取變數裡的變數...

小威老師 ‧ 2022-10-03

3 Like 0 留言 1912 瀏覽

鐵人賽 Modern Web DAY 19

防禦性 CSS - 建立「防患未然」的匠人心態系列第 19 篇

技術【Day19】Flexbox - 內元件溢出

情境 Flexbox 是 CSS3 的盒子模型(box model)，顧名思義它就是一個具有彈性和靈活性的盒子(Flexible Box)，這個模型讓排版變得容...

Taiming ‧ 2022-10-03 ‧團隊光明頂

1 Like 0 留言 1091 瀏覽

鐵人賽 Mobile Development DAY 30

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用系列第 30 篇

技術 Compose 解決了哪些挑戰？

　Medium 好讀版鐵人賽系列文章今天進入最終章，在實作 Kimoji App 的過程，有許多實務經驗和心得非常想和各位讀者分享；Compose 的世...

John Lu ‧ 2022-10-06 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

0 Like 0 留言 1617 瀏覽

鐵人賽 Mobile Development DAY 29

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用系列第 29 篇

技術 snapshotFlow：將 Compose 的 state 轉換為 Flow

　Medium 好讀版已經開發了這麼多 Kimoji App 的功能，該埋點了吧！今天的文章會示範在使用者捲動「日記清單」時，觸發一個 side eff...

John Lu ‧ 2022-10-05 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

3 Like 0 留言 1575 瀏覽

鐵人賽 Modern Web DAY 18

防禦性 CSS - 建立「防患未然」的匠人心態系列第 18 篇

技術【Day18】盒子模型 - 邊距重疊

情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為， html 元素在 CSS 裡面，都可以視為一個一個的盒子(Box)。如下...

Taiming ‧ 2022-10-02 ‧團隊光明頂

0 Like 0 留言 1205 瀏覽

鐵人賽 Mobile Development DAY 28

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用系列第 28 篇

技術 rememberCoroutineScope

　Medium 好讀版今天的文章中，我們要來實作彈出 ModalBottomSheet 的功能。目前，如果嘗試點擊日記上的選單，不會觸發任何動作。...

John Lu ‧ 2022-10-04 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

0 Like 0 留言 498 瀏覽

鐵人賽自我挑戰組 DAY 17

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 17 篇

技術 Arcade也能學演算法Ouo!? 演算法遊戲!(3)

第三篇：棋類遊戲-立體四子棋大綱遊戲內容創建角色控制箭頭放置棋子顯示結果尋找連線成果預覽這是一個雙人對戰遊戲可以利用左右鍵控制箭頭...

小威老師 ‧ 2022-10-02

0 Like 0 留言 1559 瀏覽

鐵人賽自我挑戰組 DAY 16

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 16 篇

技術 Arcade再進化 - 虛擬鍵盤的妙用(3)

第三篇簡易計算機藉由第二篇已讓大家認識如何用運算的積木和 Javascript的語法使輸入的數值自動做計算本篇會分享如何將+ - * / 變成選單，像計...

小威老師 ‧ 2022-10-01

2 Like 0 留言 1001 瀏覽

鐵人賽 Modern Web DAY 17

防禦性 CSS - 建立「防患未然」的匠人心態系列第 17 篇

技術【Day17】盒子模型 - 內容盒子與邊框盒子

情境我們在認識 CSS Box Model 的時候，有一個必須要知道的屬性，就是 box-sizing。我們來看看這個 Box Model：我們在初學...

Taiming ‧ 2022-10-01 ‧團隊光明頂

0 Like 0 留言 532 瀏覽

鐵人賽自我挑戰組 DAY 15

玩game學打code。街機程式設計再進化。微軟Arcade 系列第 15 篇

技術 Arcade再進化-空島跳躍者(3)

空島跳躍者上篇內容我們已經讓可以控制角色也完成基本的地圖設置。若跟不上進度的可以回去複習喔~ 本篇內容本篇我們將製作遊戲結果的判定及繪製角色動畫及設...

小威老師 ‧ 2022-09-30

0 Like 0 留言 1967 瀏覽

鐵人賽 Mobile Development DAY 27

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用系列第 27 篇

技術 LaunchedEffect 和 rememberUpdatedState

　Medium 好讀版我們想要在 Kimoji App 中新增一個 landing screen，可以用來在背景載入資料。此系列文章是以我的業餘專...

John Lu ‧ 2022-10-03 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

0 Like 0 留言 1104 瀏覽

鐵人賽 Mobile Development DAY 26

Kimoji：以 Jetpack Compose 實作一款「心情日記」應用系列第 26 篇

技術從 ViewModel 使用可觀察的資料流

　Medium 好讀版今天的文章中，我們要來介紹如何將 ViewModel expose 的可觀察資料型態接到 Composable 上。我們會示範將...

John Lu ‧ 2022-10-02 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

技術 【Day27】CSS 語法 - 分組選擇器

技術 【Day26】元件高度 - 響應式高度設計

技術 【Day25】Class & Object簡介

技術 Arcade再進化-迷宮產生器(4)

技術 Arcade再進化-射擊遊戲(4)

技術 【Day25】元件高度 - 步驟對話框的高度