雲端聊天室
這篇文章延伸「雲端變數記錄文字」文章,搭配變數、廣播訊息...等積木,實作一個線上的雲端聊天室功能,只要有註冊 Scratch 的使用者,都可以在這個範例中一對一的聊天。
開啟範例
開啟「雲端變數記錄文字」的範例,從這個範例進行修改。
角色設定
開啟範例後,將貓咪的角色更名為「Cat」,並增加另外一個螃蟹「Crab」角色 ( 參考:Scratch 角色設定 )。
點擊「螃蟹」角色,切換到「造型」頁籤,將第二個造型刪除,保留第一個造型,將高度的尺寸調整到 90~100 之間,並對齊畫布中心點 ( 因為螃蟹角色的造型比貓咪大,且沒有對齊中心 )
增加第三個角色「標題」,輸入「請選擇你的角色」這幾個文字,完成後在舞台上排列標題、貓咪和螃蟹角色 ( 如下圖 )。
積木程式原理 ( 標題 )
點擊「貓咪」角色,將下圖框起來的積木,移動到「標題」角色裡 ( 可以按右鍵複製、或放到背包裡 ),移動之後刪除這段積木。
點擊「標題」角色,加入其他程式積木:
- 點擊綠旗時:
- 定位到舞台中間偏上的位置 ( 0, 75 )。
- 新增一個變數 play 設定為 0。
- 顯示標題。
- 收到 crab 和 cat 訊息時:
- 隱藏標題。
積木程式原理 ( 貓咪 )
點擊「貓咪」角色,設定點擊綠旗時,定位在舞台中間偏左的位置。
從左側積木清單裡,將變數 code 的名稱更換為 cat_code,變數 output 的名稱更換為 cat_output,雲端變數 msg 的名稱更換為 cat_msg。
更換名稱是為了方便與螃蟹 crab 識別。
放入「當角色被點擊」積木,編輯點擊貓咪角色時的動作:
- 判斷變數 play 是否等於 0,如果等於 0 表示尚未選定角色,就執行對應的程式。
- 設定 play 為 1,表示已經選定角色。
- 將角色定位到舞台左下角 ( 165, -50 ),這個位置通常是聊天室裡自己角色的位置。
- 廣播訊息「cat」,表示點選了貓咪角色。
- 設定 cat_output 變數為「空值」( 不包含任何空白 )。
- 使用重複無限次積木,每次重複執行:
- 詢問使用者並等待,使用 cat_output 作為詢問的問題,就能夠顯示輸入的文字,並同時可以讓使用者輸入文字。
- 執行「編碼」函式。
- 設定 cat_msg 的數值為 cat_code。
- 執行「解碼」函式 ( 執行後,cat_output 的內容就會變成輸入的文字 )。
放入「收到廣播訊息 crab」的積木,編輯收到 crab 訊息的動作:
- 如果收到 crab 廣播訊息,表示使用者選擇了螃蟹角色。
- 將貓咪角色移動到舞台左上方,這個位置也是聊天室裡「對方角色」的位置。
- 使用重複無限次積木,不斷執行「解碼」函式,將雲端變數 cat_output 的內容,以文字的方式顯示在舞台裡。
積木程式原理 ( 螃蟹 )
點擊「螃蟹」角色,設定點擊綠旗時,定位在舞台中間偏左的位置。
新增一個雲端變數 crab_msg,以及 crab_code 和 crab_ouput 兩個變數。
將貓咪角色裡的「編碼」與「解碼」函式,複製到螃蟹角色裡 ( 點擊右鍵複製或放到背包裡 ),複製後將變數名稱按照下圖修改為 crab_code 和 crab_output。
繼續將貓咪角色裡的「當角色被點擊」和「收到訊息」的積木,複製到螃蟹角色裡 ( 點擊右鍵複製或放到背包裡 ),複製後將變數名稱按照下圖修改為 crab_code 和 crab_output,收到訊息改為 cat。
此處建議不使用「區域變數」( 參考:全域變數、區域變數 ),因為使用複製的方式,會造成區域變數錯亂的狀況發生,所以使用全域變數,並用名稱區隔。
完成效果
完成後,除了原本的視窗之外,使用另外一個視窗開啟這個專案,一個使用螃蟹角色,另一個使用貓咪角色,就能夠開始進行一對一的雲端聊天。
範例解答
範例解答:雲端聊天室
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~