（小游戏）详解前端俄罗斯方块代码：HTML+JS+CANVAS实现原理

喜欢就给我点个星吧：https://github.com/Chenyating/easyGame

想写个俄罗斯方块的小游戏，发现网上的各位大佬的代码，我看不明白。

好吧，其实我一直都看不懂别人的代码。

可是，flag已经立了，写肯定是要写的啦。

嗯……还是自力更生，自给自足。撸起袖子，说写就写。现在就说说我自己的经验；

查看效果，请点击这个地址哦~，你们可以玩一把，告诉我需要改进的地方：http://www.yating.online/game/tetris.html

不介意的话，贪吃蛇也可以哦：http://www.yating.online/game/retroSnaker.html

最终效果图为：手指滑动屏幕即可。

俄罗斯方块显然比贪吃蛇难度大点。

但是

经过我的一步一步分析，我似乎看到了一条明朗的道路，现在我将我是如何一步一步的写出这俄罗斯方块的过程告诉你们吧。

看我正经脸

 

第一步：俄罗斯单方块——shap【】 和 游戏界面——all【】；

1.1：我们来分析一下，俄罗斯单个方块有7种不同的样子，以下我用Excel表格，画出这7个类型。

 

1.2：其中，上色状态为：0表示没有颜色，1表示有颜色。这7个类型的俄罗斯单方块，我暂且用shap数组来表示他们

以下开始以shap来表示单方块。例如：

所以，shap就有7种不同的值；

为什么要是一个正方形呢？这样就方便我们去旋转改变shap的方向；

 

1.3：接着设置一下游戏的界面，是这一个宽400 * 高800 的canvas 画布，其中小小方格的尺寸为20*20；

这个画布是一张二维数组的表，shap们会在这个表堆积起来。我将这个表叫all[ ]。

所以我们已经得出了，横的有20个小方格，竖的有40个小方格；

默认每个小方格都是不上色的，例如all【1,1】=0表示 小小方格位置在【1,1】是没有上色的；

      //初始化堆积方块
        for (let i = 0; i < 40; i++) {
          this.all[i] = new Array(0);
          for (let j = 0; j < 20; j++) {
            this.all[i][j] = 0;
          }
        }

根据上色的小方格，我们就可以知道all对应的值：

1.4：现在我们开始初始化，shap的各个形状。

shap的【】每个值，也就是每个小方块：都存3个数值，它们分别表示x坐标，y坐标，上色状态（0或1）；

• shap【i】【j】【0】---->x；
• shap【i】【j】【1】---->y;
• shap【i】【j】【2】---->上色状态；

我们主要改变的是shap【i】【j】【2】的值，即上色状态；

通过x和y我们就能得到小小方格在all的位置：（x/20，y/20 ）

radomID：表示随机的初始化第radomID种shap；因为shap肯定是要在整个all看不到的上面中间，所以200是默认的中间位置，y 必须设置成小于0；以下就是，shap【】的7种初始状态：都在all画布之上。

     switch (this.radomID) {
        case 0:
          //长条
          let defaultX = 200;
          let defaultY = -60;
          for (var i = 0; i < 5; i++) {
            defaultX = 200;
            if (i == 2) {
              this.$set(this.shap, i, [
                [defaultX, defaultY, 1],
                [(defaultX += 20), defaultY, 1],
                [(defaultX += 20), defaultY, 1],
                [(defaultX += 20), defaultY, 1],
                [(defaultX += 20), defaultY, 0]
              ]);
            } else {
              this.$set(this.shap, i, [
                [defaultX, defaultY, 0],
                [(defaultX += 20), defaultY, 0],
                [(defaultX += 20), defaultY, 0],
                [(defaultX += 20), defaultY, 0],
                [(defaultX += 20), defaultY, 0]
              ]);
            }
            defaultY += 20;
          }
          console.log(this.shap)
          break;
        case 1:
          //正方形
          this.$set(this.shap, 0, [
            [200, -40, 1],
            [220, -40, 1]
          ]);
          this.$set(this.shap, 1, [
            [200, -20, 1],
            [220, -20, 1]
          ]);
          break;
        case 2:
          //正7
          this.$set(this.shap, 0, [
            [200, -60, 1],
            [220, -60, 1],
            [240, -60, 0]
          ]);
          this.$set(this.shap, 1, [
            [200, -40, 0],
            [220, -40, 1],
            [240, -40, 0]
          ]);
          this.$set(this.shap, 2, [
            [200, -20, 0],
            [220, -20, 1],
            [240, -20, 0]
          ]);
          break;
        case 3:
          //反7
          this.$set(this.shap, 0, [
            [200, -60, 0],
            [220, -60, 1],
            [240, -60, 1]
          ]);
          this.$set(this.shap, 1, [
            [200, -40, 0],
            [220, -40, 1],
            [240, -40, 0]
          ]);
          this.$set(this.shap, 2, [
            [200, -20, 0],
            [220, -20, 1],
            [240, -20, 0]
          ]);
          break;
        case 4:
          //正2
          this.$set(this.shap, 0, [
            [200, -60, 1],
            [220, -60, 1],
            [240, -60, 0]
          ]);
          this.$set(this.shap, 1, [
            [200, -40, 0],
            [220, -40, 1],
            [240, -40, 1]
          ]);
          this.$set(this.shap, 2, [
            [200, -20, 0],
            [220, -20, 0],
            [240, -20, 0]
          ]);
          break;
        case 5:
          //反2
          this.$set(this.shap, 0, [
            [200, -60, 0],
            [220, -60, 1],
            [240, -60, 1]
          ]);
          this.$set(this.shap, 1, [
            [200, -40, 1],
            [220, -40, 1],
            [240, -40, 0]
          ]);
          this.$set(this.shap, 2, [
            [200, -20, 0],
            [220, -20, 0],
            [240, -20, 0]
          ]);
          break;
        case 6:
          //土
          this.$set(this.shap, 0, [
            [200, -60, 0],
            [220, -60, 1],
            [240, -60, 0]
          ]);
          this.$set(this.shap, 1, [
            [200, -40, 1],
            [220, -40, 1],
            [240, -40, 1]
          ]);
          this.$set(this.shap, 2, [
            [200, -20, 0],
            [220, -20, 0],
            [240, -20, 0]
          ]);
          break;
        default:
          break;
      }

 

1.5：现在我们来写一个每次出现随机的shap的方法吧：radomShap（）。

 radomShap() {
      this.scope += 1;
      this.pain();
      this.radomID = parseInt(Math.random() * 7);
      // this.deleteShap();
      this.shap.splice(0, this.shap.length); //清空存放单方块的数组
      //shap数组开始存储不同单方块

      【这里是随机的shap初始状态，上面已经展示过代码了，这里就不在复制了】


      this.rotate();
      this.painShap();
    },

每次随机出现一个shap，就要执行这些操作；</