俄罗斯方块的那些事：1.概要

前言

前几天偶然在youtube上看到一个关于俄罗斯方块游戏的视频 视频按时间顺序讲述了这个游戏的诞生，发展，演化，穿插着冷战背景，版权纠纷等等内容，还配有丰富的插画，图片。60时分钟的视频节目（中间还夹了3个非常有创意的广告）内容非常充实，大家有空也可以去看看。 下图是一张视频截图

又勾起了我很多小时的记忆：那时大家都没有什么高科技的娱乐，一台掌上游戏机就是最高级的娱乐工具了。就是下面这个老物件

通常是一个小伙伴玩，另一群人挤在一起看，大家轮着顺序一人玩一把。

最近也听到过到俄罗斯方块这个名词。一次是 《最强大脑》中的一期节目，选手考核的内容就是花式俄罗斯方块的玩法，视频地址 。 第二次是逻辑思维节目中提到了这个游戏。为了写这篇文章，也查了一些资料：

• 《吉尼斯世界纪录大全》已承认此游戏为移植次数最多的电子游戏
• 直接连累玩家坐牢时间最长的游戏
• 它注定没有胜利。从你一开始，就注定会死掉。你一块一块地摆放，一行一行地消去，分数一点一点涨上去，但是方块下掉的速度越来越快，你最终手忙脚乱，注定目送死亡的来到：从上到下、方块慢慢铺满整个屏幕。然后，你抬头看看，时间已经过了很久了。（当然，现在也有吧多人对战版）

比起其他的游戏来说，这确实是一个简单的游戏：规则简单，操作简单，交互简单，但它确实有非常大的魅力：除了闲暇时去玩几把，作为一名程序员，你肯定曾经在某个时刻脑中闪过一个念头：自己从无到有，动手实现一个俄罗斯方块游戏！

ok，进入正题，我准备动手实现一个俄罗斯方块游戏，并记录下整个流程，希望可以帮到和我有一样想法的人。

本系列的介绍

技术栈

typescript + canvas + gulp

为什么用typescript

• 相比js，它有更强大的代码提示功能。
• 它能更好地展示面向对象编程的思想。

跟gulp有什么关系

现在前端想做点什么事，太难了。动不动webpack,gulp,less,sass一大堆名称。前端功能越来越复杂，代码越来越多，我们一定绕不开模块化，而浏览器端的模块化并没有统一的解决方案。现在的解决方案有两种：

• 单个文件写代码，通过 sea.js/require.js 引入。
• 单个文件写代码，通过打包工具打成一个文件，直接引入。 gulp在这里充当了打包文件的功能。

内容

根据想要达到的效果，这个游戏有难的做法，也有简单的做法。我并不希望太简单，简单了就没有什么意思；也不希望太复杂，一个太过复杂的效果也并不会有太高的收益。毕竟，这已经是一个很成熟的游戏了，花太长的时间也不太可能做出更多的创新。在简单和复杂之间，我最希望保持代码纯粹性（少点外部依赖）和可扩展性（可以方便地添加，改造功能）。

本系列文章将涉及包含，但不限于如下内容：

开发游戏的基本思路

如何去搭建游戏的基本框架，如何让游戏运作起来。

模块化

这个游戏虽然简单，但用面向对象的思路去开发，有利于游戏的扩展。我会提炼出游戏中的对象： 方块，背景方块，分数，游戏... 并用es6模块化的方式去开发。

俄罗斯方块游戏的细节

如何表示一个方块，如何进行方块的转向，如何进行碰撞检测.... 我将进行详细的分析，描述。

事件中心：观察者模式

游戏中存在大量的事件，例如：得分，碰撞... 。当一个特殊的事件发生时，要去通知不同的对象去做出不同的反馈。为了解决在不同的对象之间进行通信，通过观察者模式来实现一个事件中心。

canvas操作

canvas绘图并不是主要的内容，这里只涉及简单的api：

• fillRect：简单的绘制矩形
• clearRect：清除画布

工程化

如何让整个开发，调试过程更简单。我需要借助一些工程手段。

• gulp
• liveserver 当然，工程化的东西也不要太多，保持基本的可用状态就行。工程化的部分，我也会打算单独开一篇讲讲。

目标

写字是很费时间的，我希望我能帮助到更多的人。另一个自私的目:若干年后，我可以告诉我的小孩来这里看看这个游戏的原理，然后，让他用他那个时候流行的语言来实现一遍，也写个联机对战版，跟他比试一番，想想就奇妙。 这是程序员的特权吧:"hi，小子，看看我写的游戏"

想想 阿列克谢·帕基特诺夫 和他的小孩窝在沙发里pk的画面吧，是不是很奇妙。下图附上：

转载于:https://juejin.im/post/5c42f2946fb9a049c043537d