📌个人主页：个人主页
​🧀 推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】
📝作者简介：从web开发，再到大数据算法，踩过了无数的坑，用心总结经验教训，助你在技术生涯一臂之力！若想获取更多精彩内容，敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
⭐️您的小小关注是我持续输出的动力！⭐️

干货内容推荐

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

• 《小程序开发必备功能的吐血整理【个人中心界面样式大全】》

• 《微信小程序 | 动手实现双十一红包雨》

• 《微信小程序 | 人脸识别的最终解决方案》

• 《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》

• 《吐血整理的几十款小程序登陆界面【附完整代码】》

文章目录

• 干货内容推荐
• • 需求背景
  • 一、效果预览
  • 二、技术关键点
  • • 2.1 技术栈
    • 2.2 技术难点
  • 三、完整源码

需求背景

俄罗斯方块作为童年时期的经典怀旧游戏，该游戏我们更多的是在接机或者是pc端进行的体验，这次我们自己动手实现一次在web端，以及在移动端的俄罗斯方块，想要什么效果那我们自己造。😁😂🤣😃😄😅😆

一、效果预览

二、技术关键点

2.1 技术栈

• 项目使用了Vue 2.0的语法规则，并非原生的微信小程序语法！
• 兼容了uniapp框架的扩展能力！可以借助uniapp技术将vue的语法构建打包成微信小程序语法。

2.2 技术难点

• (1)方块的移动

俄罗斯方块中最重要的模块莫非在于这个宫格棋盘。在宫格棋盘中要实现模块的运动和变化，其中关键点在于控制某个模块形状在棋盘中的现实状态。

对于棋盘我们使用一个二维数组实现: block[][]
特别对其下落的模块进行形状的预先定义，然后再根据用户操作进行选取：

• (2)键盘的控制
  要控制方块的下落和形状，我们得采用键盘对方块进行控制。

这时我们需要采用监听键盘得事件：

	document.addEventListener('keydown', function(e) {// console.log("----->当前按键keyCode:" + e.keyCode);switch (e.keyCode) {case 37:that.moveLeft();break;case 38:that.rotateBlock();break;case 39:that.moveRight();break;case 40:that.moveDown();break;}})

三、完整源码