俄罗斯方块 ( 移动与碰撞 )

这篇教学会延续“俄罗斯方块 1 ( 原理介绍、绘制角色和背景 )”范例，实作俄罗斯方块游戏的“方块移动”，透过键盘或鼠标操控方块位置，并进一步透过碰撞的侦测，修正并限制移动的范围。

相关文章参考：

• 俄罗斯方块 1 ( 原理介绍、绘制角色和背景 )
• 俄罗斯方块 3 ( 放置方块，方块不断落下 )
• 俄罗斯方块 4 ( 消除完成方块、侦测游戏结束 )
• 俄罗斯方块 5 ( 下个形状、支援移动设备 )

快速导览：

• 打开范例
• 键盘控制方块移动旋转
• 修正不超过左右边界
• 修正不超过下层边界
• 侦测碰到已经放置的方块

打开范例

打开“俄罗斯方块 1 ( 原理介绍、绘制角色和背景 )”的范例，从这个范例进行修改。

范例链接：https://scratch.mit.edu/projects/887371372/

键盘控制方块移动旋转

点击“方块造型”角色，按照下列步骤编辑：

• 点击绿旗时定位在游戏区域最上方的中间，使用 bg_x + 100 进行定位。
• 按下向左键，x 座标改变 -20 ( 往左移 )。
• 按下向右键，x 座标改变 20 ( 往右移 )。
• 按下向上键，向右旋转 90 度。
• 按下向下键，y 座标改变 -20 ( 往下移 )。

因为在后续的步骤会使用按钮的角色控制方块移动 ( 如此一来才能在移动设备里进行游戏 )，所以先将控制移动的程序改成“广播”的方式

完成后点击绿旗，应该就能透过键盘操控方块移动，但在左边、右边和移动到最下缘时，都会发生超出边界的状况。

修正不超过左右边界

为了避免方块在移动时超出左右边界，必须在超过左右边界时将方块移动回原本的位置，因为这个步骤必须在“瞬间”发生，所以需要使用“执行完毕再更新画面”的函数，建立一个名为“修正 ( 左右 )”的函数，放入一个名为 dx 的参数，并勾选“执行完毕再更新画面”。

修正 ( 左右 ) 函数的内容是判断如果碰到背景外框角色，就将角色位置往反方向移动同样的距离，并在按下向右键或向左键时，执行修正 ( 左右 ) 的函数，如此一来在移动方块时，就不会超过左右边界。

接着使用同样的操作步骤，建立一个名为“修正 ( 旋转 )”的函数，勾选执行完毕再更新画面，当按下向上键往右转时，如果碰到边界，就往反方向转，如此一来在旋转方块时，就不会超过左右边界。

修正不超过下层边界

运用同样的操作步骤，建立一个名为“修正 ( 垂直碰到 )”的函数，勾选执行完毕再更新画面，当移动到底碰到下层边界时，就往上移动，如此一来方块就不会超过下层边界。

侦测碰到已经放置的方块

如果要侦测“已经放置的方块”，可以借由方块和背景不同颜色进行区分，透过“碰到颜色”的功能，就能准确侦测是否碰到方块，若碰到方块时，就能采取“修正碰到左右边界”或“修正不超过下层边界”的做法。

新增一个名为“碰到颜色”的函数，勾选执行完毕再更新画面，加入一个名为 color 的变数，将 color 默认为 0，如果侦测碰到特定的七种方块颜色，就将 color 改为 1。

如果要准确选取颜色，可以先切换方块造型，再用滴管工具选取颜色。

完成后，修改“修正 ( 左右 )”、“修正 ( 旋转 )”和“修正 ( 垂直碰到 )”这三个函数，加入判断侦测碰到颜色函数与逻辑。

如果要快速测试，可以切换到“背景方格”角色，替背景添加一些不同的数字，就可以观察是否能正确修正碰撞。

注意，修改背景只是为了测试，测试后请在改成原本的程序。

完成效果

点击绿旗，透过键盘移动方块，就能观察移动的状况以及是否能正确的侦测碰撞与修正。

范例解答

范例解答：俄罗斯方块 2 ( 角色移动、碰撞侦测与修正 )

继续阅读

如果已经熟悉了俄罗斯方块 2 ( 角色移动、碰撞侦测与修正 ) 的程序，就可以继续阅读“俄罗斯方块 3 ( 放置方块，方块不断落下 )”的文章。

文章链接：俄罗斯方块 3 (放置方块，方块不断落下 )

意见反馈