js实现简单的俄罗斯方块小游戏

• 本质是控制 16 宫格 进行移动

// 根据数据源定位块元素的位置
 // 1 拿到所有的块元素
 // 2 找到每个块元素对应的数据 (行、列)
 // 3 根据每个块元素对应的数据来指定块元素的位置
 // 每个块元素的位置由2个值确定：
 // 控制16宫格元素进行移动
 // 根据16宫格的位置来重新定位块元素
 

• 观察上图中旋转后每个块元素发生的位置的变化

• 以第1,2个L模型为例，可以观察到：…

• • 移动后的行 = 移动前的列
  • 移动后的列 = 3 - 移动前的行

// 监听用户的键盘事件
 // 旋转后的行 = 旋转前的列
 

控制模型只在容器中移动

// 根据数据源定位块元素的位置
 // 判断一下块元素的越界行为
 // 1 拿到所有的块元素
 // 2 找到每个块元素对应的数据 (行、列)
 // 3 根据每个块元素对应的数据来指定块元素的位置
 // 每个块元素的位置由2个值确定：
// 控制模型只能在容器中
 // 定义模型可以活动的边界
 // 当块元素超出了边界之后，让 16 宫格后退1格
 

当模型触底时，将块元素变为灰色固定在底部，同时生成一个新的模型

触底时固定，生成新模型

• 需要注意的是：当模型触底被固定后，我们需要重新再生成一个新的模型，再生成新模型的时候，需要重置 16宫格 的位置，否则新创建的模型的位置会出现在底部，并将上一模型覆盖掉

// 根据模型使用的数据创建对应的块元素
 // 确定当前使用哪一个模型
 // 重置16宫格的位置
 // 生成对应数量的块元素
// 控制模型只能在容器中
 // 定义模型可以活动的边界
 // 当块元素超出了边界之后，让 16 宫格后退1格
// 把模型固定在底部
 // 1 改变模型的样式
 // 2 禁止模型再进行移动
 // 把该块元素放入变量中
 // 3 创建新的模型
 

判断块元素与块元素之间的碰撞，分为左右接触和底部接触

// 记录所有块元素的位置
 

当块元素被固定到底部的时候，将块元素存储在fixedBlocks 中

// 把模型固定在底部
 // 1 改变模型的样式
 // 2 禁止模型再进行移动
 // 把该块元素放入变量中
 // 3 创建新的模型
 

处理模型之间的碰撞(左右接触)

 // 根据16宫格的位置来重新定位块元素
 // 旋转后的行 = 旋转前的列
 // 如果旋转之后会发生触碰，那么就不需要进行旋转了
// 判断模型之间的触碰问题
// x, y 表示16宫格《将要》移动的位置
// model 表示当前模型数据源《将要》完成的变化
 // 所谓模型之间的触碰，在一个固定的位置已经存在一个被固定的块元素时，那么
 // 活动中的模型不可以再占用该位置
 // 判断触碰，就是在判断活动中的模型《将要移动到的位置》是否已经存在被固定
 // 返回 true 表示将要移动到的位置会发生触碰 否则返回 false
 // 该位置是否已经存在块元素？
 

处理模型之间的碰撞(底部接触)

 // 底部的触碰发生在移动16宫格的时候，并且此次移动是因为 Y 轴的变化而引起的
 // 模型之间发生触碰了
 // 控制16宫格元素进行移动
 // 根据16宫格的位置来重新定位块元素
 

// 把模型固定在底部
 // 1 改变模型的样式
 // 2 禁止模型再进行移动
 // 把该块元素放入变量中
 // 判断某一行是否要清理
 // 3 创建新的模型
// 判断一行是否被铺满
 // 在一行中，每一列都存在块元素，那么该行就需要被清理了
 // 遍历所有行中的所有列
 // 标记符 假设当前行已经被铺满了
 // 遍历当前行中的所有列
 // 如果当前行中有一列没有数据，那么就说明当前行没有被铺满
 // 该行已经被铺满了
 

 // 在一行中，每一列都存在块元素，那么该行就需要被清理了
 // 遍历所有行中的所有列
 // 标记符 假设当前行已经被铺满了
 // 遍历当前行中的所有列
 // 如果当前行中有一列没有数据，那么就说明当前行没有被铺满
 // 该行已经被铺满了
// 清理被铺满的这一行
 // 1 删除该行中所有的块元素
 // 2 删除该行所有块元素的数据源
 // 遍历该行中的所有列
 // 1 删除该行中所有的块元素
 // 2 删除该行所有块元素的数据源
 

让被清理行之上的块元素下落

// 清理被铺满的这一行
 // 1 删除该行中所有的块元素
 // 2 删除该行所有块元素的数据源
 // 遍历该行中的所有列
 // 1 删除该行中所有的块元素
 // 2 删除该行所有块元素的数据源
// 让被清理行之上的块元素下落
 // 1 被清理行之上的所有块元素数据源所在行数 + 1
 // 2 让块元素在容器中的位置下落
 // 3 清理之前的块元素
 // 遍历被清理行之上的所有行
 // 1 被清理行之上的所有块元素数据源所在行数 + 1
 // 2 让块元素在容器中的位置下落
 // 3 清理之前的块元素
 

 // 创建每个模型的数据源
 // 第1个模型数据源(L型)
 // 第2个模型数据源(凸)
 // 第3个模型数据源(田)
 // 第4个模型数据源(一)
 

创建模型的时候随机选取不同的模型样式

// 根据模型使用的数据创建对应的块元素
 // 确定当前使用哪一个模型
 // 重置16宫格的位置
 // 生成对应数量的块元素
 

 
// 根据模型使用的数据创建对应的块元素
 // 确定当前使用哪一个模型
 // 确定当前使用哪一个模型
 // 重置16宫格的位置
 // 生成对应数量的块元素
 

// 根据模型使用的数据创建对应的块元素
 // 判断游戏是否结束
 // 确定当前使用哪一个模型
 // 重置16宫格的位置
 // 生成对应数量的块元素
 // 当第0行存在块元素的时候，表示游戏结束了
 

// 根据模型使用的数据创建对应的块元素
 // 判断游戏是否结束
 // 确定当前使用哪一个模型
 // 重置16宫格的位置
 // 生成对应数量的块元素
 alert("大吉大利，今晚吃鸡！")
 

扩展:计分 + 最高分 + 重新开始游戏

 -->最高分：0分数：0重新开始

// 清理被铺满的这一行
 // 1 删除该行中所有的块元素
 // 2 删除该行所有块元素的数据源
 // 遍历该行中的所有列
 // 1 删除该行中所有的块元素
 // 2 删除该行所有块元素的数据源
 
 alert("大吉大利，今晚吃鸡！")
 

 -->最高分：0分数：0重新开始 {
 // 控制块元素进行移动
 // 底部的触碰发生在移动16宫格的时候，并且此次移动是因为 Y 轴的变化而引起的
 // 模型之间发生触碰了
 // 根据16宫格的位置来重新定位块元素
 // 旋转后的行 = 旋转前的列
 // 如果旋转之后会发生触碰，那么就不需要进行旋转了
 // 控制模型只能在容器中
 // 定义模型可以活动的边界
 // 当块元素超出了边界之后，让 16 宫格后退1格
 // 把模型固定在底部
 // 1 改变模型的样式
 // 2 禁止模型再进行移动
 // 把该块元素放入变量中
 // // 拿到每个块元素
 // // 更改块元素的类名
 // 判断某一行是否要清理
 // 3 创建新的模型
 // 判断模型之间的触碰问题
 // x, y 表示16宫格《将要》移动的位置
 // model 表示当前模型数据源《将要》完成的变化
 // 所谓模型之间的触碰，在一个固定的位置已经存在一个被固定的块元素时，那么
 // 活动中的模型不可以再占用该位置
 // 判断触碰，就是在判断活动中的模型《将要移动到的位置》是否已经存在被固定
 // 返回 true 表示将要移动到的位置会发生触碰 否则返回 false
 // 该位置是否已经存在块元素？
 // 判断一行是否被铺满
 // 在一行中，每一列都存在块元素，那么该行就需要被清理了
 // 遍历所有行中的所有列
 // 当第0行存在块元素的时候，表示游戏结束了

每个方块都要记录自己的

以方块内或旁边任一点为中心，称为参考

。建议可以在方块类中定义一个或多个

，这样产生一个方块时只需要提供其

为了处理方块的旋转，我们不能只记录上述

种方块，而应该把它们旋转后产

之间建立映射关系，即认为是一种不同的方块

的方块，只要求处理一个方向的旋转。这个

此外，方块类还要记录自己的参考点在指定的游戏区域中的位置。

把自己填充到指定的游戏区域中。返回填充成功或失败的信息。

把自己从指定的游戏区域中清除。

在指定的游戏区域中移动，包括向左、右、下移动，以

位。如果可以移动，则修改参考点的位置，并在指定的游戏区域中重新填充自己

先清除、然后修改参考点位置，再填充

。返回是否移动成功的信息。

在指定的游戏区域中旋转一次，此时参考点位置不变，但要改变自己的

，然后在指定的游戏区域中重新填充自己

先清除、然后修改参考点位置，再填