井字棋 ( 圈圈叉叉 )

这篇文章使用 Scratch 的清单、分身、画笔，搭配全域变数和区域变数的概念，实作俗称“圈圈叉叉、Tic-Tac-Toe、OOXX”的“井字棋”游戏。

快速导览：

• 绘制角色和背景
• 井字棋胜利原理
• 程序原理 ( bg 背景方块 )
• 程序原理 ( ooxx 圈叉图案 )
• 程序原理 ( ok 完成线段 )
• 完成效果

绘制角色和背景

背景的“井字形”会画在舞台的背景中，点击画面右下角的“舞台”，使用“直线”在背景中绘制“井”的形状，范例中的井字尺寸为 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 完成线段”角色程序，点击绿旗的时候隐藏角色，接着根据收到不同的胜利消息，切换成不同的造型以及位置，并设定为半透明，就能在某一方胜利时，在图案上方加上直线。

注意，因为使用“停止全部”会造成半透明效果失效，因此此处使用盖章的方式显示直线。

完成效果

完成后，点击绿旗，就可以和别人一起进行井字棋游戏啰。

范例解答

范例解答：井字棋 ( 圈圈叉叉 )

意见反馈