轻松10步用es6写出俄罗斯方块

目的

• 为熟悉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

• 本步骤示例

传送门

• 写到这里无耻求star

• 写到这里无耻求star

• 写到这里无耻求star

• 若本教程对你有启发或帮助,各位看官请到github上点star,给我动力

• github地址

• 本教程示例