俄罗斯方块 ( 角色与背景 )

这系列的教学会介绍透过 Scratch 实作“俄罗斯方块”，这篇教学会先介绍俄罗斯方块的游戏原理，并绘制俄罗斯方块游戏中会用到的角色，以及使用清单的方式绘制背景。

相关文章参考：

• 俄罗斯方块 2 ( 角色移动、碰撞侦测与修正 )
• 俄罗斯方块 3 ( 放置方块，方块不断落下 )
• 俄罗斯方块 4 ( 消除完成方块、侦测游戏结束 )
• 俄罗斯方块 5 ( 下个形状、支援移动设备 )

快速导览：

• 俄罗斯方块游戏原理
• 俄罗斯方块游戏设计重点
• 绘制角色 ( 背景格子 )
• 绘制角色 ( 方块造型 )
• 绘制角色 ( 背景外框 )
• 绘制角色 ( 下层边界 )
• 使用清单产生背景
• 背景外框与下层边界定位

俄罗斯方块游戏原理

俄罗斯方块游戏是一个典型的“清单游戏”，虽然眼睛所见的是“方块”，但背后都是清单所组成，举例来说，如果游戏的长方形背景是 12x17 个方块组成，对应的清单就会是一个有 17 个项目，每个项目里又有 12 个子项目，每个子项目为 0 的“二维清单”。

如果在背景加入“方块”，就等同在清单中加入“不为 0”的子项目，透过这些不为 0 的子项目，就能换算出方块在背景中的长相。

如果同一行的方块摆满了需要“消除”，就表示清单中该行的“子元素全部都不为 0”，透过清单的操作 ( 删除该行、添加新的一行 )，就能够将该行的方块消除。

俄罗斯方块游戏设计重点

由于 Scratch 对于“清单”的操作较不友善，为了避免碰触大量的清单处理功能，可以使用下列的重点进行设计：

• 使用“实体的方块”角色，透过键盘或鼠标，操控方块的“位置以及旋转方向”。
• 方块“放置”后 ( 碰到别的方块而停止、到达底部停止 )，使用“画笔”将方块“盖印章”到舞台上。
• 使用“背景方块”角色侦测舞台的颜色，透过颜色产生“清单”。
• 透过“清单”判断是否需要消除某一行，消除后，再运用清单“重新绘制”舞台上的方块。
• 当清单的第一行有子元素，表示俄罗斯方块游戏结束。

绘制角色 ( 背景格子 )

建立一个名为“背景格子”的角色，绘制第一个名为“bg”的造型，使用浅灰色，放入一个 19x19 的正方形，将正方形对齐画布中心。

复制 bg 造型，产生七个依序名为“shape1～shape7”的造型，并将七个造型修改成不同颜色，这七个造型未来会是方块的颜色。

绘制角色 ( 方块造型 )

建立一个名为“方块造型”的角色，绘制第一个名为“shape1”的造型，接着复制背景格子角色的 shape1 正方形造型，贴上到方块造型的 shape1 造型中，运用正方形组合成 T 形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

注意，T 形方块组合后长宽是 59x39 ( 19x3=57，加上两个中间间隔 57+2=59，19x2=38，加上一个中间间隔 38+1=39 )，中间方块需要对齐画布中心。

复制背景格子角色的 shape2 正方形造型，贴上到方块造型的 shape2 造型中，运用正方形组合成 L 形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

复制背景格子角色的 shape3 正方形造型，贴上到方块造型的 shape3 造型中，运用正方形组合成另外一个 L 形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

复制背景格子角色的 shape4 正方形造型，贴上到方块造型的 shape4 造型中，运用正方形组合成正方形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

复制背景格子角色的 shape5 正方形造型，贴上到方块造型的 shape5 造型中，运用正方形组合成 Z 形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

复制背景格子角色的 shape6 正方形造型，贴上到方块造型的 shape6 造型中，运用正方形组合成另外一个 Z 形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

复制背景格子角色的 shape7 正方形造型，贴上到方块造型的 shape7 造型中，运用正方形组合成长条形的俄罗斯方块，按照下图，使用方块组合出同样的长宽以及对齐的方块 ( 不要使用变形，单纯用位置调整 )。

绘制角色 ( 背景外框 )

建立一个名为“背景外框”的角色，绘制一个造型，加入 254x352 的长方形，设定“不填满”以及“有边框”，这个角色有两个目的，第一个是显示俄罗斯方块的移动范围，第二个则是作为判断左右边界的功能。

绘制角色 ( 下层边界 )

建立一个名为“下层边界”的角色，绘制一个造型，加入 254x3 的长方形，设定“不填满”以及“有边框”，这个角色主要目的在于判断是否碰触到底部。

使用清单产生背景

点击“背景方格”角色，切换到程序编辑画面，按照下列步骤编辑程序：

• 建立一个名为 bg_x 的“变数”，负责记录作为背景角色的 x 座标，方便其他的角色可以共同使用。
• 建立一个名为 bg 的“清单”，负责记录俄罗斯方块的整体位置。
• 点击绿旗后，使用重复循环，将 17 组 12 个 0 的“000000000000”文字，加入 bg 清单中 ( 高度是 17 格，宽度是 12 格 )。

建立一个名为“画背景”的函数，勾选“执行完毕再更新画面”，按照下列步骤编辑函数内容：

• 显示角色 ( 因为等一下会隐藏 )。
• 加入“笔画”扩充程序积木，新增 x 和 y 变数。
• 执行函数时清除舞台笔迹。
• 将背景方格定位在 (bg_x, 160 ) 座标位置。
• 设定变数 y 为 1，使用重复 17 次积木，每次重复执行：
  • 设定变数 x 为 1，座标 x 设定为 bg_x。
  • 重复 12 次，每次重复时读取 bg 清单对应的文字。
  • 如果读取的文字是 0，就更换造型为 bg。
  • 如果读取的文字是其他数字，则更换造型为 shape + 该数字 ( 这也是刚刚造型名称使用 shape1～shape7 的原因 )。
  • 更换造型后，使用笔画功能的“盖章”。
  • 重复结束后，x 增加 1，y 也增加 1 ( 放在正确的位置 )。
• 重复结束后，隐藏角色。

由于清单是使用清单搭配文字模拟“二维清单”，所以取出项目时，外层使用“清单项目”，内层使用“文字的第几个字”。

完成后，在点击绿旗的重复循环结束后，执行“画背景”函数，点击绿旗之后，舞台上就会看见画出灰色方格背景。

如果要测试其他图案，可以将部分的 0 换成 1～7 的数字，点击绿旗后就会看见出现不同颜色的背景。

背景外框与下层边界定位

能够画出背景方格后，接着使用下列的程序积木，将“背景外框”的角色定位，因为 bg_x 变数表示背景方格的中心点 x 座标，换算成背景外框的中心点需要使用 bg_x + 110。

使用下列的程序积木，将“下层边界”角色，与背景外框角色的下缘贴齐，因为 bg_x 变数表示背景方格的中心点 x 座标，换算成下层边界的中心点需要使用 bg_x + 110。

完成效果

点击绿旗，就会看见舞台中出现俄罗斯方块游戏的基本界面。

范例解答

范例解答：俄罗斯方块 1 ( 绘制角色和背景 )

继续阅读

如果已经熟悉了俄罗斯方块 1 ( 原理介绍、绘制角色和背景 ) 的程序，就可以继续阅读“俄罗斯方块 2 ( 角色移动、碰撞侦测与修正 )”的文章。

文章链接：俄罗斯方块 2 (角色移动、碰撞侦测与修正 )

意见反馈