近年來,資訊教育越來越受到重視,尤其是程式設計這門學科。不過,對於初學者來說,學習程式設計的過程常常會遇到各種卡關的情況。如果你也是程式初學者,推薦你試試 Web:Bit教育版 中的創意範例。「 Web:Bit 創意範例 」對於程式初學者來說,是一個很好的學習資源,透過觀摩其他人的作品,獲得靈感和創意,在程式設計的路上更加得心應手。

Web:Bit 創意範例介面

創意範例有趣作品分享

1. 互動遊戲 – 功夫

  • 作者:少林掃地僧
  • 範例連結:https://webbit.webduino.io/blockly/#Jy1aKENKnmGyl
  • 作品介紹:不需要開發板,開起鏡頭握拳就可以開始打小怪獸,也可以自行更改遊戲時間,很適合跟朋友一起比拼,誰贏了就是程式界的少林僧。
  • 小編實測:小編嚴重體力不足只獲得 15 分,看來在少林寺拜師會被用掃把驅逐⋯⋯不過沒有想到可以透過這種方式來練功夫,大家快試試!

程式積木說明

  • 搭配「 Youtube 」擴充功能,會發現在背景有一代宗師的配樂,帶來了沉浸式的遊戲體驗。
  • 藉由使用「 視訊偵測 」擴充功能,攝影機可以偵測玩家握拳擊打小怪獸,並計算分數。需要注意的是,視訊偵的積木必須與「 重複迴圈 」搭配使用
  • 新增「 時間 」積木和「 分數 」積木,並搭配重複迴圈中的「 計數 」積木來計算剩餘時間和分數。
  • 使用「 函式 」積木簡化程式邏輯,完成函式積木後,就可以在重複迴圈中呼叫函式。作者定義了紅色小怪獸 ( red ) 和黃色小怪獸 ( yellow ) 需要執行的內容,例如擊打小怪獸會增加分數、表情變換還有位置會更改。
Web:Bit 創意範例 – 互動遊戲 – 功夫

2. 雙人對戰怪獸手速賽跑

  • 作者:宣宣
  • 範例連結:https://webbit.webduino.io/blockly/#GqNzbrd1AA8qg
  • 作品介紹:小怪獸版的雙人賽跑遊戲,一人使用「 空白鍵 」,另一人使用「 Enter 」鍵,當裁判小怪獸說開始後就可以來一場程式賽跑競賽。
  • 小編實測:小編找了小小編一起玩,這次終於是小編的強項了,絕對不是因為我有先試玩過才獲勝的,大家也快找朋友比賽吧!

程式積木說明

  • 使用進階功能中的「 怪獸控制 」積木,可以設置舞台背景、定位小怪獸在預備位置及說話內容。
  • 使用「 邏輯 」積木及「 偵測 」積木,並新增「 開關 」變數, 當滿足按下空白鍵及 Enter 鍵這個條件時,對應到的小怪獸會移動位置。
  • 使用「 重複 」積木搭配「 邏輯 」積木,判斷哪隻小怪獸的 X 座標比較大來判斷哪位玩家獲勝。
Web:Bit 創意範例 – 雙人對戰怪獸手速賽跑

3. 1 秒讓你找到本命鏡框

  • 作者: 不想開學
  • 範例連結:https://webbit.webduino.io/blockly/#byXZjeBpajlqO
  • 作品介紹:透過人臉辨識及 AR,讓玩家只用一秒就能知道眼鏡上臉的效果,選擇 1 ~ 5 中的數字即可開始試戴眼鏡。
  • 小編實測:俗話說一副不好的眼鏡可能會成為書呆子,但這款本命鏡框讓小編就算沒近視也想戴著當造型了。

程式積木說明

  • 加入「 圖片 」積木,放入想試戴的眼鏡圖片,作者將圖片設定成「 變數 」方便操作,並在一開始把這些鏡框圖片隱藏起來。
  • 新增擴充功能中的「 人臉 & 顏色追蹤 」積木,必須搭配「 重複迴圈 」積木使用。啟動攝影機追蹤人臉的座標後,設定圖片尺寸為該座標並定位。
  • 避免試戴眼鏡過程出現追蹤方框,故隱藏 人臉&顏色追蹤方框 」積木。
Web:Bit 創意範例 – 1 秒讓你找到本命鏡框

4. 閃躲小怪獸遊戲

  • 作者:buber
  • 範例連結:https://webbit.webduino.io/blockly/#b3Gj4Lg5eoOqA
  • 作品介紹:利用模擬器的「 A 」、「 B 」來控制小怪獸移動,不能碰到天下掉下來的小怪獸,若是碰觸三次遊戲就會結束。
  • 小編實測:很刺激的遊戲但小編技能不足,躲了一個又來一個,可能需要再修行五年或來人教我個隱身術!

程式積木說明

  • 利用擴充功能中的「 按鈕開關 」積木來控制模擬器。
  • 使用「 函式 」積木搭配「 變數 」積木簡化程式邏輯,其中一個函式為控制小怪獸降落座標及大小,尺寸是取隨機整數;另一個函式則是計算失誤次數,只要次數達到 3 次則遊戲就會結束。
  • 利用「 重複 」積木及「 邏輯 」積木,根據不同怪獸對應到函式中設定好的變數,如果條件滿足則會執行對應的積木。
Web:Bit 創意範例 – 閃躲小怪獸遊戲

Web:Bit 創意範例

Webduino 為了讓喜歡程式的人或程式初學者有一個可以互相交流的空間,特地在 Web:Bit 教育版建立了創意範例專區,可以共享你的創意,也是一個學習資源的平台,可以輕鬆地分享你的作品也可以藉由欣賞他人的作品進而獲取靈感。

擋不住想法了嗎?點擊這裡告訴你創意範例在哪裡,並上傳你最厲害的作品讓小編玩吧!

還沒有想法也沒有關係!Web:Bit 教育版也有提供官方教學範例,讀者可以根據自身程度選擇官方範例,若是手邊有Web:Bit 開發板能一起操做效果更好,說不定體驗完這些官方範例靈感就出現了呢!

結語

學習程式已經成為現代的一種趨勢,學習程式或程式教學時常常會遇到各種困難和瓶頸,讓人感到無從下手,但即便你是一位程式初學者,Web:Bit 都可以幫助你突破自我學習的瓶頸,讓你更好地掌握程式技能。體驗完上面許多有趣的 Web:Bit 創意範例後,你會發現它有許多擴充功能,例如可以串接 YouTube 影片連結⋯⋯等,如果對於積木不太了解,可以參考 Web:Bit 教學文,即使沒有開發板,也能充分體驗物聯網的趣味和便利,下一位創意範例小天才可能就是你,快上傳你的 Web:Bit 創意範例吧!