搜尋

井字棋 ( 圈圈叉叉 )

這篇文章使用 Scratch 的清單、分身、畫筆,搭配全域變數和區域變數的概念,實作俗稱「圈圈叉叉、Tic-Tac-Toe、OOXX」的「井字棋」遊戲。

快速導覽:

繪製角色和背景

背景的「井字形」會畫在舞台的背景中,點擊畫面右下角的「舞台」,使用「直線」在背景中繪製「井」的形狀,範例中的井字尺寸為 270x270。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 使用「直線」在背景中繪製「井」的形狀

回到角色面板,使用繪畫方式建立新角色「bg」,這個角色是背景方塊,負責偵測玩家「點擊了哪個格子」,繪製正方形後對齊畫布中心點,尺寸根據背景井字形做調整,bg 的顏色可以自訂,範例中使用灰色 77x77 的正方形。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 偵測玩家「點擊了哪個格子」

下圖呈現 bg 背景方塊和背景井字的相對尺寸與位置。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 背景方塊和背景井字的相對尺寸與位置

建立第二個角色「ooxx」,這個角色是玩家要擺放的 O 或 X,角色有兩個造型,造型紅色「O」的名稱是 o,造型綠色「X」的名稱是 x。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 玩家要擺放的 O 或 X,角色有兩個造型

下圖呈現 ooxx 圈叉圖案方塊和背景井字的相對尺寸與位置。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 圈叉圖案方塊和背景井字的相對尺寸與位置

建立第三個角色「ok」,這個角色是當 O 或 X 連成一線時,要出現的連接線段,該角色使用橘色直線繪製,共有四種造型,分別是垂直、水平、左上右下和右下左上。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 圈叉圖案方塊和背景井字的相對尺寸與位置

下圖呈現 ok 完成線段和背景井字的相對尺寸與位置。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 圈叉圖案方塊和背景井字的相對尺寸與位置

井字棋勝利原理

井字棋只要三個 O 或三個 X 排成一直線就獲得勝利,根據這個勝利原理,如果將井字棋的九宮格分成 1~9 九個數字,可以產生「八組」勝利的清單項目,只要玩家點擊後,符合勝利清單裡的項目,玩家就獲得勝利

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 符合勝利清單裡的項目,玩家就獲得勝利

程式原理 ( bg 背景方塊 )

編輯「bg 背景方塊」角色的程式,建立 play_list 清單,使用重複九次積木建立九個「空項目」,負責記錄玩家點擊的位置,接著建立 ok_list 清單,加入八個勝利的清單項目:123、456、789、147、258、369、159、357。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 加入八個勝利的清單項目

建立「分身偵測方塊」函式,勾選「執行完畢再更新畫面」。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 建立「分身偵測方塊」函式

函式內容主要負責「建立九個分身」,將分身分別定位在井字形的九宮格裡,並新增 pos 變數紀錄玩家點擊的位置。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 建立九個分身

建立「pos_local」變數,設定變數為「僅適用當前角色」的區域變數。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 僅適用當前角色

當分身產生時,顯示分身並將分身設定為全透明,接著運用全域變數 pos 和區域變數 pos_local 互相搭配,讓每個分身的 pos_local 都紀錄不同的數值,如此一來就能在點擊分身時,透過廣播傳送不同的 pos_local 內容

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 透過廣播傳送不同的 pos_local 內容

程式原理 ( ooxx 圈叉圖案 )

編輯「ooxx 圈叉圖案」角色程式,點擊綠旗時,將角色設定到最前方 ( 避免被遮住 ) 並使用重複迴圈讓角色跟隨滑鼠。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 使用重複迴圈讓角色跟隨滑鼠

新增「點擊蓋章」函式,函式具有 pos、x 和 y 三個參數,並勾選「執行完畢再更新畫面」。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 「點擊蓋章」函式,函式具有 pos、x 和 y 三個參數

當收到廣播 1~9 的訊號時,分別執行對應參數的函式,函式內容根據 x 和 y 參數,將角色瞬間移動到指定的位置並蓋章,接著將 play_list 清單裡的指定位置,替換成目前玩家的造型,舉例來說,使用 O 的玩家在第 2 格點擊,play_list 的第二個項目就會變成 o。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 分別執行對應參數的函式,函式內容根據 x 和 y 參數

下圖顯示進行到這一步的效果。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 顯示進行到這一步的效果

新增「判斷勝利」函式,勾選「執行完畢再更新畫面」。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 新增「判斷勝利」函式

「判斷勝利」函式內容使用變數 y 依序取出 play_list 和 ok_list 的八個項目,使用變數 x 取出 ok_list 特定項目三個數字的每個數字。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 「判斷勝利」函式內容

透過重複八次依序取得 play_list 和 ok_list 清單中的項目,再透過重複三次迴圈,將 ok_list 的勝利位置對照 play_list 的項目,如果勝利的位置都是 O 或都是 X,表示某一方勝利,此時就發送勝利的位置以及 win 的廣播訊號。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 「判斷勝利」函式內容

回頭編輯「點擊蓋章」函式,使用邏輯判斷如果 play_list 某個項目如果是空的,才能點擊,點擊時執行「判斷勝利」函式。

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 「判斷勝利」函式內容

程式原理 ( ok 完成線段 )

編輯「ok 完成線段」角色程式,點擊綠旗的時候隱藏角色,接著根據收到不同的勝利訊息,切換成不同的造型以及位置,並設定為半透明,就能在某一方勝利時,在圖案上方加上直線。

注意,因為使用「停止全部」會造成半透明效果失效,因此此處使用蓋章的方式顯示直線

Scratch 教學 - 井字棋 ( 圈圈叉叉 ) - 「判斷勝利」函式內容

完成效果

完成後,點擊綠旗,就可以和別人一起進行井字棋遊戲囉。

Scratch 教學 - 井字棋 ( 圈圈叉叉 )

範例解答

範例解答:井字棋 ( 圈圈叉叉 )

意見回饋

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

Scratch 教學

基本介紹

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

圖形與聲音

繪製造型&背景 編輯音效

程式積木

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

擴充功能

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

技巧&觀念

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

入門範例

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

進階範例

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

視覺特效範例

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

繪圖範例

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

物理&模擬範例

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

入門遊戲範例

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

進階遊戲範例

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

團康遊戲範例

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

遊戲設計技巧

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