搜尋

繪製地圖 ( 牆壁碰撞偵測 )

這篇文章延續「繪製地圖 ( 控制移動 )」文章,搭配廣播訊息和邏輯判斷,實作角色在地圖中移動,並且會被牆壁阻擋無法前進的效果。

相關文章參考:

開啟範例

開啟「繪製地圖 ( 控制移動 )」的範例,從這個範例進行修改。

範例連結:https://scratch.mit.edu/projects/573885280/

積木程式原理 ( 更新地圖 )

開啟範例後,先將 source 清單顯示在舞台中,並將 source 的內容清空。

清空的方式可以在積木清單裡,找到「刪除清單的所有項目」積木,下拉選單選擇 source,選擇後點擊該積木,就可以在不使用該積木的狀態下,將 source 的內容清空

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

使用試算表編輯地圖的陣列 ( 參考 繪製地圖 ( 二維陣列 ) ),並下載為 CSV,開啟 CSV 檔案,在每一行的前後加上雙引號。

也可以直接使用 CSV 範例:檔案下載

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

從舞台上,將 CSV 檔案匯入 source 清單。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

點擊綠旗,在舞台上可以看到二維陣列產生的地圖。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

積木程式原理 ( 修改造型 )

切換到造型頁籤,將原本 a 和 b 的造型,更名為 wall 和 floor ( 方便後續識別 ),將 wall 調整為灰底黑框,floor 調整為白底。

加入邊框後,長寬會變大,要再手動將長寬調整為 24x24

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

造型編輯完成後,點擊綠旗,舞台上就會變成有牆壁的地圖。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

積木程式原理 ( 橘色球 )

回到角色面板,使用繪圖功能,新增一個 ball 的角色 ( 橘色原形、尺寸設定 24x24、對齊畫布中心 )

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

切換到程式頁籤,新增 x 和 y 變數,在點擊綠旗時,將 ball 移動到最上層,並將 x 設定為 12,y 設定為 0,將 ball 定位到 (x, y) 的位置。

為什麼要使用 x 和 y 變數?因為待會會透過這兩個變數判斷是否碰到牆壁。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

完成後,點擊綠旗,橘色球就會出現在地圖裡。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

積木程式原理 ( 碰到牆壁 )

點擊正方形 box 的角色,按照下圖,修改「顯示」函式:

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

新增一個 state 變數,作為紀錄鍵盤按鍵狀態使用,在按下上下左右鍵時,分別將 state 設定為 up、down、left 和 right

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

編輯收到 wall 訊息的程式:

在牆壁角色蓋印章的過程中,如果發現 ball 在牆壁的座標,就會執行反方向的動作,由於函式勾選了「執行完畢再更新畫面」,所有的動作會在一瞬間完成,所以就像撞到牆壁,然後被牆壁卡住

為什麼要額外用變數 state 呢?因為如果將反向移動的程式寫在移動的函式裡,由於執行順序的限制,會出現上下移動與左右移動互相干擾的狀況,所以使用 state 來避開這個問題

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

最後,點擊 ball 角色,替 ball 角色加入碰到就講話的效果。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

完成效果

完成後,點擊綠旗,按下鍵盤的上下左右,彷彿在控制橘色球在移動 ( 橘色球不動,但是地圖在動 ),然後橘色求如果碰到牆壁會被卡住,並講出「Oh!!!!」的文字。

Scratch 3 教學 - 繪製地圖 ( 牆壁碰撞偵測 )

範例解答

範例解答:繪製地圖 ( 牆壁碰撞偵測 )

繼續閱讀

如果已經熟悉了繪製地圖 ( 牆壁碰撞偵測 ) 的程式,就可以繼續閱讀「繪製地圖 ( 吃東西偵測 )」的文章。

文章連結:繪製地圖 ( 吃東西偵測 )

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

Scratch 3 教學

基本介紹

關於 Scratch 3 使用 Scratch 3 註冊與登入 操作介面 我的東西

圖形與聲音

繪製造型&背景 編輯音效

程式積木

積木種類 動作 外觀 音效 事件 控制 偵測 運算 變數 清單 函式積木

擴充功能

音樂 畫筆 視訊偵測 文字轉語音 翻譯

技巧&觀念

全域變數、區域變數 控制指定分身 雲端變數 雲端變數記錄文字 變數串接文字 文字轉清單 中斷與停止程式 廣播訊息並等待 鍵盤與滑鼠 突破角色尺寸限制 角色與舞台邊界 重複積木的等待時間 清單數字排序 清單最大值最小值

入門範例

鍵盤控制貓咪 指向中間的箭頭 水果音樂鋼琴 貓咪的影分身之術 貓咪的細胞分裂 螃蟹跑來跑去 吃水果 摸蝴蝶 小狗追棒球 魚兒水中游 小鳥往前飛 舞棍阿伯 小時鐘 搖骰子 轉動的眼球 抽獎輪盤 大樂透電腦選號 移動到邊緣切換場景 人物依序跳舞 ( 廣播 ) 按鈕控制貓咪 ( 廣播 )

進階範例

貓咪跑步 ( 連續背景 ) 貓咪跑步 ( 超長背景 ) 大型數字 ( 圖形數字 ) 拖拉怪獸碰撞牆壁 鍵盤鋼琴 ( 記錄音符 ) 中文字逐字稿 英文字逐字稿 計算機 1 ( 顯示數字 ) 計算機 2 ( 加減乘除 ) 雲端聊天室 推貓咪 ( 視訊偵測 ) 圍捕小魚 ( 視訊偵測 ) 戳泡泡 ( 視訊偵測 )

視覺特效範例

視差效果 水中吐泡泡 雪花隨風飄 鍵盤鋼琴 ( 音符動畫 ) 無限循環畫中畫 水底探照燈 狙擊望遠鏡 ( 兩倍變焦 ) 貓咪萬花筒 仙女棒 ( 光跡效果 ) 駭客任務背景特效 放煙火 1 ( 往上發射 ) 放煙火 2 ( 爆炸效果 )

繪圖範例

鏡射畫圖 ( 對稱圖形 ) 小畫家 ( 舞台上畫圖 ) 記錄畫圖軌跡 繪製圓形 繪製橢圓形 繪製立方體 ( 會動 ) 繪製正多邊形 繪製正多角星形 ( 單純 ) 繪製正多角星形 ( 多線 ) 繪製拋物線 繪製折線圖 蜘蛛結網 ( 八邊形網 ) 繪製舞台方格 繪製正弦波形 ( sin ) 正弦波毛毛蟲動畫 顯示聲波圖形

物理&模擬範例

鐘擺運動 簡單磁鐵效果 兩個磁鐵的磁力線 立體空間 ( 三度空間 ) 循跡移動 拋物線發射炮彈 地球繞著太陽轉 彈跳的籃球 電風扇 ( 控制強度 ) 拉不走的彈力球 慣性移動 ( 滑鼠 ) 慣性移動 ( 鍵盤 )

入門遊戲範例

猴子接香蕉 打地鼠 刮刮樂 吹風機吹頭髮 太空狗閃躲隕石 九九乘法測驗 英文單字測驗 釣魚遊戲 拍西瓜 ( 儲存最高分 ) 形狀配對拼圖 台灣地圖拼圖 英文打字機 射擊外星人 猜數字 ( 猜大小 ) 猜數字 ( 幾 A 幾 B ) 連連看 ( 產生器 ) 連連看

進階遊戲範例

青蛙過河 青蛙過馬路 反彈球 ( 乒乓球 ) 打磚塊 狙擊氣球 ( 兩倍變焦 ) Flappy Bird 走迷宮 ( 基本 ) 大型迷宮 ( 鍵盤控制 ) 大型迷宮 ( 滑鼠控制 ) 翻翻卡 ( 卡牌記憶 ) 九宮格拼圖 音階記憶 貪吃蛇 小雞下樓梯

遊戲設計技巧

角色 ( 地上移動 ) 角色 ( 蹲下、左右轉 ) 角色 ( 跳耀、兩段跳 ) 角色 ( 牆壁、爬牆 ) 地圖 ( 清單轉換 ) 地圖 ( 二維陣列 ) 地圖 ( 控制移動 ) 地圖 ( 牆壁碰撞偵測 ) 地圖 ( 吃東西偵測 )