前段时间姑娘报名参加第二十一届全国中小学生电脑制作活动程序设计的竞赛。抽时间指导孩子做了一个Scratch实现的古典益智游戏华容道的小项目。把当时指导姑娘写的设计思路的文档分享一下，由于Scratch没有脚本源代码的形式，大量积木块的截图就不在此粘贴了。
1. 创作背景
华容道是古老的中国民间益智游戏，也是中国古代的一个地名，相传当年曹操曾经败走此地，故游戏因此得名。华容道游戏有352种开局，真可谓变化多端、百玩不厌。它与魔方、独立钻石棋一起被国外智力专家并称为“智力游戏界的三个不可思议”。它与七巧板、九连环等中国传统益智玩具同被誉为“中国的难题”。家里很早买过一套木质的华容道游戏拼板，它的“简单”和“复杂”深深吸引了我。
在学习了Scratch的基础之后，我深刻感受到Scratch作为一种图形化的入门编程语言，其所具备的简单、直观而又不失强大的特点。我想如果能用Scratch从零开始编写一个完整的小游戏，对自己来说一定是一种非常棒的挑战和提升，能够帮助自己更好地掌握所学知识，更快地培养编程的概念和思想。于是我选择了以华容道这款益智游戏为课题，决心把木质拼板“搬上”电脑屏幕。在学编程之余，也希望通过分享这款游戏给朋友们带来一点开心快乐。
2. 功能分析
2.1. 游戏规则
华容道是一种滑块类游戏，传统上一般是由放在长方形盘中的不同大小的10块滑块拼成。
其中最大的一块2＊2的正方形滑块代表曹操。五块1＊2的长方形滑块分别代表关羽、赵云、马超、黄忠和张飞，这五块在不同的关卡布局中可以是竖放也可以是横放。另有四块1＊1的正方形滑块代表四个小兵。
华容道的关卡布局非常多，据说有352种之多，例如以下是比较常见的几种布局：
游戏的目标是在只滑动滑块而不从棋盘中拿起的情况下，尽力用最少的移动步数和时间将代表曹操的那一块移到底部出口。
最早系统研究游戏华容道的是苏州大学数学教授许莼舫先生。1952年，他在《数学漫谈》中对这个游戏作了详细的分析，总结出8条规则。8条规则又可以归纳为以下4个要点：
1、四个小兵必须两两在一起，不要分开；
2、曹操，关羽，大将移动时前面应有两个小兵开路；
3、曹操移动时后面还应有两个小兵追赶；
4、以上三种状况，其中各块都可局部（不妨碍其他地方）任意移动。
2.2. Scratch特性优势
在许多图形化编程语言工具中，由MIT媒体实验室终身幼儿园团队研发的Scratch，算得上是中国家长们最广为人知的一种编程语言。
使用Scratch，你可以编写属于你的互动媒体，像是故事、游戏、动画，然后你可以将你的创意分享给全世界。Scratch帮助年轻人更具创造力、逻辑力、协作力，这些都是生活在 21 世纪不可或缺的基本能力。
相对于C++、VB、JAVA、Python等语言来说，Scratch最突出的特色，便是提供用户一套由积木系统组成的编程指令，使用者不需要会敲代码，不需要会使用键盘，不需要懂英语，就可以学习编程。所以它更适合用于初学者教学，我觉得Scratch有三大优点，这也正是我选择使用Scratch实现《华容道》游戏的原因。
1、入门简单
图形化可视编程，界面生动有趣。无关原有编程基础，适合中小学学生初次学习编程语言时使用。
2、内容丰富
内容丰富，针对有兴趣、喜爱绘画的学生，提供角色绘制设计功能，为喜欢动画的学生提供情景设计功能，为喜欢游戏的学生提供简单游戏设计功能，甚至还能提供喜欢音乐的学生音频处理的功能。
3、成果直观
通过使用Scratch，让学生在动画、游戏设计过程中逐渐形成逻辑分析、独立思考创新的思维方式，学会提出问题，解决问题。相比其他编程软件，其更加直观，学生通能比较容易地看到自己的劳动成果，更有成就感。
2.3. 角色属性
要在电脑上实现华容道游戏，每个滑块可以称之为一个角色，每个角色都有其特定的属性。
1、大小：
我将华容道棋盘整体看作一个4＊5的长方形网格区域，此区域中每个小格大小为50＊50像素，如下图：
这样每个滑块位于棋盘中时对应的大小可以有两种概念，一是像素宽＊高，二是占网格列数＊行数。
曹操：100＊100像素；2列＊2行
关羽、赵云、马超、黄忠、张飞：50＊100像素；1列＊2行（竖放）或100＊50像素；2列＊1行（横放）
小兵：50＊50像素；1列＊1行
2、位置：
每个角色也有两个层面的位置概念。一个是角色中心相对于整个舞台的x,y坐标位置。另一个是相对于棋盘网格来说的位于第几个格子的位置，这个位置我以角色所占区域的最左上角所在格子的行和列来表示。例如下图中棋盘位于整个舞台的中心，每个网格是50＊50像素时，曹操的位置是：x=0,y=75；1行2列。
3、横竖：
关羽、赵云、马超、黄忠、张飞这五个角色，有横和竖两种布局方式。
曹操和小兵因为都是正方形，所以只有一种布局方式。
2.4. 角色行为
每个角色都有以下行为：
1、移动：
每个角色都可以沿棋盘网格向上、下、左、右四个有空余空间的新位置移动，每次只能移动一个网格的距离。如果移动方向上没有空余空间，则此移动无效。例如下图中关羽可以向左或右移动一个网格，但不能向上、下方向移动。
2、显示／隐藏：
在选定关卡之前，棋盘和角色都处于隐藏状态，当选关后，开始本关游戏时角色才显示出来。
2.5. 功能需求
总的来说，华容道游戏需要实现的大体功能还是比较简单。
1、要能方便的定义不同关卡的布局，实现多个关卡的游戏功能。
2、要按照传统华容道游戏的游戏规则，实现鼠标拖动各角色移动的功能，角色不能移动到棋盘网格之外，角色仅能向有空余空间的网格处移动，每次移动一个网格距离，如遇无效移动的操作，角色能自动返回到原位置。
3、以曹操正确移动到棋盘下方出口位置为本关卡结束。
4、实现移动步数的统计和闯关积分功能。步数统计每关结束后归零，积分在程序退出前需要对成功闯过的每个关卡进行累计积分。
5、为提升游戏体验，给游戏添加背景音乐功能，且可以由玩家自主控制打开或关闭。
3. 编程思路和算法
3.1. 鼠标操作和移动
通过鼠标移动角色，按照以下流程算法进行程序设计：
需要注意的要点：
1、鼠标在角色上按下时将角色置于最前，以确保移动过程中不被其它角色遮挡。
2、要计算鼠标点中位置与角色中心位置之间的位移，确保在角色跟随鼠标指针移动过程中保持位置的同步。
3.2. 移动方向计算
对鼠标释放时鼠标指针所在位置与角色原位置之间的x和y坐标进行比较，x轴上位移大于y轴上的位移时则限定为左右移动，y轴上位移大于x轴上的位移时则限定为上下移动，再进一步比较上下或左右方向上坐标值的差，即可最终限定鼠标的拖动行为最终应向哪一个方向进行移动。
3.3. 移动有效测试
移动有效性检测过程较为复杂，需要考虑以下重点：
1、角色大小不一，要确定所要移移动方向上1或多行／列是否有空余位置。
2、需要查询布局列表中的数值（1代表已占用，0代表空闲）来获得整个棋盘位置占用数据。
3、左右移动不能超过1至4列范围，上下移时不能超过1至5行范围。即不能超出棋盘网格的范围。
3.4. 位置计算
在确定移动方向和移动有效性后，得到的是向某一方向移动一个网格（即移到特定行／列）的信息。而角色实际的移动需要以确定的x,y坐标来指定，因此需要根据目标行或目标列的值、行列单元格的边长、角色高、角色宽等数值来计算目标坐标值。
X坐标＝（（（目标行－1）＊4＋目标列－1）mod 4＊单元格边长＋宽＊单元格边长／2）－4＊单元格边长／2
Y坐标＝（5＊单元格边长－floor(（（目标行－1）＊4＋目标列－1）／4）＊单元格边长＋高＊单元格边长／2）－5＊单元格边长／2
棋盘空间的占用，使用了四个列表来表示棋盘的4个列，每个列表含有5个元素，表示棋盘的5个行。每个列表元素值用0代表空闲，用1代表占用。
例如第一关“兵临曹营”的初始状态时，实际角色摆放和列表数据对应关系如下：
| 列表1 | 列表2 | 列表3 | 列表4 |
|---|---|---|---|
| 1 | 1 | 1 | 1 |
| 0 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 0 |
3.5. 角色移动
在移动角色时除按照计算出来的位置坐标进行移动，还需要更新布局列表，将角色的移动反映为列表中0、1数值的占用标志。
另外对于曹操角色，要比其它角色多一个检测是否到达出口闯关成功的环节。
曹操角色移动流程如下：
其它角色移动流程如下：
3.6. 关卡实现和角色摆放
关卡的布局是通过建立一个滑块布局的列表来进行定义的。
按以上规则，游戏中的九个布局对应列表值如下：
当玩家选择好相应关卡后，各角色即按该列表中定义的位置和摆放方式完成角色在棋盘上的显示。
3.7. 背景变换
游戏中总共准备了两个背景，一个是游戏开始时选择关卡的背景，一个是进入具体关卡后棋盘后面的背景。
为展现文化氛围，图片的选择上偏重于具有中国水墨画风格的图片。
3.8. 声音控制
为选关页和游戏页面也准备了不同的两段背景音乐，通过在小喇叭按钮角色中进行定义。当接收到“显示菜单”和“关卡已选”两个广播消息时分别进行背景音乐的切换。通过一个“是否静音”的变量来记录当前的音乐播放状态。
通过点击该小喇叭按钮可以打开和关闭音乐的音量。
3.9. 消息同步
各个角色之间，通过事件消息来传递运行进程中的事件，协调相关联操作之间的运行时机。使得这些操作可以异步进行，提升程序的灵活性和运行效率。
4. 资源说明
4.1. 图片素材
设计中使用到的背景图片按“中国风”关键词从百度搜索得到，角色头像的图片按“华容道”关键词从百度搜索中得到。程序中使用到的图片如下：
4.2. 声音素材
程序中用到的声音素材按关键字背景音乐在百度搜索中获得，具体曲目名称不详。
5. 开发环境
5.1. 系统环境
我开发此程序所用的计算机环境如下：
CPU：Intel Core i7-3820QM
内存：16G
操作系统：Ubuntu 18.04.4 LTS
浏览器：Google Chrome 81.0.4044.129
5.2. 开发工具
编程环境：Scratch 3.0 linux 离线编辑器
图像处理：GIMP 2.10.18
流程图软件：Dia 0.97+git
6. 创作过程
6.1. 资源处理
将网上下载得到的图片的音频素材进行处理。
背景图片按照480＊360像素大小进行处理。
棋盘处理为233＊350像素大小，其中滑块活动区域大小为200＊250像素。
角色头像图片按照以下尺寸进行处理：
曹操：100＊100像素
关羽、赵云、马超、黄忠、张飞：50＊100像素（竖放），100＊50像素（横放）各制作一套
小兵：50＊50像素
声音小喇叭按钮制作有声音和无声音各一个。
按照9个布局关卡分别制作一个选关按钮。
制作返回按钮一个。
声音文件转换为mp3文件
6.2. 界面制作
游戏分为选关和进行游戏两个场景。选关页面中显示游戏的名称，并列出9个关卡按钮和一个结束游戏的按钮供玩家选择。
游戏进行页面中居中显示棋盘，棋盘上方显示关卡名称变量，角色按选定的布局在棋盘上排列，棋盘左侧上方显示已走步数和闯关得分两个变量，棋盘右侧上方显示返回按钮和控制声音的小喇叭按钮。
6.3. 角色制作
曹操和小兵角色图片为正方形，只包含一个形象。其它五位大将均包含两个形象，一个是横摆，一个是竖摆。
6.4. 变量规划
关卡名称、已走步数、闯关积分、当前关卡、单位格大小、棋盘的起始行、起始列、左上角坐标等变量为全局变量，可由所有角色访问。
布局和棋盘位置占用情况采用列表变量实现，也为全局变量，所有角色可以访问。
各个角色自身相关的各种属性和运行状态所需的变量均为局部变量，仅由此角色自已访问。
6.5. 脚本编写
脚本的编写基本参照前期分析规划的功能和设计好的思路和算法进行编写。脚本编写大致分为三类：
1、舞台的脚本
仅在舞台脚本中包含一个当绿旗点击的事件积木。脚本程序主要完成全局变量和列表的初始化、选关的执行。
2、按钮角色的脚本
按钮角色包括关卡按钮、返回按钮、声音按键，这些角色的功能相对简单，主要有显示、隐藏、点击等操作。
3、滑块角色的脚本
角色的脚本相对复杂，不过除曹操有独特的判断是否到达出口的操作外，其它部分每个角色基本都大体相同。主要包括显示、隐藏、鼠标拖动等行为。
由于脚本数量较大，为更清晰的完成大量积木的编排，特将重复使用、特定功能、专用计算／测试等操作的积木脚本整合成自定义积木来使用。例如填写列表、显示／隐藏变量、选关、移动测试、计算当前行列和移动方向等功能均组织成了自定义积木的形式。
6.6. 排错优化
在脚本首次编写完毕，测试运行中发现角色移动错位的情况。通过点击左侧代码积木中变量的名称一步一步跟踪变量值的动态变化情况，发现问题的原因是角色滑块位置计算以左上角为基准，所以向右、向下移动时和向左、向上移动时由该基准位置判断不同形状的角色是否移到棋盘外的行列数限制是不一样的。找到原因后根据角色宽和高的尺寸以及移动的方向计算得到行和列的测试补偿值。在移动有效性测试时结合使用这个补偿值来判断是否移动出界，从而解决了问题。
7. 成果结论
完成本次华容道游戏作品用了大约一周时间，程序基本达到了设计的预期，游戏运行功能正常，操作响应顺畅，方便加入多个关卡的能力是本游戏的亮点，可以再搜集不同布局的资料录入到布局列表中即可加入关卡。本游戏整体试玩体验良好，寓教于乐，有一定的实用价值。
编写这个游戏的过程中也遇到了不少困难，我觉得最有收获的有以下几处：
1、深入理解变量的作用域，掌握全局变量和局部变量的概念。
2、弄清舞台坐标系的概念，精确控制角色的显示和相互关系。
3、有效利用列表处理大量信息，为游戏增加扩展多个开局关卡的能力。
4、灵活运用消息广播，实现角色之间有效通信和运行时相互协调。