目的
- 为熟悉es6增加趣味性
- 提高开发动力
- balabalabala....编不下去了
注意
俄罗斯方块用es6写,无经过babel转es5,示例请用支持es6的chrome
俄罗斯方块用es6写,无经过babel转es5,示例请用支持es6的chrome.
俄罗斯方块用es6写,无经过babel转es5,示例请用支持es6的chrome.
##实现
第零步:构思俄罗斯方块的形状&规则
- 形状
每个
方块都可看作一个二维数组,需要填充的部分为1,留空为0. - 规则
- 上方向键 ===> 方块顺时针形变
- 左方向键 ===> 方块向左移动
- 右方向键 ===> 方块向右移动
- 空格键 ===> 方块加速下落
- 方块掉落自动掉落
- 方块集齐满一排消除
- 方块到顶部视为失败
第一步:让方块出现&动起来
在`document.body`添加一个方块,并绑定`document.onkeydown`,让方块跟随键盘方向键动起来.
第二步:让方块在规定画布上动起来
在`document.body`添加一个画布,每次方块运动前判断对应方向能否移动
第三步:根据数组矩阵画出俄罗斯方块
- 根据数组矩阵判断值为1的下标,利用得到的下标对各个小方块进行定位,从而得出一整块
俄罗斯方块. - 判断能否移动则根据绘制出的
俄罗斯方块取最值,根据最值比对边界即可. - 矩阵判断&最值与边界对比js
- 本步骤示例
第四步:俄罗斯方块形变
- 利用变量记录
俄罗斯方块当前位置 - 数组矩阵顺时针旋转后返回数组矩阵&每个方块的偏移量
- 利用矩阵判断
俄罗斯方块能移动的边界 - 改用变量代替常量&方块形变js
- 本步骤示例
第五步:俄罗斯方块自由下落
- 利用setTimeout方法指定一定时间下方块下落20px
- 每次下落期间判断当前
方块可移动边界 - 当前
方块不可再位移时,方块变灰,新的方块出现 - 方块自由下落&统一边界js
- 本步骤示例
第六步:俄罗斯方块消除
- 每次
俄罗斯方块下落结束时,判断每一行小方块个数 方块个数等于画布宽度/方块,则取出该行方块集合并从document.body消除- 消除后将高度高于该消除行的
方块掉落一个方块高度 - 消除行js
- 本步骤示例
第七步:加速下落
- 让
方块在按空格键的时候,下落2个单位的BLOCK_SIZE,也就是40px - 需要在
canMove函数中添加displacement(位移)参数标识方块下落的位移量 - 判断
方块是否到达最高位置,需要加上位移量的距离 - 加速下落js
- 本步骤示例
第八步:判断游戏GG
第九步:增加随机下落方块
第十步:增加游戏信息
- 增加计分板
- 增加等级判断
- 增加下一个方块提示
- 增加操作提示
- 提示info css
- 游戏信息js
- 本步骤示例
传送门
- 若本教程对你有启发或帮助,各位看官请到github上点
star,给我动力😏 - github地址
- 本教程示例
- 本教程出处
- vue版本的俄罗斯方块