20190323屏東大學

屏東大學第二屆數位課程與教學

理論與實務學術研討會

註：上圖中我與俊青的主題寫反了

活動時間:3月23日(六)

工作坊的時間：13:30至16:00

活動地點:國立屏東大學屏商校區 圖資大樓905教室

講師介紹：黃文玉老師

  • 高雄市新上國小電腦老師

  • 高雄市SCRATCH推廣教師

  • 教育部中小學教師運算思維增能研習種子教師

  • Facebook S4A社團管理員之一

  • 致力Scratch、Arduino、Micro:bit等創客教育的推廣(分享一系列的文章)

題目：micro:bit 利用5X5屏幕創作小遊戲

說明：

  • micro:bit雖然只有小小一個，但內含二個按鈕、5 x 5 LED點矩陣、及一些感測器，麻雀雖小，但五臟俱全！

  • 本次課程聚焦於5 x 5 LED點矩陣的作為上，這5X5LED屏幕除了可以顯示文字、數字、圖案外，還可以做遊戲創作，

  • 這次我們會利用MakeCode視覺化積木軟體來設計簡單的遊戲【猴子接香蕉】及【貪吃蛇遊戲】或【井字遊戲】等進階版遊戲。

一、【燈光類】積木的不便

  • 利用燈光類的積木，完成下面題目：按A鍵控制一顆LED燈亮燈向左移動，按B鍵控制一顆LED燈亮燈向右移動，程式如下：

  • 由上可知，要製作一顆LED燈亮燈移動的程式，要先將原本位置的燈關閉，再點亮下一個位置的燈，如果要設計複雜的遊戲，此種燈光類積木可能負荷不了，因此創建了【遊戲積木】。

二、【遊戲類】積木的產生

  • 補足燈光類木的不便與不足

  • 將角色物件化(或圖層化)，跳脫LED的視野。(把角色看成是浮在LED上的一個物件，利用亮暗或閃爍LED燈來呈現，每個角色可控制各自的亮暗燈)

三、先利用【猴子接香蕉】的遊戲來熱身一下

  • 一次只有一根香蕉掉下

  • MakeCode視覺化積木程式編輯器 https://makecode.microbit.org/

  • 作品說明：【猴子接香蕉】是猴子在最下方左右移動，上方有香蕉會從天而降，猴子要左右移動去接住香蕉

  • 內容說明：

    • 角色：一共只有兩個角色(猴子、香蕉)

      • 猴子：猴子的起始位置在(2,4)，猴子只在最下方一排（Y＝4），利用按A、B鍵來控制左右移動

      • 香蕉：香蕉的起始位置在(0,0)，一開始會隨機出現在上方不同的位置，然後往下移動

    • 猴子接到香蕉得1分

    • 猴子如果沒接到香蕉死1次，死5次就GAME OVER

  • 完整程式，請觀看講義

四、接下來做我最引以為傲的遊戲【貪吃蛇遊戲】

  • 作品說明：

    • 一開始【蛇頭】出現在(2,2)，然後會往右移動，一格一格移動，移動速度會隨著分數增加而變快

    • 按A鍵蛇頭會右轉90度，按B鍵蛇頭會左轉90度

    • 另外，在舞台上會隨機出現一顆【水果】(設定一直閃爍，好方便辨識)

    • 控制【蛇頭】去吃【水果】，每吃一顆水果，得1分

    • 每得1分(或2分、3分)則蛇的長度增加一節 (可自行設定要得幾分，便會增加1節)

    • 如果蛇頭碰壁或碰到自己的身體則GAME OVER

    • 先嘗試做只有蛇頭的貪吃蛇遊戲(基本款如下)

  • 認識【陣列】

    • 在電腦科學中，陣列資料結構（array data structure），簡稱陣列（Array），是由相同類型的元素（element）的集合所組成的資料結構，可以是數字、布林數(booleans)或字串的列表。其長度是它們所包含的項目數。陣列是靈活的，可以在陣列中的任何位置添加或刪除項目來增加或縮小長度(項目數)。

    • 當資料物件儲存在陣列中時，個別物件通常藉由非負整數的索引數字(索引位置)來選取。MakeCode陣列為一維陣列，其第一個元素的索引數字為0，可用如下的方式來創建一個陣列

        • 相當於：成績(0)=95、成績(1)=85、成績(2)=90、成績(3)=100 (0、1、2、3為索引數字)

    • 想想如何利用陣列來儲存蛇頭的X坐標及Y坐標，並判斷是否碰壁(將蛇頭移動的程式修改如下)

    • 蛇的坐標說明：【蛇X陣列】、【蛇Y陣列】兩個陣列來儲存蛇頭及蛇各節的X坐標及Y坐標 (一開始先宣告這兩個陣列)

      • (蛇X陣列(0) , 蛇Y陣列(0))為蛇頭坐標

      • (蛇X陣列(1) , 蛇Y陣列(1))為第1節蛇身的坐標..

    • 【陣列】與【變數】的關係，陣列可以說是變數的延伸，將同性質的變數可整合成一個陣列，例如計算學生各科成績時，我們可以用如下兩種表示法來計算。

    • 註：國語、數學、自然、社會為變數名稱；成績為陣列名稱

    • 由上可知陣列中的各項(如上的【成績(0)】、【成績(1)】…)也相當於是一個變數，經在MakeCode中測試後，一樣可以擔任遊戲積木中的【角色】一職，如此一來，更加便利後面的遊戲設計了。

  • 增加蛇身後的坐標及角色建立

    • 當建立一個蛇身後(可能是吃到一個(或多個)水果)

      • 就新增一組坐標給這蛇身，增加的坐標就是原本蛇身最後一節的坐標

      • 蛇的坐標說明：【蛇X陣列】、【蛇Y陣列】兩個陣列來儲存蛇頭及蛇各節的X坐標及Y坐標 (一開始先宣告這兩個陣列)

        • (蛇X陣列(0) , 蛇Y陣列(0))為蛇頭坐標

        • (蛇X陣列(1) , 蛇Y陣列(1))為第1節蛇身的坐標..

      • 就新增一個變數(以陣列的方式：蛇身各節(蛇身長度))當角色，並將此角色創建在蛇身最後一節的坐標上

      • 建立一個【蛇身各節】的陣列來當蛇身的角色 (如前一節的說明，一開始沒有，只有在增加蛇身時才創建)

        • 蛇身各節(1) 是第1節蛇身的角色

        • 蛇身各節(2) 是第2節蛇身的角色....

        • 這些角色等增加長度後才【創建】

        • 說明如下：

      • 以下為此部份的程式

  • 增加蛇身後的蛇之移動

    • 貪吃蛇移動後的坐標變化如下圖所示：

    • 由上可知

      • 進行坐標轉換時，要從最後一節蛇身開始取前一節的坐標，

      • 看有幾節蛇身就要轉換幾次

      • 各節坐標改到新的坐標後，讓各節的角色跟著移動到新坐標上

      • 最後蛇X陣列(0)、蛇X陣列(0)再取目前蛇頭所在的X、Y坐標值

      • 以下為此部份蛇身移動的程式

    • 除了上面碰到邊緣會死掉外，這遊戲蛇頭碰到其他身體也會GAME OVER

    • 另外，如果要讓蛇移動的速度會隨著分數增加而加快，要調整最下面的暫停時間

  • 完整程式，如附件