目的

• 为熟悉es6增加趣味性
• 提高开发动力
• balabalabala....编不下去了

注意

俄罗斯方块用es6写,无经过babel转es5,示例请用支持es6的chrome
俄罗斯方块用es6写,无经过babel转es5,示例请用支持es6的chrome.
俄罗斯方块用es6写,无经过babel转es5,示例请用支持es6的chrome.

##实现

第零步:构思俄罗斯方块的形状&规则

• 形状 每个方块都可看作一个二维数组,需要填充的部分为1,留空为0.
• 规则
  • 上方向键 ===> 方块顺时针形变
  • 左方向键 ===> 方块向左移动
  • 右方向键 ===> 方块向右移动
  • 空格键 ===> 方块加速下落
  • 方块掉落自动掉落
  • 方块集齐满一排消除
  • 方块到顶部视为失败

第一步:让方块出现&动起来

在`document.body`添加一个方块,并绑定`document.onkeydown`,让方块跟随键盘方向键动起来.

• 添加方块样式
• 添加js交互
• 本步骤示例

第二步:让方块在规定画布上动起来

在`document.body`添加一个画布,每次方块运动前判断对应方向能否移动

• 添加site样式
• 添加边界限定js
• 本步骤示例

第三步:根据数组矩阵画出俄罗斯方块

• 根据数组矩阵判断值为1的下标,利用得到的下标对各个小方块进行定位,从而得出一整块俄罗斯方块.
• 判断能否移动则根据绘制出的俄罗斯方块取最值,根据最值比对边界即可.
• 矩阵判断&最值与边界对比js
• 本步骤示例

第四步:俄罗斯方块形变

• 利用变量记录俄罗斯方块当前位置
• 数组矩阵顺时针旋转后返回数组矩阵&每个方块的偏移量
• 利用矩阵判断俄罗斯方块能移动的边界
• 改用变量代替常量&方块形变js
• 本步骤示例

第五步:俄罗斯方块自由下落

• 利用setTimeout方法指定一定时间下方块下落20px
• 每次下落期间判断当前方块可移动边界
• 当前方块不可再位移时,方块变灰,新的方块出现
• 方块自由下落&统一边界js
• 本步骤示例

第六步:俄罗斯方块消除

• 每次俄罗斯方块下落结束时,判断每一行小方块个数
• 方块个数等于画布宽度/方块,则取出该行方块集合并从document.body消除
• 消除后将高度高于该消除行的方块掉落一个方块高度
• 消除行js
• 本步骤示例

第七步:加速下落

• 让方块在按空格键的时候,下落2个单位的BLOCK_SIZE,也就是40px
• 需要在canMove函数中添加displacement(位移)参数标识方块下落的位移量
• 判断方块是否到达最高位置,需要加上位移量的距离
• 加速下落js
• 本步骤示例

第八步:判断游戏GG

• 判断已下落方块是否到达画布顶端
• 增加游戏结束填充动画
• 游戏结束js
• 本步骤示例

第九步:增加随机下落方块

• 将第零步的形状添加进变量arrs数组
• 用Math.random在每次初始化方块时,随机挑选arrs中的一个二维数组进行渲染
• 随机方块js
• 本步骤示例

第十步:增加游戏信息

• 增加计分板
• 增加等级判断
• 增加下一个方块提示
• 增加操作提示
• 提示info css
• 游戏信息js
• 本步骤示例

传送门

• 若本教程对你有启发或帮助,各位看官请到github上点star,给我动力:smirk:
• github地址
• 本教程示例
• 本教程出处
• vue版本的俄罗斯方块