2023除錯練習

https://scratch.mit.edu/studios/33249702

1. 飛行射擊
2. 揮棒打球
3. 貓咪上樓
4. 齒輪轉動

Scratch 發射子彈

請跟著影片練習，在遊戲中發射子彈、丟出東西，這個作業需要以下幾個特別的積木。

• 控制—重複直到
• 運算—或

Scratch 廣播與接收訊息

請跟著影片練習，用廣播方式讓角色間彼此溝通，像是角色的出場順序、對話順序之類。

• 事件—廣播訊息
• 事件—當收到訊息

Scratch 使用方向鍵（上下左右、WASD）控制角色移動

• 鍵盤左邊的方向鍵 WASD
• 鍵盤右邊的方向鍵 上下左右

將 Inkscape 畫完的圖上傳到 Scratch 中

Scratch 的舞台尺寸為 480 x 360，也就是寬 480 個點，高 360 個點。
這個「點」在電腦中稱作「像素」（Pixel 簡稱 px），由多少個點組成也就是圖片的解析度。
在 Inkscape 中要設定頁面尺寸為 480 x 360，這樣存檔後才能正確放到 Scratch 中，而不會過大。

參考 freepik 網站，學習用 Inkscape 畫圖

L-game，平板或觸控電視都可以玩

1. 不能超出格子
2. 不能重疊
3. 可以旋轉
4. 最後不能放的就輸了

https://scratch.mit.edu/projects/441984354/fullscreen/

Scratch 3 重複放大縮小—使用正弦函數 (Animation using sine wave)

自然界的現象變化，可以使用特定的數學函數來描述與重現。運用數學中的「正弦曲線」(sine wave) 平滑的放大與縮小角色，正因為「正弦曲線」的變化高高低低，範圍固定，可持續重複展現變化。

降低彩度 (saturation)，避免過度鮮豔造成視覺疲勞。

• 色相、明度、彩度
• Why You Should Avoid Bright, Saturated Background Colors
• HUE, VALUE, SATURATION
• 飽和度的掌控-濁色 (汙泥色/髒色/Mud Color)

文字化分析 Scratch 3 專案

1. 取得完整分析資訊：
   • https://scratch.chps.tn.edu.tw/[專案編號]
   • https://scratch.chps.tn.edu.tw/329220332
2. 取得 JSON 格式分析資訊
   • https://scratch.chps.tn.edu.tw/[專案編號]/json 
   • https://scratch.chps.tn.edu.tw/329220332/json

Scratch 3 模擬車輛左轉彎與駕駛視野

Make a Left Turn 左轉彎

範例

• 觀看範例程式
  https://scratch.mit.edu/projects/327513248/editor/

Scratch 3 文字轉語音—如何正確唸出繁體中文

• 範例
  
• 觀看範例程式
  https://scratch.mit.edu/projects/316048428/editor/

透過 Scratch API (2.0) 取得學生作品清單

教師可使用「Scratch 教師帳號」管理班級學生，學生皆以線上方式創作，可善用 Scratch 的改編、背包、創作坊及相關社群互動功能。進一步運用 Scratch API 蒐集學生「分享」的作品清單，教師可以全覽學生作品，便於檢視作品進度與回饋。

示範網址：

1. 全部學生作品
   http://www.chps.tn.edu.tw/scratch.html
2. 特定使用者作品
   http://www.chps.tn.edu.tw/scratch.html?username=lyshie
3. 改編來源 (專案 ID)
   http://www.chps.tn.edu.tw/scratch.html?root=219495043
4. 連續使用者（年級＋班級＋座號）
   http://www.chps.tn.edu.tw/scratch.html?prefix=twchps&classes=501,502,503,504&count=30
5. 創作坊（標題、創作坊編號）
   https://www.chps.tn.edu.tw/studio.html?title=%E7%B4%85%E7%B6%A0%E7%87%88&studio=6018929,6018925,6021248,6021251

原始程式碼：

• https://github.com/lyshie/lyshie-education/blob/master/Scratch/scratch.html
• https://github.com/lyshie/lyshie-education/blob/master/Scratch/studio.html

參考資訊：

1. https://en.scratch-wiki.info/wiki/Scratch_API_(2.0)
2. https://github.com/LLK/scratch-rest-api/wiki

如何放大 Scratch 3 字體？

1. 為 Chrome 瀏覽器安裝 Stylus 擴充功能。
2. 加入以下設定至 Stylus 中，適用於「比對正規表示式的網址」 https://scratch.mit.edu/projects/.*editor.* 。
   
3. 下載以下 CSS 樣式設定。
   https://gist.github.com/lyshie/c0199250041ad78a8219181efa44a816

   /*
       1. Install Stylus (https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)
       2. URL: Regular expression (https://scratch.mit.edu/projects/.*editor.*)
   */
   
   /* 減少高度（最上面一排的選單） */
   div.menu-bar_menu-bar_JcuHF,
   div.menu-bar_menu-bar-item_oLDa-,
   div.menu-bar_menu-bar-item_oLDa- span,
   div.menu-bar_menu-bar-item_oLDa- div,
   div.menu-bar_menu-bar-item_oLDa- input {
       height: 32px;
   }
   
   /* 減少高度（最上面一排的選單） */
   div.menu-bar_menu-bar-item_oLDa- span,
   div.menu-bar_menu-bar-item_oLDa- div,
   div.menu-bar_menu-bar-item_oLDa- input {
       padding: 2px;
   }
   
   /* 一般文字標籤 */
   span {
       font-size: 14px;
       font-weight: bold !important;
       text-shadow: 0.03em 0.03em 0.03em #999999 !important;
   }
   
   /* 程式積木分類文字 */
   div.scratchCategoryMenuItemLabel {
       font-size: 14px !important;
       font-weight: bold !important;
       text-shadow: 0.03em 0.03em 0.03em #999999 !important;
   }
   
   /* 積木文字 */
   .blocklyText {
       font-size: 20px !important;
       font-weight: bold !important;
       text-shadow: 0.03em 0.03em 0.03em #999999 !important;
   }
   
   /*
       sprite-selector-item: 角色名稱
       label_input-label: 角色一般文字標籤
       labeled-icon-button: 繪圖工具按鈕
       input_input-form: 可輸入的文字區域
   */
   div[class^="sprite-selector-item"],
   span[class^="label_input-label"],
   span[class^="labeled-icon-button"],
   input[class^="input_input-form"] {
       font-size: 12px !important;
       font-weight: bold !important;
       text-shadow: 0.03em 0.03em 0.03em #999999 !important;
   }
   
   /* 程式註解文字 */
   .scratchCommentText {
       font-size: 20px !important;
       font-weight: bold !important;
       text-shadow: 0.03em 0.03em 0.03em #999999 !important;
   }
   

   

進學國小107學年度Scratch課程創作坊

https://sites.google.com/chps.tn.edu.tw/107scratch

Scratch 學生帳號清單檢查

在建立 Scratch 學生帳號前，確認欲建立的帳號清單都是可用且連續的。

如：

twchps50101

twchps05102

twchps05103

...

檢查程式：

https://lyshie.github.io/lyshie-education/Scratch/bulk.html

原始碼：

https://github.com/lyshie/lyshie-education/blob/master/Scratch/bulk.html

在 GNU/Linux 上執行 Scratch 3.0 離線編輯器 (Scratch Desktop)

Scratch 3 與 micro:bit 應用—跳過障礙物

Scratch 進階設計—射擊遊戲架構

程式說明

一、遊戲階段（等待至換階段）

1. 遊戲規則
2. 遊戲開始（第一關）、第二關、...）
3. 遊戲結束

二、角色

1. 主角
2. 目標（分身）
3. 砲彈（分身）
4. 障礙物（分身）
5. 敵人（分身）

三、變數

1. 得分
2. 生命值

四、音效

1. 背景音樂（循環播放）
2. 射擊效果（單次播放）

https://scratch.mit.edu/projects/253878086/

Scratch 進階設計 狙擊鏡效果

程式說明

運用向量繪圖，組合「造型」與「透明填色」，模擬透過「狙擊鏡」觀看景物的效果。

https://scratch.mit.edu/projects/249236385/

Minecraft 教育版與 Code Connection 體驗

http://se.piee.pw/AJ89U

Scratch 作品瀏覽、改編樹分析、程式差異比對

1. 作品瀏覽
   http://www.chps.tn.edu.tw/scratch.html
2. 改編樹分析
   http://www.chps.tn.edu.tw/fork.html?project=222995295
3. 程式差異比對
   http://www.chps.tn.edu.tw/diff.html?project=219604212

原始程式
https://github.com/lyshie/lyshie-education/tree/master/Scratch

Scratch 活動 Getting Unstuck

https://gettingunstuck.gse.harvard.edu/

Scratch 3.0 與 Micro:bit BLE 藍芽連接 (GNU/Linux 平台)

1. 啟用 Google Chrome 瀏覽器的 Web Bluetooth API 支援
   chrome://flags/#enable-experimental-web-platform-features
2. 確認藍芽服務開啟

   # systemctl restart bluetooth
   # rfkill unblock all
   

3. 更新 Micro:bit 程式

   # cd /tmp
   # wget "https://llk.github.io/scratch-microbit-firmware/scratch-microbit-firmware-combined.hex"
   # cp /tmp/scratch-microbit-firmware-combined.hex /run/media/lyshie/MICROBIT
   

4. 開啟 Scratch 3.0 測試網站
   https://llk.github.io/scratch-gui/microbit/
5. 參考網站

• https://www.watch.impress.co.jp/kodomo_it/news/1130112.html
• https://llk.github.io/microbit-extension/iste18/
• https://github.com/hine/microbitble
• Web Bluetooth
• Web Bluetooth Samples

Scratch 課室管理

1. 線上版

2. 教師帳號申請

3. 新增班級

4. 新增學生

5. 改編小作品、背包

6. 分享、創作坊

Scratch 遊戲設計 - 分身的事件 (events for clone)

設計重點

https://scratch.mit.edu/projects/229845510/

Scratch 遊戲設計 - 仿製 Diep.io 遊戲

設計重點

1. 角色旋轉（滑鼠）
2. 角色移動（按鍵 WASD）
3. 子彈發射（分身運用）
4. 物件淡出（圖形效果）
5. 碰撞偵測（條件判斷）
6. 連續舞台（絕對值）
7. 數值紀錄（全域變數、物件變數）

https://scratch.mit.edu/projects/229458692/

參考資源：

• Diep.io (坦克大作戰)

Scratch 遊戲設計 - 歡樂夾娃娃機 (claw crane)

遊戲玩法

1. 先使用方向鍵「左」、「右」，水平移動爪子
2. 接著，使用方向鍵「下」抓取娃娃
3. 不是每次都可以夾到喔
4. 可搭配 Micro:bit 或外部控制器來玩

https://scratch.mit.edu/projects/229134627/

參考資源：

• 歡樂夾娃娃機 (claw crane)
• Scratch2 - Micro:bit extension (with BLE)

Scratch 函式與遞迴 (自訂新積木)

使用繪圖方式介紹「函式」與「遞迴」，可以視覺化的方式觀察特徵，感受規律性。此處則以「落地反彈」的現象介紹函式與遞迴，嘗試理解函式積木的特色與優點，並且呈現遞迴的「重複效果」(Tail Recursion、尾遞迴)。函式為 Scratch 的進階功能，常見於多數的程式語言。函式的使用讓我們以更直覺的方式描述問題，解決問題，我們解決問題不再是逐一列舉，而是以規則和規律性來處理問題，而遞迴的使用則提供另一種更為簡潔的規則來處理問題。

1. 函式積木
2. 為何使用函式積木
3. 函式積木的優點
4. 函式積木與參數
5. 參數
6. 新增函式積木
7. 程式片段
8. 問題應用
9. 問題描述
10. 方法1：循序
11. 方法2：重複
12. 方法3：函式與遞迴
13. 方法比較

電子書，Scratch 函式與遞迴：

http://odata.tn.edu.tw/ebooktagapi/Intro/Index2?id=b83ccee183d642b7852ec1cad60ae82c

Scratch 範例，三種方式彈跳 (循序、重複、遞迴)：

https://scratch.mit.edu/projects/225806763/

參考文件：

• Tail recursion and iteration

Scratch 清單功能 (List)

清單可視為變數的延伸，同樣具有「名稱」和「內容」。清單為彈性且連續的儲存空間，如同容器一般，不同的寫入與讀取順序，可以應用於不同的問題上。善用「清單」與「分身」，可以使用有限的程式來處理未知數量的問題。

1. 變數的延伸
2. 變數的不足
3. 清單與變數的差異
4. 清單的優點
5. 建立清單
6. 清單介紹
7. 增加清單項目
8. 取得清單項目
9. 讀取清單所有項目
10. 清單的應用—抽籤紀錄

電子書：

http://odata.tn.edu.tw/ebooktagapi/Intro/Index2?id=aa504ba64b924fe5b3bb75bcd1769a42

Scratch 範例，抽籤紀錄與比對 (清單的運用)：

https://scratch.mit.edu/projects/225756254/

鋼琴錄音

https://scratch.mit.edu/projects/225299150/

mBot 左右馬達試驗與旋轉方式

1. 教師以 Scratch 動畫，設定「旋轉中心」，呈現不同的旋轉方式。
2. 請學生依據「馬達一」與「馬達二」的不同數據，分別測試出「左右輪」與「馬達一二」的對應關係。
3. 請學生測試「左輪」與「右輪」不同的轉速數值，依序驗證旋轉方式，觀察「旋轉方向」與「不動點」。

https://sulfurous.aau.at/html/app.html?id=225470347&turbo=false&full-screen=true&aspect-x=4&aspect-y=3

https://scratch.mit.edu/projects/225470347/

Scratch 課程重點分類

Scratch 分身功能 (Clone)

1. 什麼是分身？
2. 為什麼需要分身？
3. 分身積木
4. 如何建立分身？
5. 分身在哪裡？
6. 如何區別「分身」與「本尊（原來的）」？
7. 分身的應用

電子書：

http://odata.tn.edu.tw/ebooktagapi/Intro/Index2?id=a2c9592177e0443bbbc1194101b8ee58

Scratch 範例：

https://scratch.mit.edu/projects/224505889/

Scratch 遊戲設計—跳過石頭

石頭會從主角的前方跑過來，按下「空白鍵」或「滑鼠左鍵」跳起來避開石頭。簡單的跳躍遊戲，運用景深的方式由遠到近。

行動裝置版本，可使用觸控方式點擊。

https://sulfurous.aau.at/html/app.html?id=223418719&turbo=false&full-screen=true&aspect-x=4&aspect-y=3

https://scratch.mit.edu/projects/223418719/

Scratch 除錯與改編系列課程 (除錯、改編、互評)

1. 課程簡案

2. 電子書 (Scratch 之如何除錯)

3. 電子書 (學習如何除錯)

進學國小 2018 全民學區數位學習課程講義

Scratch 遊戲設計親子共學

Scratch 創作坊

Scratch 線上版課程教案整理

1. Scratch 網站體驗活動

2. Scratch 線上帳號啟用

3. 紅綠燈交通號誌（一）

4. 紅綠燈交通號誌（二）

5. 問與答

6. 問與答（選擇 / 判斷）

7. 「除錯 + 改編 + 互評」系列課程

8. mBot 運動會（分組競合、反覆修正）

mBot 循線軌跡設計 (適應各種顏色與反光程度的平面)

由於各種平面的顏色與反光程度不一，單使用黑色軌跡不足以讓 mBot 順利循線前進。使用常見的「PVC絕緣膠帶」，選擇「黑」「白」兩色，以「黑白黑」或「白黑白」的交錯方式佈設，將 mBot 的循線範圍限制在外側兩線內，可適應於一般地面環境。

mBot 如何使用 Gyroscope (陀螺儀) 自行走直線

這裡我們嘗試運用外部感應器讓 mBot 自行走直線 (straight line)，也就是利用感應器回傳的數值來修正 mBot 的行走方向。可運用的感應器有「羅盤 (compass)」、「陀螺儀 (gyroscope)」與「加速計 (accelerometer)」，三者的差異可參考「Difference between Accelerometer , Compass ,Gyros or Gyroscope」。

而「走直線」在此意味著盡可能讓 mBot 朝著初始位置 (initial position) 所指的方向前進。起初嘗試運用「電子羅盤」指引方向，但容易受到地球磁場以外的磁性物質干擾，不利於 mBot 正確找到方向。因此，選擇「陀螺儀」來偵測 mBot 車體偏移情形，及時轉向，回到初始指向的路線。

1. 選用陀螺儀「Me 3-Axis Accelerometer and Gyro Sensor」，裝置於 mBot 上，讀取 Z 軸資訊取得車體偏移情形。
    
2. 車體相對於平面的靜止情況下，Z 軸的數值雖然上下起伏，尚在一定範圍內，其數值仍具參考價值。如將 USB 電源供應改為電池供電後，將明顯發現 Z 軸數值不斷偏移，隨著時間而增加 (可為負值)，這樣便無法正確運用 Z 軸的數值了解車體偏向情形。推測或許是 drift 的問題，可參考關鍵字「gyro drift」搜尋相關文件。
3. 如何修正 mBot 陀螺儀 Z 軸數值偏移的問題呢？
   首先，透過簡單的程式來紀錄「時間」與「Z 軸數值」的對應關係，「時間」則是 mBot 內部的計時器數值。取樣的過程，可以加入時間間隔，每隔0.5秒、1秒，或是0.1秒皆可。避免過於頻繁讀取，感應器未能及時反應，而取得極端數值。
   
   將數值紀錄於清單 (list) 中，再將此資料匯出，透過相關統計軟體來分析與計算。
   
4. 觀察「時間」與「Z 軸數值」對應關係，排除掉過大或過小的數值，推測可能為線性關係 (linear)，進一步使用統計軟體(如「Linear regression calculator」)分析與確認。下表數值中，也會發現當 Z 軸數值小於 -180 後，將變成 180；而大於 180 後，將變成 -180。在後面的程式中會針對這個問題做處理。
   
   Z 軸數值每秒大概會有接近 -3.0 的增加。
   
5. 實際程式
   透過 calc_drift 函式，可以依實際請況自動取樣計算合適的 drift 值。或依據實際經驗，指定 drift 值，如 calc_drift2 函式。這裡修正所需的經驗數值約是 3.34。
   
6. 上述方法，雖不能完美的直線行走，尚能於適當距離內完成近似直線的軌跡。正所謂「失之毫釐，差之千里」，初始指向的些微差異，隨著時間變化，終將使得 mBot 與目標位置漸行漸遠。
7. 借用 Micro:bit 或其他的「電子羅盤 (磁強計)」，增加額外的觀察資訊，提供 mBot 判斷方向或許值得一試。
   
   下圖程式，將 Micro:bit 讀取到的方位感應值稍做判斷後，以數位信號方式與 mBot 溝通。
   

Scratch 遊戲設計—3D 迷宮 (3D Maze)

設計重點

1. 運用切片層疊的方式製造深度，產生立體效果
2. 偵測球體與牆面的碰撞

JavaScript 版本 (適合手機與行動裝置)

• Sulfurous 版本

https://scratch.mit.edu/projects/205525319/

參考資源：

• 1s1s 3D Labyrinth!
• Sliced 3D method

Scratch 模擬設計—紅綠燈與小綠人動畫 (Traffic Light with Animations)

設計重點

1. 模擬燈號（綠、黃、紅）顯示的時間順序，運用造型變化功能
2. 設計小綠人快走或跑步動畫

JavaScript 版本 (適合手機與行動裝置)

• Sulfurous 版本

• Phosphorus 版本

https://scratch.mit.edu/projects/205311495/

參考資源：

• 車輛號誌倒數
• 跑步動作分解

Scratch 遊戲設計—蝴蝶拼圖遊戲 (Butterfly Puzzle)

JavaScript 版本 (適合手機與行動裝置)

紫斑蝶

• Sulfurous 版本
• Phosphorus 版本

https://scratch.mit.edu/projects/199914174/

大白斑蝶

• Sulfurous 版本
• Phosphorus 版本

https://scratch.mit.edu/projects/200135871/

樺斑蝶

• Sulfurous 版本
• Phosphorus 版本

https://scratch.mit.edu/projects/200136851/

玉帶鳳蝶

• Sulfurous 版本
• Phosphorus 版本

https://scratch.mit.edu/projects/200176510/

參考資源：

• ImageSplitter 圖片編輯與分割工具
• Pixabay 蝴蝶圖片(紫斑蝶)
• Pixabay 蝴蝶圖片(大白斑蝶)
• Pixabay 蝴蝶圖片(樺斑蝶)

Code.org 初學者常見問題分析

Micro:bit 資源分享

• 更新韌體
  按住 reset 鍵，接上 USB 連接線，進入 MAINTENANCE 模式
  最新韌體下載(kl26z_microbit) https://github.com/ARMmbed/DAPLink/releases

  $ cp 0244_kl26z_microbit_0x8000.hex /run/media/lyshie/MAINTENANCE/

• Micro:bit 資源列表
  https://github.com/carlosperate/awesome-microbit
• MIT App Inventor
  • Internet of Things
  • BluetoothLE
  • Platform: BBC micro:bit

• Control a BBC micro:bit from Node.js using BLE
  https://github.com/sandeepmistry/node-bbc-microbit
  韌體
  https://github.com/sandeepmistry/node-bbc-microbit/tree/master/firmware

• Golang framework for robotics, drones, and the Internet of Things (IoT)
  https://github.com/hybridgroup/gobot

• Scratch to micro:bit bridge.
  https://github.com/MrYsLab/s2m

• Scratch 與 Micro:bit 硬體擴充

• Linux 下使用 BLE (Bluetooth Low Energy) 與 Micro:bit 溝通
  https://gist.github.com/lyshie/70c5b759357da3f630348a8a510acba9

• GATT Profile 簡介
  https://www.race604.com/gatt-profile-intro/

• BBC micro:bit Bluetooth Profile

• 謝老師實作 Micro:bit BLE 與 Scratch 連接

• Scratch controller with Micro:bit over BLE (Bluetooth Low Energy)
  
  

• Micro:bit BLE (Bluetooth Low Energy) 讀取溫度數據  

• Tutorial: BLE Pairing the Raspberry Pi 3 Model B with Hexiwear

  $ bluetoothctl
  [BBC micro:bit [zotap]]# power on
  [BBC micro:bit [zotap]]# agent on
  [BBC micro:bit [zotap]]# scan on
  [BBC micro:bit [zotap]]# pair D6:AF:43:58:57:9F
  [BBC micro:bit [zotap]]# connect D6:AF:43:58:57:9F
  [BBC micro:bit [zotap]]# list-attributes
  Characteristic                                                                                  
          /org/bluez/hci0/dev_D6_AF_43_58_57_9F/service0025/char0028
          e95d93ee-251d-470a-a062-fa1922dfa9a8    
          MicroBit LED Text
  [BBC micro:bit [zotap]]# select-attributes /org/bluez/hci0/dev_D6_AF_43_58_57_9F/service0025/char0028
  [BBC micro:bit [zotap]]# write 0x31 0x32 0x33
  

   

Scratch 進階技巧—視差捲動 (Parallax scrolling)

透過不同「深度」的「圖層」變化，越底層的背景移動速度越慢，藉以營造出距離玩家不同遠近的視覺效果。

範例中，技巧性的藏入一白色橫條，避免移動到畫面邊界時出現延遲的問題，增進畫面的平順。

https://scratch.mit.edu/projects/193202835/

參考文件：

• https://en.wikipedia.org/wiki/Parallax_scrolling
• 視差滾動

Linux 下使用 BLE (Bluetooth Low Energy) 與 Micro:bit 溝通

https://gist.github.com/lyshie/70c5b759357da3f630348a8a510acba9

參考文件

• Gobot Micro:bit
• GORT
• node-bbc-microbit (Flashing micro:bit firmware)
• Read micro:bit data from Linux via Bluetooth (BLE)

Scratch 與 Micro:bit 硬體擴充

s2m 是一個開放原始碼的 Python 程式。透過它我們可以運用 Micro:bit 豐富的控制功能，增加與 Scratch 間的互動，如當作「遊戲控制器」輸入，或輸出控制訊號至 Micro:bit。

感謝「自由」與「開放」的方式釋出程式碼，我們可以清楚了解程式運作原理，更可增加或改進程式功能，以求程式越趨完善。

電子書：

http://odata.tn.edu.tw/ebooktagapi/Intro/Index2?id=463faaf394d54c2ea79a79d2e4083da8

參考資源：

• How s2m Works (s2m 如何運作)
• Scratch 2.0 離線編輯器
• Python 程式
• s2m 專案
• s2m 使用手冊
• MicroPython 線上編輯器
• 謝老師另一實作 Mirco:bit 擴充功能