🎨 #34 互動式影像聲音遊戲區：「來抓我哦」按鈕跳躍 + Blockade Labs Skybox AI 360° 全景嵌入
#34 真實標題「桃園市龍潭區石門國小互動式網頁」— 含「來抓我哦」隨機跳動按鈕（抓中得分）+ 拍照 / 重拍 / 全螢幕功能 + **Blockade Labs Skybox AI 360° 全景場景嵌入**（阿凱自己生成的場景）+ 連結 Chrome 跑酷遊戲。互動藝術裝置設計。
為大型觸控螢幕設計的「互動藝術裝置」
阿凱有一系列工具是專為**學校大型觸控螢幕（55-65 吋）**設計的互動裝置 — #34 是其中最豐富的一個。
#34 真實怎麼做？
真實標題：「～歡迎來到石門國小互動式影像聲音遊戲區～」
多元互動元素：
功能 A：「來抓我哦」隨機跳動按鈕
- 按鈕在螢幕上隨機跳動
- 學生用手指追著抓
- 抓到 → Score +1 計分
- 經典「catch the button」遊戲
功能 B：拍照 / 重拍 / 全螢幕
- 螢幕上的攝影機功能（要授權）
- 拍照當作互動裝置的「到此一遊紀念」
功能 C：Blockade Labs Skybox AI 360° 場景嵌入
- iframe 嵌入：
skybox.blockadelabs.com/e/1ee3288bab4b1f9ddff24cd209f93fd0 - Blockade Labs Skybox 是 AI 生成 360° 全景圖的工具
- 阿凱自己用 AI 生成一個場景 + 嵌進學校網頁
- 學生用觸控螢幕沉浸式探索
功能 D：Chrome Dino 跑酷遊戲
- 連結
chrome://dino/— Chrome 離線恐龍遊戲 - 觸控螢幕上能玩 = 校園版 Dino Run
音量控制：低 / 中 / 高 三檔。
真實技術棧
- 純前端單檔 HTML（6,608 字元）
- requestAnimationFrame 按鈕跳動動畫
- navigator.mediaDevices 拍照
- iframe 嵌入 Blockade Labs Skybox 360°
- 無 LLM、無後端
- 部署：
smes.tyc.edu.tw/smes_html/go.html
為什麼這個值得寫？
這是「AI + 互動藝術」的真實案例：
阿凱不是只用 Gemini 寫程式碼，他也用其他 AI 工具豐富作品：
- Blockade Labs Skybox AI 生成 360° 全景
- Gemini 寫程式碼整合
- Chrome Dino 系統內建遊戲
- WebRTC 攝影機 API 拍照
多 AI 工具混搭 = 阿凱的真正工作流。
教學情境
朝會前 / 課間休息：
- 走廊觸控螢幕掛 #34
- 學生玩「抓按鈕」 + 看 360° 場景
- 「課間活動」變成有趣的事
親職教育日體驗：
- 家長走過觸控螢幕 → 玩「抓我哦」
- 看 AI 生成 360° 場景 → 家長親自感受 AI 的力量
藝術與人文 / 資訊融入：
- 講「互動藝術」單元
- 用 #34 示範「藝術 + 程式 + AI = 新型作品」
配對工具推薦
- #32 觸屏碰碰碰 — 觸控互動系列
- #33 讓聲音具現化吧！ — 同款互動藝術
- #35 觸屏點點塗鴉區 — 塗鴉互動
適用對象
- 有大型觸控螢幕的學校
- 圖書館 / 學習角 / 走廊互動裝置規劃者
- 藝術與人文老師
- 想看「AI + 互動藝術」案例的老師