First Scratch Project for CS50
此為 CS50 2016 Week0 課程中，第一週 Scratch 作業的製作記錄。Scratch 是麻省理工大學所開發的一套電腦程式語言開發平台，使用程式積木去開發創作。
- 至少有兩個長的不一樣的角色 (Sprites)
- 至少有三組腳本 (Scripts)
- 至少有一個條件判斷 (Condition)，一組迴圈 (Loop)，一個變數 (Variable)
- 至少有一組聲音
- 要比課堂上的演示範例還要複雜，可以比範例遊戲皮卡丘遊戲簡單。因此作業應該要用到數十個程式積木 (Puzzle pieces)。
作業需求只有以上限制，題材內容做法完全沒有限制。這算是難倒我了，一開始根本不知道最終要做什麼東西，也沒有想法從零開始做些什麼，閱讀完題目說明後，多出許多的問題啊，我該做些什麼？我從什麼地方開始？課程說明建議先看看別人的創作，再去想想思考要做些什麼，從 Google 搜尋 CS50 Week0，看了一兩個 Scratch 創作還是沒有什麼想法，有點小氣餒。
Getting Start
於是乎，從作業需求尋找開始的方法吧，「至少需要兩組角色」，看到開始專案已經存在一隻貓的角色，那就再新增另一隻角色。從 Scratch 圖庫中看到有動物分類，心想有貓那就再新增一條狗吧，狗跟貓是仇敵的刻板印象，也許可以做些什麼。
不知道要做什麼的我，突然冒出一個想法：讓讓狗開始左右移動吧，於是拉了一組持續左右移動碰到牆必反彈的腳本：
看這樣有點單調，想說用點隨機亂數產生變化，看起來會不太一樣，這樣還增加程式積木的使用量，進一步達成作業需求。初始化先隨機設定位置，並且讓狗的朝向也能夠亂數決定。執行起來感覺相當的不錯，每次按下綠旗開始都不太一樣。
接下來想讓自己可以控制貓咪的移動，當按下方向鍵，能夠使得貓咪往按鍵方向位移。一開始先用巢狀結構「如果否則」來製作控制腳本：
可這當兩個方向鍵一起按下時（例如下以及左），這貓的移動方向只能往同一個位置，這算是一個小臭蟲 (Bug)。因此改成四個「如果」來控制，執行的結果能夠很平滑的控制貓的移動。
貓會動了，狗也會動了，接下來直覺想到，狗撞到貓應該做一些事情，也許，讓狗叫吧，並且發出廣播通知狗撞到貓。
這狗的腳本越來越複雜了，這時候開始使用自訂積木（Custom Functions）來嘗試讓腳本簡潔，希望讓處理事件的腳本中，積木不要太多，太複雜不容易閱讀編輯：
開始有點遊戲的感覺的，玩家控制貓，若撞到狗會發生一些事件，可是這狗只有一隻覺得有點少，不能動態產生多隻的狗嗎？弄一個迴圈腳本，動態建立狗的分身，然後新增事件處理，當分身建立時，設定位置並且持續移動以及檢查是否有撞到貓：
越來越朝向遊戲方向開發了，想到玩家應該要控制貓達成什麼目標，否則會讓玩家不知道要做什麼。直覺想到放一隻魚物件，貓吃到（碰到）魚就叫一聲喵，顯示開心的訊息框，並廣播吃到魚的事件，之後也許可以做些關卡的處理。另外為了避免碰到魚後，一直反覆執行喵喵聲，還需要加註一個變數來設定，若碰到魚就不再判斷，且玩家也不能夠再控制了。
在反覆測試以上腳本時，注意到貓的位置一直改變，會停留在最後一次遊戲的位置，感覺手動拉貓的位置很麻煩，該是時候加入初始位置設定了。在旗幟按下時，設定貓咪的初始位置。並且為了趣味性，讓貓跳出想著魚的思考框，提示玩家要做些什麼：
多測試幾次後，覺得狗移動有點單調，狗依照固定速率 (Speed) 位移，若能加入不同速率的功能在裡面，變不會如此單調且也提高挑戰性。因此開設一個「僅適用這個角色（Local variable）」的區域變數，名為速度。即是每一隻狗分身，都有一個速度變數，在開始前隨機設定速度變數，然後每次位移時使用該變數， 讓狗隨機速度移動：
Creating Game
腳本寫到此，應該開始規劃遊戲的難度變化了，除此之外增加生命數量元素，不讓玩家可以一直重複挑戰，該生命元素來可以拿來當作遊戲結束的判斷。
透過 Google 找到生命顯示所需的老套愛心，稍微使用 Paint.Net 這套筆小畫家還要強的免費編輯軟體編輯，便開始撰寫生命顯示的腳本。演算法想法很簡單，一顆愛心表示一條命，如果一開始有三條命，那麼建立三個分身即可。每次失去一條生命，便切換對應愛心的造型，由滿愛心變成空愛心。要做到如此功能，需要紀錄愛心編號，透過編號 N 來判斷玩家還有沒有 N 條生命。因此每次創造愛心分身時，先紀錄記錄編號，然後一個無窮迴圈監測什麼時候要切換造型：
有了生命顯示器之後，再來就是要處理失去生命這件事啦，之前所建立廣播事件「狗撞到貓」便可以拿出來使用了。在舞台中建立收到訊息的腳本，扣除一條生命，並發出其他待會可能會用到的訊息。這麼一來狗撞到貓變會扣生命，生命顯示器也能夠正常運作。
但是出現了一個臭蟲，當狗要咬住貓後，會一直扣血啊！原因是狗撞到貓後，下一次更新判斷又撞到，所以一直扣血。因此在貓加上一組腳本，讓貓被狗咬後，回到原始的位置。之前建立程式積木可以拿來重複利用：
再來是比較麻煩的關卡元素，隨著關卡的進行，要增加變化以及難度…。我很沒有創意的想不出有什麼變化，且變化表示還要做很多工夫。直覺最簡單的方式在不同關卡中，增加狗的數量就好，越多隻狗越難，而且程式也應該不會太難想太複雜吧。
先把原先建立狗分身的腳本，從狗角色的旗子開始搬移到舞台去，自訂一個建立特定狗分身的程式積木，建立一個重建關卡的積木，在旗子按下先建立初始關卡，讓這個搬移後的新腳本，跟原本的腳本執行起來一樣：
再來處理新關卡的廣播，新關卡時，狗要先刪除舊分身，貓要重新設定位置。此外貓在旗子開始執行的條件迴圈，當吃到魚就不再能控制，也要跟著調整，改成無窮迴圈一直執行讓玩家控制以及吃到魚的判斷。
此外讓貓咪吃到魚時，表示完成該關卡，因此主流程加入處理吃到魚的訊息，執行進入下一關的腳本：
最後，玩起來發現還缺少一個結束的處理，沒有生命的事件處理。關於遊戲結束畫面的處理啊，直接換一個遊戲結束的背景，把所有的角色隱藏，分身刪除就可以了吧？最簡單的方式。於是乎每個角色都有一段刪除分身以及隱藏的處理。
Adding Animations
還能再增加什麼呢？看到貓以及狗在移動的過程中，沒有動畫感覺有點弱。若增加移動的動畫，感覺應該還是不錯的視覺效果。需求是讓移動改變造型，狗移動越快，動畫越快。
想法很簡單，用一個記步器來達成，該記步器記錄角色已經移動多少位置。當角色已經走了 n 步數時，就切換下一個造型，如此一來，移動越快的狗角色，會越快切換造型動畫。然後其記步器就重新計算，待下一次切換造型條件達成。實際上的執行的效果不錯呢。
Summary
從零開始創作不容易呢，一開始完全不知道要做什麼，摸索過程花費不少時間啊，尤其是 Scratch 不熟悉，有些想要達成的功能，還是得靠 Google 大神啊。一步步嘗試以及測試，終於完成這款有點像樣的遊戲創作。
Scratch 是一個挺有趣的程式設計工具，不用去記憶程式語言的語法，使用程式積木組合就可以做出程式，是初學者練習電腦思維 (Computing thinking) 的不錯起手方式。如果是程式語言開始學習，若方式不好又沒有引導，在學習過程中，學習的興趣就可能死在程式語法了吧。
沒有留言: