Pārlūkot izejas kodu

doc:docs> 俄罗斯方块注释完善

shaun-sheep 4 gadi atpakaļ
vecāks
revīzija
29d797ba6c

+ 16 - 16
docs/.vuepress/components/engine/demo/elsfk.vue

@@ -15,7 +15,7 @@ import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib
 /**
  * 俄罗斯方块视图
  *
- * @author  庞利祥 <sybotan@126.com>
+ * @author 郝洁 <haojie@persagy.com>
  */
 class TetrisView extends SCanvasView {
     /** 网格数组 (二维数组初始化) */
@@ -209,7 +209,7 @@ class TetrisView extends SCanvasView {
         ]
     ];
 
-    // /** 记分数组列表 */
+    /** 记分数组列表 */
     private _scoreList = [100, 300, 600, 1000];
 
     /**
@@ -222,7 +222,7 @@ class TetrisView extends SCanvasView {
 
         // 初始化游戏
         this.init();
-    }
+    } // Constructor
 
     /**
      * 初始化游戏
@@ -282,7 +282,7 @@ class TetrisView extends SCanvasView {
 
         // 更新视图
         this.update();
-    }
+    } // Function onKeyDown()
 
     /**
      * 绘制游戏画面
@@ -300,10 +300,10 @@ class TetrisView extends SCanvasView {
         if (this.isGameOver) {
             // 闪烁显示 “Game Over”
             canvas.brush.color = SColor.Blue;
-            canvas.font.size = 20;
+            canvas.font.size = 40;
             canvas.font.textAlign = STextAlign.Center;
             if (Date.now() % 1000 > 500) {
-                canvas.drawText("Game Over", 50, 300);
+                canvas.drawText("Game Over", 160, 300);
             }
 
             // 刷新游戏画面
@@ -324,7 +324,7 @@ class TetrisView extends SCanvasView {
 
         // 刷新游戏画面
         this.update();
-    }
+    } // Function onDraw()
 
     /**
      * 绘制网格
@@ -340,7 +340,7 @@ class TetrisView extends SCanvasView {
                 this.drawGird(canvas, this.gridMap[r][c], r, c);
             }
         }
-    }
+    } // Function drawGridMap()
 
     /**
      * 绘制下落的 Box
@@ -356,7 +356,7 @@ class TetrisView extends SCanvasView {
                 this.drawGird(canvas, this.box[this.boxType * 4 + this.dir][r][c], this.currRow + r, this.currCol + c);
             }
         }
-    }
+    } // Function drawFallBox()
 
     /**
      * 执行 box 下落流程
@@ -389,7 +389,7 @@ class TetrisView extends SCanvasView {
         }
         // 生成新的下落 box
         this.newFallBox();
-    }
+    } // Function fallBox()
 
     /**
      * 画一个小格
@@ -407,7 +407,7 @@ class TetrisView extends SCanvasView {
             canvas.brush.color = SColor.Red;
             canvas.drawRect(col * 30 + 11, row * 30 + 11, 28, 28);
         }
-    }
+    } // Function drawGird()
 
     /**
      * 判断当前下落的方块是否会发生碰撞
@@ -441,7 +441,7 @@ class TetrisView extends SCanvasView {
 
         // 返回不发生碰撞
         return false;
-    }
+    } // Function checkCollide()
 
     /**
      * 当前下落 box 填充到网格
@@ -465,7 +465,7 @@ class TetrisView extends SCanvasView {
                 }
             }
         }
-    }
+    } // Function boxIntoMap()
 
     /**
      * 生成新的下落方块
@@ -478,7 +478,7 @@ class TetrisView extends SCanvasView {
         // box 的类型与方向
         this.boxType = Number(Math.floor(Math.random() * 7));
         this.dir = Number(Math.floor(Math.random() * 4));
-    }
+    } // Function newFallBox()
 
     /**
      * 消除满行(即不存在空格的行)
@@ -514,13 +514,13 @@ class TetrisView extends SCanvasView {
 
         // 返回消除的行数
         return count
-    }
+    } // Function removeFullRow()
 }
 
 /**
  * 俄罗斯方块 demo
  *
- * @author  庞利祥 <sybotan@126.com>
+ * @author 郝洁 <haojie@persagy.com>
  */
 @Component
 export default class Tetris1 extends Vue {

+ 49 - 34
docs/.vuepress/components/engine/demo/elsfkDifficult.vue

@@ -22,9 +22,9 @@ class TestView extends SCanvasView {
     /** 背景表示数组 */
     map: number[][] = [];
     /** 方块类型索引 0-6 */
-    boxType: number = Number(Math.floor(Math.random() * 7));  
+    boxType: number = Number(Math.floor(Math.random() * 7));
     /** 方块变形索引 0-3 */
-    dir: number = Number(Math.floor(Math.random() * 4)); 
+    dir: number = Number(Math.floor(Math.random() * 4));
     /** 所有方块集合 */
     box: number[][][] = [
         [
@@ -196,9 +196,9 @@ class TestView extends SCanvasView {
             [0, 0, 0, 0],
         ]
     ];
-    /** 方块初始位置x坐标 */
+    /** 方块初始位置 x 坐标 */
     x = 5;
-    /** 方块初始位置y坐标 */
+    /** 方块初始位置 y 坐标 */
     y = 0;
     /** 记录上次刷新时间 */
     t = Date.now();
@@ -216,7 +216,7 @@ class TestView extends SCanvasView {
         super(id);
         this.initMap();
         this.initColor();
-    }
+    } // Constructor
 
     /**
      * 键盘按下事件
@@ -224,32 +224,40 @@ class TestView extends SCanvasView {
      * @param event 事件对象
      */
     onKeyDown(event: KeyboardEvent): void {
-        if (this.gameOver) {    // 游戏结束
+        // 如果游戏结束, 不响应任何键
+        if (this.gameOver) {
             return;
         }
 
-        if (event.code == "KeyW") { // 按键 w
-            if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {    // 检查变形后是否碰撞
+        if (event.code == "KeyW") { // 用户按下 W 键,变形
+            // 如果变形不会碰撞
+            if (!this.checkKnocked(this.x, this.y, (this.dir + 1) % 4)) {
+                // 进行变形操作
                 this.dir = (this.dir + 1) % 4;
             }
-        } else if (event.code == "KeyA") {  // 按键 a
-            if (!this.checkKnocked(this.x - 1, this.y, this.dir)) { // 检查左移后是否碰撞
+        } else if (event.code == "KeyA") {  // 用户按下 A 键,左移
+            // 如果左移不会碰撞
+            if (!this.checkKnocked(this.x - 1, this.y, this.dir)) {
+                // 左移
                 this.x--;
             }
-        } else if (event.code == "KeyD") { // 按键 d
-            if (!this.checkKnocked(this.x + 1, this.y, this.dir)) { // 检查右移后是否碰撞
+        } else if (event.code == "KeyD") { // 用户按下 D 键,右移
+            // 如果右移不会碰撞
+            if (!this.checkKnocked(this.x + 1, this.y, this.dir)) {
+                // 右移
                 this.x++;
             }
-        } else if (event.code == "KeyS") { // 按键 s
-            if (!this.checkKnocked(this.x, this.y + 1, this.dir)) { // 检查下移后是否碰撞
+        } else if (event.code == "KeyS") { // 用户按下 S 键,下移
+            if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {
+                // 下移
                 this.y++;
             } else {
                 this.fillMap();
             }
         }
-
+        // 更新视图
         this.update();
-    }
+    } // Function onKeyDown()
 
     /**
      * Item 绘制操作
@@ -257,15 +265,15 @@ class TestView extends SCanvasView {
      * @param painter 绘制对象
      */
     onDraw(painter: SPainter): void {
-
-        if (this.gameOver) {    // 游戏结束绘制文字
+        // 如果游戏结束,绘制文字
+        if (this.gameOver) {
             painter.brush.color = SColor.Blue;
             painter.font.size = 20;
             painter.font.textAlign = STextAlign.Center;
             painter.drawText("GAME OVER", 180, 30);
             return;
         }
-
+        // 清空画布
         painter.clearRect(0, 0, this.width, this.height);
 
         painter.pen.color = new SColor("#0bc0ff");
@@ -277,8 +285,8 @@ class TestView extends SCanvasView {
         // 绘制图形
         this.drawBox(painter);
 
-
-        if (Date.now() - this.t > 500) {    // 下落速度,下移一格
+        // 判断是否到了 box 下落的时间(用时间间隔判断,不会受机器的性能影响)
+        if (Date.now() - this.t > 500) {
             if (!this.checkKnocked(this.x, this.y + 1, this.dir)) {  // 下移是否碰撞
                 this.y++;
             } else {
@@ -286,8 +294,9 @@ class TestView extends SCanvasView {
             }
             this.t = Date.now();
         }
+        // 刷新游戏画面
         this.update();
-    }
+    } // Function onDraw()
 
     /**
      * 初始化背景
@@ -307,18 +316,20 @@ class TestView extends SCanvasView {
             }
             this.map.push(m1);
         }
-    }
+    } // Function initMap()
 
     /**
      * 初始化方块形状
      */
     initBox(): void {
+        // box 的初始位置
         this.x = 5;
         this.y = 0;
+        // box 的类型与方向
         this.boxType = Number(Math.floor(Math.random() * 7));
         this.dir = Number(Math.floor(Math.random() * 4));
         this.initColor();
-    }
+    } // Function initBox()
 
     /**
      * 初始化方块颜色
@@ -328,7 +339,7 @@ class TestView extends SCanvasView {
         const b = Number(Math.floor(Math.random() * 128));
         const c = Number(Math.floor(Math.random() * 128));
         this.boxColor = new SColor(a, b, c);
-    }
+    } // Function initColor()
 
     /**
      * 绘制背景
@@ -336,12 +347,14 @@ class TestView extends SCanvasView {
      * @param painter 绘制对象
      */
     private drawMap(painter: SPainter): void {
-        for (let row = 0; row < 22; row++) {    // 行数
-            for (let col = 0; col < 14; col++) {  // 列数
+        // 遍历行
+        for (let row = 0; row < 22; row++) {
+            // 遍历列
+            for (let col = 0; col < 14; col++) {
                 this.drawShape(painter, row, col, this.map[row][col]);
             }
         }
-    }
+    } // Function drawMap()
 
     /**
      * 绘制实体图形
@@ -367,7 +380,7 @@ class TestView extends SCanvasView {
                 painter.drawRoundRect(x, y, 28, 28, 6);
                 break;
         }
-    }
+    } // Function drawShape()
 
     /**
      * 绘制方块
@@ -380,7 +393,7 @@ class TestView extends SCanvasView {
                 this.drawShape(painter, row + this.y, col + this.x, this.box[this.boxType * 4 + this.dir][row][col]);
             }
         }
-    }
+    } // Function drawBox()
 
     /**
      * 是否碰撞
@@ -399,8 +412,9 @@ class TestView extends SCanvasView {
                 }
             }
         }
+        // 返回不发生碰撞
         return false;
-    }
+    } // Function checkKnocked()
 
     /**
      * 将方块合到背景中
@@ -422,7 +436,7 @@ class TestView extends SCanvasView {
         }
 
         this.remove();
-    }
+    } // Function fillMap()
 
     /**
      * 消除满行
@@ -446,6 +460,7 @@ class TestView extends SCanvasView {
                 this.map.splice(row, 1);
                 // 顶部加一行空行
                 this.map.unshift(this.randomRow(10, 0));
+                // 统计消除的行数
                 removeCount++;
             }
         }
@@ -457,7 +472,7 @@ class TestView extends SCanvasView {
             // 底部随机产生一行
             this.map.splice(19, 0, this.randomRow());
         }
-    }
+    } // Function remove()
 
     /**
      * 随机数组生成
@@ -472,7 +487,7 @@ class TestView extends SCanvasView {
         }
 
         return array;
-    }
+    } // Function randomRow()
 }
 
 @Component