搜尋

俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 )

這系列的教學會介紹透過 Scratch 實作「俄羅斯方塊」,這篇教學會先介紹俄羅斯方塊的遊戲原理,並繪製俄羅斯方塊遊戲中會用到的角色,以及使用清單的方式繪製背景。

相關文章參考:

快速導覽:

俄羅斯方塊遊戲原理

俄羅斯方塊遊戲是一個典型的「清單遊戲」,雖然眼睛所見的是「方塊」,但背後都是清單所組成,舉例來說,如果遊戲的長方形背景是 12x17 個方塊組成,對應的清單就會是一個有 17 個項目,每個項目裡又有 12 個子項目,每個子項目為 0 的「二維清單」

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 俄羅斯方塊遊戲原理 - 背景

如果在背景加入「方塊」,就等同在清單中加入「不為 0」的子項目,透過這些不為 0 的子項目,就能換算出方塊在背景中的長相。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 俄羅斯方塊遊戲原理 - 方塊

如果同一行的方塊擺滿了需要「消除」,就表示清單中該行的「子元素全部都不為 0」,透過清單的操作 ( 刪除該行、添加新的一行 ),就能夠將該行的方塊消除。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 俄羅斯方塊遊戲原理 - 消除

俄羅斯方塊遊戲設計重點

由於 Scratch 對於「清單」的操作較不友善,為了避免碰觸大量的清單處理功能,可以使用下列的重點進行設計:

  • 使用「實體的方塊」角色,透過鍵盤或滑鼠,操控方塊的「位置以及旋轉方向」。
  • 方塊「放置」後 ( 碰到別的方塊而停止、到達底部停止 ),使用「畫筆」將方塊「蓋印章」到舞台上
  • 使用「背景方塊」角色偵測舞台的顏色,透過顏色產生「清單」。
  • 透過「清單」判斷是否需要消除某一行,消除後,再運用清單「重新繪製」舞台上的方塊
  • 當清單的第一行有子元素,表示俄羅斯方塊遊戲結束。

繪製角色 ( 背景格子 )

建立一個名為「背景格子」的角色,繪製第一個名為「bg」的造型,使用淺灰色,放入一個 19x19 的正方形,將正方形對齊畫布中心

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製 bg 造型,產生七個依序名為「shape1~shape7」的造型,並將七個造型修改成不同顏色,這七個造型未來會是方塊的顏色。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

繪製角色 ( 方塊造型 )

建立一個名為「方塊造型」的角色,繪製第一個名為「shape1」的造型,接著複製背景格子角色的 shape1 正方形造型,貼上到方塊造型的 shape1 造型中,運用正方形組合成 T 形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

注意,T 形方塊組合後長寬是 59x39 ( 19x3=57,加上兩個中間間隔 57+2=59,19x2=38,加上一個中間間隔 38+1=39 ),中間方塊需要對齊畫布中心

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製背景格子角色的 shape2 正方形造型,貼上到方塊造型的 shape2 造型中,運用正方形組合成 L 形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製背景格子角色的 shape3 正方形造型,貼上到方塊造型的 shape3 造型中,運用正方形組合成另外一個 L 形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製背景格子角色的 shape4 正方形造型,貼上到方塊造型的 shape4 造型中,運用正方形組合成正方形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製背景格子角色的 shape5 正方形造型,貼上到方塊造型的 shape5 造型中,運用正方形組合成 Z 形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製背景格子角色的 shape6 正方形造型,貼上到方塊造型的 shape6 造型中,運用正方形組合成另外一個 Z 形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

複製背景格子角色的 shape7 正方形造型,貼上到方塊造型的 shape7 造型中,運用正方形組合成長條形的俄羅斯方塊,按照下圖,使用方塊組合出同樣的長寬以及對齊的方塊 ( 不要使用變形,單純用位置調整 )。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景格子 )

繪製角色 ( 背景外框 )

建立一個名為「背景外框」的角色,繪製一個造型,加入 254x352 的長方形,設定「不填滿」以及「有邊框」,這個角色有兩個目的,第一個是顯示俄羅斯方塊的移動範圍,第二個則是作為判斷左右邊界的功能

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 背景外框 )

繪製角色 ( 下層邊界 )

建立一個名為「下層邊界」的角色,繪製一個造型,加入 254x3 的長方形,設定「不填滿」以及「有邊框」,這個角色主要目的在於判斷是否碰觸到底部

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 繪製角色 ( 下層邊界 )

使用清單產生背景

點擊「背景方格」角色,切換到程式編輯畫面,按照下列步驟編輯程式:

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 使用清單產生背景

建立一個名為「畫背景」的函式,勾選「執行完畢再更新畫面」,按照下列步驟編輯函式內容:

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 使用清單產生背景

由於清單是使用清單搭配文字模擬「二維清單」,所以取出項目時,外層使用「清單項目」,內層使用「文字的第幾個字」

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 使用清單產生背景

完成後,在點擊綠旗的重複迴圈結束後,執行「畫背景」函式,點擊綠旗之後,舞台上就會看見畫出灰色方格背景。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 使用清單產生背景

如果要測試其他圖案,可以將部分的 0 換成 1~7 的數字,點擊綠旗後就會看見出現不同顏色的背景。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 使用清單產生背景

背景外框與下層邊界定位

能夠畫出背景方格後,接著使用下列的程式積木,將「背景外框」的角色定位,因為 bg_x 變數表示背景方格的中心點 x 座標,換算成背景外框的中心點需要使用 bg_x + 110。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 背景外框定位

使用下列的程式積木,將「下層邊界」角色,與背景外框角色的下緣貼齊,因為 bg_x 變數表示背景方格的中心點 x 座標,換算成下層邊界的中心點需要使用 bg_x + 110。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 背景外框定位

完成效果

點擊綠旗,就會看見舞台中出現俄羅斯方塊遊戲的基本介面。

Scratch 教學 - 俄羅斯方塊 ( 原理介紹、繪製角色和背景 ) - 完成效果

範例解答

範例解答:俄羅斯方塊 1 ( 繪製角色和背景 )

繼續閱讀

如果已經熟悉了俄羅斯方塊 1 ( 原理介紹、繪製角色和背景 ) 的程式,就可以繼續閱讀「俄羅斯方塊 2 ( 角色移動、碰撞偵測與修正 )」的文章。

文章連結:俄羅斯方塊 2 (角色移動、碰撞偵測與修正 )

意見回饋

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

Scratch 教學

基本介紹

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

圖形與聲音

繪製造型&背景 編輯音效

程式積木

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

擴充功能

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

技巧&觀念

全域變數、區域變數 深入理解區域變數 控制指定分身 控制所有分身的方法 雲端變數 雲端變數記錄文字 變數串接文字 判斷英文字母大小寫 中斷與停止程式 廣播訊息並等待 鍵盤與滑鼠 滑鼠點擊與長按 偵測所有鍵盤按鍵 點擊隱藏的角色 突破角色尺寸限制 角色與舞台邊界 重複積木的等待時間 音樂暫停與繼續播放 使用造型名稱建立清單 使用造型代替變數 文字轉清單 清單合併為文字 判斷兩個清單是否相同 複製清單、反轉清單 清單數字排序 清單最大值最小值

入門範例

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

進階範例

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

視覺特效範例

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

繪圖範例

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

物理&模擬範例

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

入門遊戲範例

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

進階遊戲範例

青蛙過河 青蛙過馬路 反彈球 ( 乒乓球 ) 打磚塊 狙擊氣球 ( 兩倍變焦 ) Flappy Bird Flappy Bird ( 聲控版 ) 走迷宮 ( 基本 ) 大型迷宮 ( 鍵盤控制 ) 大型迷宮 ( 滑鼠控制 ) 翻卡記憶遊戲 翻卡記憶遊戲 ( 改良版 ) 井字棋 ( 圈圈叉叉 ) 九宮格拼圖 九宮格拼圖 ( 改良版 ) 音階記憶 貪吃蛇 ( 分身版 ) 貪吃蛇 ( 畫筆版 ) 小雞下樓梯 拉霸機

團康遊戲範例

搖骰子 ( 1~3 個 ) 比手畫腳 ( 猜動物 ) 音樂傳球遊戲 大聲公 ( 比賽誰的氣長 ) 抽籤 ( 可調整中籤數量 ) 轉盤指針 ( 指到誰就當鬼 ) 倒數計時器 ( 基本版 ) 倒數計時器 ( 大數字版 )

遊戲設計技巧

角色 ( 地上移動 ) 角色 ( 蹲下、左右轉 ) 角色 ( 跳耀、兩段跳 ) 角色 ( 牆壁、爬牆 ) 地圖 ( 清單轉換 ) 地圖 ( 二維陣列 ) 地圖 ( 控制移動 ) 地圖 ( 牆壁碰撞偵測 ) 地圖 ( 吃東西偵測 ) 俄羅斯方塊 ( 角色與背景 ) 俄羅斯方塊 ( 移動與碰撞 ) 俄羅斯方塊 ( 放置方塊 ) 俄羅斯方塊 ( 消除完成方塊 ) 俄羅斯方塊 ( 下個形狀 )