05 超級瑪琍遊戲

(2019/12/05)

整整花了兩天的時間，把Arcade官網的Jumpy Platformer遊戲的程式抽絲剝繭的整理了一下，發現專家寫程式的方式是運用了很多函式，就是把程式拆解分割成很多區塊一樣，也透過整理這程式的過程當中，雖然還有一些不是很了解，但也學到了很多技巧及積木的使用，對於入門的夥伴，這文章應該可以大大的增加一些功力，有興趣的一起來吧！

本遊戲線上玩：https://makecode.com/_Xs9aWe4DpXLm

（2020/01/06）由於原始程式太複雜，所以教學時，做了一個簡易版，學生較能接受！(程式於附件)

簡易版線上玩：https://makecode.com/_8aCKt3cC6KFy

一、取得程式

• 完全不用寫程式，直接從下圖來取得程式 (Jumpy Platformer)

• 打開範例

二、遊戲說明：

• 遊戲畫面

• 遊戲初始值：
  • 分數為0 (右上角的數字為分數)，每吃到一個金幣就得1分。
  • 一開始有3個生命值，當生命值為0時就GAME OVER。
• 舞台背景：
  • 這有一個長條型的背景圖，而且有6個關卡
• 各角色說明：一共有3個角色，拆解如下：
  • 主角(hero)：可按左右鍵左右移動，也可按向上鍵或A鍵向上移動。
  • 金幣(coin)：金幣會出現在台上，主角碰到金幣就得1分，且金幣會消失。
  • 敵人一(Bumper)：通常會在舞台下方左右移動，如果主角被敵人碰到就會減少1個生命值，當生命值為0時就GAME OVER。
  • 敵人二(Flier)：通常會在舞台上方左右移動，如果主角被敵人碰到就會減少1個生命值，當生命值為0時就GAME OVER。
• 遊戲玩法說明：
  • 利用按鍵讓主角向上或向右移動，要多吃金幣，並且避免被敵人碰到，碰到旗子就過一關。

三、程式解析：

由於這是官方提供的遊戲，且都可以看到程式，因此利用官方提供的程式來學習如何寫這相關的遊戲。

• 當啟動時的內容，也就是程式一開始的部份

• 說明：
  1. 建立一個hero角色，也就是主角，hero的大小為16X16
     1. 設定變數 invincibilityPeriod(無敵期間?)為0.6(秒) ( invincibilityPeriod是被敵人碰到時的暫停時間！)
     2. 設定變數 pixelsToMeters(像素到公尺?)為30 (pixelsToMeters這是做什麼用?)
     3. 設定變數 gravity(重力加速度)為9.81* pixelsToMeters=294.3 (重力加速度為何這樣計算？)
     4. 設定變數 levelMaps(關卡地圖)為6張圖的陣列，每張圖為一個關卡
     5. 呼叫initializeAnimations(起始動畫)函數
     6. 呼叫initializeScene(起始場景)函數
     7. 呼叫createPlayer(hero)(創造hero玩家)函數
     8. 呼叫initializeLevel(currentLevel)(起始關卡(目前關卡))函數
     9. 呼叫giveIntroduction(介紹)函數
• 關卡地圖說明

• 備註：大小有32(格)X8(格)；每格有16X16的大小
• 主角(hero)是白點
• 剖析 initializeAnimations(起始動畫)函數

1. 呼叫initializeHeroAnimations(開始主角動畫)函數
2. 呼叫initializeCoinAnimations(開始金幣動畫)函數
3. 呼叫initializeFlierAnimations(開始傳單(敵人二)動畫)函數
• initializeHeroAnimations(開始主角動畫)函數

• 呼叫initializeCoinAnimations(開始金幣動畫)函數

• 呼叫initializeFlierAnimations(開始傳單(敵人二)動畫)函數 (第三關才會出現)

• 以上這些函式，不寫這麼多函式，全部集合在一起也可以

剖析 initializeScene(起始場景)函數

牆面的大小為16X16

上面程式列了很多顏色，但很多顏色沒有用到

• 剖析 createPlayer(hero)(創造hero玩家)函數

• gravity變數的值為294.3 (也可直接設300)
• 這也是有關主角(hero)的程式，也都可以直接放在｢當啟動】的程式內
• 深度(z)設為5，不知為何要設這個？
• 剖析 initializeLevel(currentLevel)(起始關卡(目前關卡))函數

1. 呼叫clearGame (清除遊戲)函式

• 最主要在清除舞台上的所有角色(敵人一、金幣、旗幟、敵人二)
• 計次取值的用法說明，以敵人一的計次取值來說明
  • value4為一個變數
  • 前方為一個陣列，這邊的陣列是類別為Bumper的【角色陣列】
  • 計次取值積木一共會執行陣列中個數的次數
    • 第1次，value4變數代表第1個角色變數
    • 第2次，value4變數代表第2個角色變數
    • 第3次，value4變數代表第3個角色變數
    • ....一直到陣列的個數
  • 執行角色摧毁的動作，也就是清除所有角色
1. 設地圖
   • 地圖製作
     • 貼圖地圖設為【地圖的圖形】(此地圖的圖形，長x高表示的是格子數，每格的大小為16X16)
     • 貼圖顏色(什麼顏色) 設為 ( 什麼圖案 ) 牆面使用 (開或關) (開表不能穿牆，關則可以穿牆)
2. 開始時增加雲朵效果
3. 角色hero(主角)放在【白色】的貼圖上
4. 呼叫createEnemies (創造敵人)函式

1. 此計次取值的陣列是貼圖類別為紅色的陣列，value可看做【貼圖變數】
2. 這時才創建敵人一(bumper)的角色及圖案，類別為Bumper，大小一樣為16X16
3. 【貼圖變數】(可以表示位置或顏色) 的上方放置角色bumper
4. 設重力加速度，所以此角色都只在最下方移動
5. 隨機左右移動，只有一開始的左右方向而已。 此計次取值迴圈跑完，就會產生Bumper類別的角色陣列
6. 此計次取值的陣列是貼圖類別為淺紅色的陣列，value2可看做【貼圖變數】，同上會產生Flier類別的角色陣列
7. 同上
8. 同上
9. 將動畫變數flierFlying 附加到角色flier上
10. 將動畫變數動作flierIdle 附加到角色flier上
1. 呼叫spawnGoals (產生目標)函式

1. 旗幟角色(沒有另外建一個角色名稱)放在咖啡色的貼圖上，大小一樣16X16
2. 此計次取值的陣列是貼圖類別為黃色的陣列，value3可看做【貼圖變數】
3. 創建coin的角色變數及圖案，類別為Coin，大小一樣為16X16
4. 【貼圖變數】(可以表示位置或顏色) 的上方放置角色coin
5. 將動畫變數coinAnimation 附加到角色coin上
6. coin角色使用動畫動作Idle

• 剖析giveIntroduction(介紹)函數

• 呼叫showInstruction函式

• 當遊戲更新時
  • 主角的動作

• 敵人一的動作

• 敵人一會一直左右移動
• 敵人二的動作

• 也就是當靠近敵人二時，敵人二自動親近過來
• 主角碰到底部時可雙跳

• 碰到底部時，才能再DoubleJump (在空中再跳一次)
• 當主角(hero)碰到別人時
  • 碰到目標(旗幟)時

• 當碰到敵人一時

• 當碰到敵人二時

• 當碰到金幣時

• 按上下鍵或A鍵時

• 呼叫 attemptJump

四、從這遊戲程式學到的基本知識：

• 函式的使用
  • 本遊戲版本大量的運用到自建函式，也就是大量的將程式拆解分割成區塊化
  • 這邊的函式有兩種，一種是不帶參數的函式，一種是帶參數的函式，這參數可以是數字、也可以是文字。
• 動畫製作
  • 建立動畫角色
    1. 先建立一個角色(如mysprite)，並設定角色圖案及類別
    2. 再建立一個動畫變數(如anim)，並設定動畫動作(如Walking、Idle、Jumping)及間隔時間 (此類動畫積木要透過擴展才可得到)
    3. 添加影格(圖案)到動畫變數 (影格圖案可能有多個)
    4. 將動畫變數(anim)附加到角色上(如mysprite) 3、4位置可互換
  • 激活動畫動作
    • 動畫(某動畫動作名稱(如Walking)) 激活 某角色 (如mysprite)
  • 由上可知變數有：
    • 角色變數(如mysprite)
    • 動畫變數(如anim)
    • 動畫動作(如Walking)
• 好多變數
  • 角色變數
  • 動畫變數，這動畫變數最後要附加到某個角色下才有用，並透過激活來產生動畫
  • 貼圖變數，這變數可以是位置或顏色
• 地圖製作
  • 貼圖地圖設為【地圖的圖形】(此地圖的圖形，長x高表示的是格子數，每格的大小為16X16)
  • 貼圖顏色(什麼顏色) 設為 ( 什麼圖案 ) 牆面使用 (開或關) (開表不能穿牆，關則可以穿牆)
• 計次取值的用法說明
  • 後方的value為一個變數
  • 前方為一個陣列
  • 計次取值積木一共會執行陣列中個數的次數
    • 第1次，value變數代表第1個陣列的值
    • 第2次，value變數代表第2個陣列的值
    • 第3次，value變數代表第3個陣列的值
    • ....一直到陣列的個數
• 牆的各方位圖