👆 #32 石門國小觸屏碰碰碰：AudioContext 音效 + Canvas 隨機浮動圖案的觸控互動遊戲
#32 真實標題「**石門國小觸屏碰碰碰！**」是阿凱專為石門國小觸控螢幕設計的小遊戲 — 觸碰畫面就會獲得隨機浮動圖案，AudioContext 合成音效 + Canvas 動畫。10KB 單檔部署 XOOPS VM。
學校觸控螢幕的真實用途
許多國小現在有大型觸控螢幕（55 吋 / 65 吋電視 / 互動白板），但平常都拿來：
- 投影 PPT
- 看 YouTube
- ⋯ 就這樣
阿凱發現「這麼大的螢幕應該要做點什麼」 — 於是寫了一系列「觸屏互動小遊戲」。
#32 真實怎麼做？
真實標題：「石門國小觸屏碰碰碰！」（含學校名 + 驚嘆號！）
核心互動：
- 標題：「請觸碰畫面，將獲得隨機浮動圖案」
- 學生用手指碰螢幕 → 螢幕該位置浮現一個隨機圖案
- 圖案會浮動 / 漂浮 / 變化
- 多人同時碰 → 多個圖案同時浮動
- AudioContext 合成音效（碰一下發出聲音）
真實技術棧
- 純前端單檔 HTML（10,516 字元 — 小巧）
- Canvas + requestAnimationFrame
- AudioContext（合成音效）
- 觸控事件（
touchstart/touchmove） - 無框架、無 LLM
- 部署：
smes.tyc.edu.tw/smes_html/touch.html
為什麼這值得寫？
「互動藝術 + 教學情境結合」 — 阿凱這系列工具是專為石門國小的物理空間設計：
| 觸屏工具 | 場景 |
|---|---|
| #32 觸屏碰碰碰（本篇） | 一般觸控玩耍 |
| #33 讓聲音具現化吧！ | 聲音視覺化教學 |
| #34 互動式影像聲音遊戲區 | 大型展示 |
| #35 觸屏點點塗鴉區 | 自由塗鴉 |
| #37 聲波擴散 360 小遊戲 | 物理概念體驗 |
這些工具掛在石門國小走廊 / 圖書館 / 學習角的觸控螢幕上，學生課間經過就能玩 — 物理空間 + 數位互動 = 新型教學環境。
教學情境
朝會前等待時間：
- 早上 7:50-8:00 學生陸續到校
- 走廊觸控螢幕掛 #32 → 學生輪流碰
- 不會吵到上課
親職教育日體驗：
- 家長走過觸控螢幕 → 「這也是阿凱老師寫的？」
- 親身感受學校的數位轉型
藝術與人文課延伸：
- 講「互動藝術」單元
- 用 #32 示範「觀眾的觸碰也是藝術品的一部分」
配對工具推薦
- #33 讓聲音具現化吧！ — 聲音視覺化
- #35 觸屏點點塗鴉區 — 自由塗鴉版
- #37 聲波擴散 360 小遊戲 — 物理概念
適用對象
- 有大型觸控螢幕的學校
- 圖書館 / 學習角規劃者
- 藝術與人文老師
- 想做「互動藝術裝置」的工程師
想試試？
如果你校有觸控螢幕 — 掛 #32 在走廊上，整天都有互動，學生課間多了一個「跟學校玩耍」的方式。