该块游戏被编程并用于绘制游戏。 我还用来布置按钮和整个页面，以及一些提醒。
虽然看起来很简单，但却是我付出最大代价的工作之一，也是我最自豪的工作。 （对我来说）理解所有的碰撞、旋转、行删除、小部件移动、约束等逻辑很复杂。
在我们发现的游戏功能中。
那么我们来看看这个用JS编写的游戏的细节。 在这篇文章中，我将向您展示这个游戏是如何编程的，我还将给您留下一个演示和完整的代码，这是免费软件。
**注意：** 在本文中，数字、棋子和俄罗斯方块都是同义词。
俄罗斯方块游戏的通用算法
这个算法非常简单。 我们有一个带有坐标 X 和 Y 的笛卡尔坐标平面。 我们有三件事。
游戏板：绘制或显示所有内容的棋盘 当前棋子：之前掉落的分数或棋子； 也就是说，保留在那里的数字 当前棋子：当前正在下落且玩家可以移动或旋转的棋子。
我们现在要做的是：先画出棋盘（空的），然后将已有的棋子重叠，最后放置当前的棋子（正在下落的棋子）。
在每次移动或尝试旋转时，我们都会检查该棋子是否与墙壁或下面的其他图形一起倒塌。 当零件旋转时，我们进行模拟，看看旋转后这些点是否不会与其他零件一起塌陷。
此外，当检测到棋子落地时，计时器就会启动，在一定毫秒内放置下一个棋子（这样玩家就有时间移动棋子）。
在显示另一个形状之前，当前形状的点会移动到现有部分。
剩下的就是碰撞和使用数组。 例如，要检查一行是否已满，我们会遍历 Y 中某个位置处的数组中的每个点并检查它是否已被占用。
所有游戏绘制都是在 e 上完成的，我们用它来绘制数组。
游戏音乐
游戏有多种声音。 所有声音都被注入并隐藏在 DOM 中。 这就是它们的开始方式。
查看 Gist 上的代码。
在这种情况下，背景声音会循环再现，因此会无限重复。 然后，我们像这样复制它（第 1 行）。
查看 Gist 上的代码。
帮助点
一件事有两件事。 X 和 Y 坐标。 其中一个由几个点组成。
查看要点上的代码。
俄罗斯方块
就像我说的，俄罗斯方块图案是由几个点组成的。 此外，它还有多种旋转方式。 比如Z只有2个，J却有4个。 这些旋转也被定义为俄罗斯方块，它们会在您旋转时交换。
为了跟踪图形的旋转情况，需要保留一个索引。 旋转只不过是几个旋转的数组，代表所有可能的旋转。
查看要点上的代码。
您可以看到第 6 行选择了颜色。选择图形时，每个旋转点都涂上了随机颜色。
有用的功能
在继续之前，让我们看一下有用的功能。 在这些函数中，我们有加载声音的函数、选择随机颜色的函数以及选择随机数字以了解要选择哪个数字的函数。
查看要点上的代码。
例如，该函数从我们接下来将看到的 Game 类的静态数组中选择随机颜色。 而这个函数复用了一个叫ge的函数，它返回一定范围内的数字。
游戏操作
俄罗斯方块 - 欢迎来到游戏
我们首先看一下游戏的常量，例如棋盘的大小、颜色、当用户击中一行点时给予用户的点数或可选的随机颜色。
查看要点上的代码。
颜色数组可以根据您的喜好进行修改，可以更改颜色或添加更多颜色以增加随机性。
我们还有一些有趣的参数，例如每个方块的大小（以像素为单位）（这会影响棋盘的大小），或者以毫秒为单位的棋子向下移动的速度、动画的持续时间或棋子落地后的玩家移动所需时间。
游戏初始化函数
这一切都从 init 函数开始，但我们在构造函数中定义一些东西也很重要。
查看要点上的代码。
游戏接收要绘制的画布的 ID。 这样我们就可以用相同的代码制作两个俄罗斯方块游戏板。
我们还有各种徽标、板定义、声音等等。 现在让我们看看这款开源俄罗斯方块游戏的启动和重启情况。
查看要点上的代码。
这里需要注意的重要一点是函数。 该函数的作用是清除棋盘并将现有棋子放在上面（即修改数组的索引）。
在画布上画画
在画布上绘制整个俄罗斯方块游戏的函数如下。 它将使用 e 每 17 毫秒调用一次。
查看要点上的代码。
如果你想在其他地方绘制游戏，可以修改这个函数； 例如，在表格中、SVG 中、控制台中等。
获取随机数
我们有一个定义数字及其旋转的函数。 该方法每次调用时都会返回一个随机值。
查看要点上的代码。
在这里我们使用 Point 类和类。 请记住，每个人都会收到一个包含所有可能旋转的数组。 每次旋转都是具有不同坐标的点的数组。
这些坐标不会在点内部修改，而是从棋盘上的全局 X 和 Y 开始放置。
如果您想定义其他形状或修改旋转，则必须在此处进行修改。
碰撞和运动
我知道有一些用于视频游戏开发的引擎，但在这种情况下我想手工完成所有事情。 因此，我创建了自己的函数来了解某个点是否出界、该点是否有效等。
我们首先看一下点碰撞函数，它检查现有的棋盘和棋子。
查看要点上的代码。
我们使用 X 和 Y 的全局坐标，因为请记住图中的每个点都是独立的。
现在让我们看看移动或旋转图形的函数。
查看要点上的代码。
我们所做的是模拟移动并检查每个点是否仍然有效。 如果数字无法旋转，我们还会播放声音。
删除完整行
删除此块游戏中的整行内容
这是我编程时间最多的功能。 它的作用是检查并删除填充的行。 看起来像这样。
查看要点上的代码。
我们必须获取已填充的所有行的 Y 坐标。 对于每一行，我们检查是否可以将所有点向下移动。 如果可以的话，我们会降低它们，但降低的幅度不会超过已删除的行数。
同时，这个功能也会增加你的分数。 刷新它的函数是。
查看要点上的代码。
分数是根据删除的点数乘以删除的每个方块的分数来计算的。
游戏循环
现在让我们看看游戏循环。 根据上面定义的间隔（毫秒），我们尽可能降低二维码的位置。 如果棋子无法再移动，则会启动计时器，让玩家有机会移动棋子。
当计时器耗尽时，如果二维码仍然无法移动，我们将当前零件添加到现有零件中，并选择另一个形状。
查看要点上的代码。
同样在这个循环中，我们检查玩家是否输了。
俄罗斯方块游戏——玩家输了
我必须承认这个功能需要改进，因为它目前检查第二行棋子，但它应该更智能。
查看要点上的代码。
玩积木的控件
我编写了一款名为 Jenga 或 的游戏，可以使用键盘或按钮来玩。 现在是显示游戏 HTML 代码的好时机，我们可以在其中看到画布和按钮。
查看要点上的代码。
每个按钮都有一个 ID，然后我在游戏中使用它来获取该 ID。
查看 Gist 上的代码。
现在让我们看看控件，包括键盘和按钮。 每个位置都调用“尝试向右移动”函数和所有其他位置。
查看要点上的代码。
在这里您可以看到我们使用该标志，并根据我们的方便停用或激活它。 例如，游戏暂停或移动动画播放时无法播放。
把它们放在一起
玩用（开源软件）编写的俄罗斯方块游戏
我无法在这里放置或解释所有代码。 请记住，我们唯一需要的是一块画布，可以在其中绘制整组正方形。 其余的在代码中，特别是在 Game 类中。 你可以自由地探索它。
我真的花了很多时间和精力来制作这个游戏； 你可以看到它的所有演变。
我给你留下了一个演示视频（西班牙语）。
完整的开源代码位于我的
您可以在这里尝试这个演示
