井字棋 ( 圈圈叉叉 )
這篇文章使用 Scratch 的清單、分身、畫筆,搭配全域變數和區域變數的概念,實作俗稱「圈圈叉叉、Tic-Tac-Toe、OOXX」的「井字棋」遊戲。
快速導覽:
繪製角色和背景
背景的「井字形」會畫在舞台的背景中,點擊畫面右下角的「舞台」,使用「直線」在背景中繪製「井」的形狀,範例中的井字尺寸為 270x270。
回到角色面板,使用繪畫方式建立新角色「bg」,這個角色是背景方塊,負責偵測玩家「點擊了哪個格子」,繪製正方形後對齊畫布中心點,尺寸根據背景井字形做調整,bg 的顏色可以自訂,範例中使用灰色 77x77 的正方形。
下圖呈現 bg 背景方塊和背景井字的相對尺寸與位置。
建立第二個角色「ooxx」,這個角色是玩家要擺放的 O 或 X,角色有兩個造型,造型紅色「O」的名稱是 o,造型綠色「X」的名稱是 x。
下圖呈現 ooxx 圈叉圖案方塊和背景井字的相對尺寸與位置。
建立第三個角色「ok」,這個角色是當 O 或 X 連成一線時,要出現的連接線段,該角色使用橘色直線繪製,共有四種造型,分別是垂直、水平、左上右下和右下左上。
下圖呈現 ok 完成線段和背景井字的相對尺寸與位置。
井字棋勝利原理
井字棋只要三個 O 或三個 X 排成一直線就獲得勝利,根據這個勝利原理,如果將井字棋的九宮格分成 1~9 九個數字,可以產生「八組」勝利的清單項目,只要玩家點擊後,符合勝利清單裡的項目,玩家就獲得勝利。
程式原理 ( bg 背景方塊 )
編輯「bg 背景方塊」角色的程式,建立 play_list 清單,使用重複九次積木建立九個「空項目」,負責記錄玩家點擊的位置,接著建立 ok_list 清單,加入八個勝利的清單項目:123、456、789、147、258、369、159、357。
建立「分身偵測方塊」函式,勾選「執行完畢再更新畫面」。
函式內容主要負責「建立九個分身」,將分身分別定位在井字形的九宮格裡,並新增 pos 變數紀錄玩家點擊的位置。
建立「pos_local」變數,設定變數為「僅適用當前角色」的區域變數。
當分身產生時,顯示分身並將分身設定為全透明,接著運用全域變數 pos 和區域變數 pos_local 互相搭配,讓每個分身的 pos_local 都紀錄不同的數值,如此一來就能在點擊分身時,透過廣播傳送不同的 pos_local 內容。
程式原理 ( ooxx 圈叉圖案 )
編輯「ooxx 圈叉圖案」角色程式,點擊綠旗時,將角色設定到最前方 ( 避免被遮住 ) 並使用重複迴圈讓角色跟隨滑鼠。
新增「點擊蓋章」函式,函式具有 pos、x 和 y 三個參數,並勾選「執行完畢再更新畫面」。
當收到廣播 1~9 的訊號時,分別執行對應參數的函式,函式內容根據 x 和 y 參數,將角色瞬間移動到指定的位置並蓋章,接著將 play_list 清單裡的指定位置,替換成目前玩家的造型,舉例來說,使用 O 的玩家在第 2 格點擊,play_list 的第二個項目就會變成 o。
下圖顯示進行到這一步的效果。
新增「判斷勝利」函式,勾選「執行完畢再更新畫面」。
「判斷勝利」函式內容使用變數 y 依序取出 play_list 和 ok_list 的八個項目,使用變數 x 取出 ok_list 特定項目三個數字的每個數字。
透過重複八次依序取得 play_list 和 ok_list 清單中的項目,再透過重複三次迴圈,將 ok_list 的勝利位置對照 play_list 的項目,如果勝利的位置都是 O 或都是 X,表示某一方勝利,此時就發送勝利的位置以及 win 的廣播訊號。
回頭編輯「點擊蓋章」函式,使用邏輯判斷如果 play_list 某個項目如果是空的,才能點擊,點擊時執行「判斷勝利」函式。
程式原理 ( ok 完成線段 )
編輯「ok 完成線段」角色程式,點擊綠旗的時候隱藏角色,接著根據收到不同的勝利訊息,切換成不同的造型以及位置,並設定為半透明,就能在某一方勝利時,在圖案上方加上直線。
注意,因為使用「停止全部」會造成半透明效果失效,因此此處使用蓋章的方式顯示直線。
完成效果
完成後,點擊綠旗,就可以和別人一起進行井字棋遊戲囉。
範例解答
範例解答:井字棋 ( 圈圈叉叉 )
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~