簡明 Scratch 小遊戲開發入門教學


Posted by KD Chang on 2020-06-29

前言

Scratch 是由 MIT 麻省理工媒體實驗室所開發的拖拉式積木程式語言(吉祥物是一個狸貓?),讓使用者透過拖拉程式積木元件的方式就可以撰寫小遊戲和動畫以及小型應用程式。由於 Scratch 入門容易直覺,但卻包含了許多程式邏輯的概念(例如:變數宣告、條件判斷、迴圈、事件處理、運算、函式等),非常適合中小學生學習,所以也常用於學習程式設計邏輯和運算思維的工具。本文將透過製作一個蝙蝠吃香蕉小遊戲(亦可以自行修改成其他動物)來介紹如何使用 Scratch 來進行開發和製作小遊戲。

以下是文章的主要會涵蓋的部分:

  1. 開發環境介紹
  2. 規劃遊戲設定
  3. 建立遊戲環境
  4. 編寫程式邏輯

開發環境介紹

Scratch 可以除了可以使用離線版本外也可以透過網頁編輯器進行編輯十分方便。

首先,我們先來認識 Scratch 線上版的開發環境。進入到 Scratch 官方網站後可以註冊會員,登入後會呈現以下畫面:

當我們選擇創建專案的按鈕後進入程式編輯器中:

我們可以看到中間為主要角色和背景舞台編輯區,程式呈現畫面由舞台(stage)和角色(sprite)所組成,左邊為程式積木和元件區塊,可以將積木拖曳至程式區即可執行。

在 Scratch 中主要有以下程式積木元件:

  1. 動作:角色移動、隨機定位等操作
  2. 外觀:佈景舞台、角色圖片轉換等外觀變化等操作
  3. 音效:產生音效等操作
  4. 事件:事件處理等操作
  5. 控制:條件控制、迴圈等操作
  6. 偵測:接收使用者輸入、碰撞偵測等操作
  7. 運算:邏輯運算等操作
  8. 變數:宣告變數、賦值變數等操作
  9. 函式積木:函式等操作

呈現的結果則在呈現結果區呈現,若需要新增/設定角色,角色區設定,另外背景舞台可以在背景舞台處設定。

當我們點選新增角色按鈕則可以創建新角色:

當我們點選擴充元件按鈕則可以載入其他非預設元件:

選擇舞台:

新增註解:

規劃遊戲設定

在這裡我們希望規劃一個簡單的小遊戲:蝙蝠吃香蕉小遊戲。

這個小遊戲規則為玩家在 60 秒時間內可以使用鍵盤上下左右操控蝙蝠,當碰撞到香蕉時則分數累加 10 點,時間結束後看累計多少分數。

最終小遊戲呈現結果:

建立遊戲環境

創建角色:

設定舞台:

創建角色(創建香蕉和蝙蝠)和舞台(Blue Sky):

編寫程式邏輯

宣告變數,點選建立一個變數 scorestimes 分別紀錄分數和時間:

接著我們可以點選舞台、角色分別拖拉嵌入程式積木:

佈景舞台程式區塊程式邏輯:

監聽開始旗子被點擊事件

初始化 scores 變數 0
初始化 times 變數為 60

發送廣播訊息 game_start

執行迴圈(跳出條件為 times = 0)
    變數減少 1 (-1)
    等待 1 秒(代表有 stop 過 1 秒鐘)

停止全部動作

最後程式積木:

香蕉角色程式區塊:

監聽 game_start 廣播事件

執行迴圈(跳出條件為 times = 0)
    移動滑行 1 秒到隨機位置
    監聽碰撞事件如果碰到蝙蝠
        則分數增加 10

停止全部動作

最後程式積木:

蝙蝠程式區塊:

監聽 game_start 廣播事件

執行迴圈(跳出條件為 times = 0)
    監聽鍵盤向上
        則 y 軸增加 10 單位
    監聽鍵盤向下
        則 y 軸增加 -10 單位
    監聽鍵盤向右
        則 x 軸增加 10 單位
    監聽鍵盤向左
        則 x 軸增加 -10 單位

停止全部動作

最後程式積木:

若程式區塊都已經完成,當我們點擊綠色旗子即可執行程式!

遊戲成果:

總結

以上透過一個 Scratch 簡單小遊戲範例說明 Scratch 環境和使用方式。雖然 Scratch 入門容易直覺,但卻包含了許多程式邏輯的概念(例如:變數宣告、條件判斷、迴圈、事件處理、運算、函式等),非常適合中小學生學習,所以也常用於學習程式設計邏輯和運算思維的工具,也適合展示給初學者一些程式邏輯的基本概念,自娛娛人。

參考文件

  1. Scratch wiki

#scratch #教學 #scratch 教學 #tutorial









Related Posts

layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框

layer-list 應用 - 愛奇藝和當貝市場的 QR Code 掃描外框

React 增進效能,避免重複渲染 Rerender

React 增進效能,避免重複渲染 Rerender

React-[核心篇]- 元件 &元件實例&React Element

React-[核心篇]- 元件 &元件實例&React Element




Newsletter




Comments