Forráskód Böngészése

doc:fix> 俄罗斯方块优化

shaun-sheep 4 éve
szülő
commit
32b68992f3
1 módosított fájl, 14 hozzáadás és 23 törlés
  1. 14 23
      docs/.vuepress/components/engine/demo/elsfk.vue

+ 14 - 23
docs/.vuepress/components/engine/demo/elsfk.vue

@@ -3,16 +3,14 @@
         <canvas id="tetris1" width="320" height="620" style="border: 1px #ccc solid" tabindex="0"/>
         <div style="position: absolute;top: 0;left: 350px;">
             <p>{{view?view.score:0}}</p>
-            <button @click="reset">重新开始</button>
+            <el-button @click="reset" type="primary">重新开始</el-button>
         </div>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { SColor } from "sybotan-base";
-import { SCanvas, SCanvasView, SPaint } from "sybotan-graph";
-import { SPaintStyle } from "sybotan-graph/lib";
+import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";
 
 /**
  * 俄罗斯方块视图
@@ -20,10 +18,6 @@ import { SPaintStyle } from "sybotan-graph/lib";
  * @author  庞利祥 <sybotan@126.com>
  */
 class TetrisView extends SCanvasView {
-    /** 小格画笔 */
-    gridPaint = new SPaint();
-    /** 文字画笔 */
-    textPaint = new SPaint();
     /** 网格数组 (二维数组初始化) */
     gridMap = Array(20)
         .fill(null)
@@ -226,14 +220,6 @@ class TetrisView extends SCanvasView {
     constructor(id: string) {
         super(id);
 
-        // 设置绘制网格的颜色
-        this.gridPaint.fill = SColor.Red;
-        this.gridPaint.style = SPaintStyle.Fill;
-
-        // 设置 GameOver 文本的颜色与字体
-        this.textPaint.fill = SColor.Blue;
-        this.textPaint.font.size = 40;
-
         // 初始化游戏
         this.init();
     }
@@ -303,9 +289,9 @@ class TetrisView extends SCanvasView {
      *
      * @param   canvas      画布
      */
-    onDraw(canvas: SCanvas): void {
+    onDraw(canvas: SPainter): void {
         // 清空画布
-        this.clear();
+        canvas.clearRect(0, 0, this.width, this.height);
 
         // 绘制网格
         this.drawGridMap(canvas);
@@ -313,8 +299,11 @@ class TetrisView extends SCanvasView {
         // 如果游戏结束
         if (this.isGameOver) {
             // 闪烁显示 “Game Over”
+            canvas.brush.color = SColor.Blue;
+            canvas.font.size = 20;
+            canvas.font.textAlign = STextAlign.Center;
             if (Date.now() % 1000 > 500) {
-                canvas.drawText("Game Over", 50, 300, this.textPaint);
+                canvas.drawText("Game Over", 50, 300);
             }
 
             // 刷新游戏画面
@@ -342,7 +331,7 @@ class TetrisView extends SCanvasView {
      *
      * @param   canvas      画布
      */
-    private drawGridMap(canvas: SCanvas): void {
+    private drawGridMap(canvas: SPainter): void {
         // 遍历行
         for (let r = 0; r < 20; r++) {
             // 遍历列
@@ -358,7 +347,7 @@ class TetrisView extends SCanvasView {
      *
      * @param   canvas      画布
      */
-    private drawFallBox(canvas: SCanvas): void {
+    private drawFallBox(canvas: SPainter): void {
         // 遍历 box 的行
         for (let r = 0; r < 4; r++) {
             // 遍历 box 的列
@@ -410,11 +399,13 @@ class TetrisView extends SCanvasView {
      * @param   row         行
      * @param   col         列
      */
-    private drawGird(canvas: SCanvas, type: number, row: number, col: number): void {
+    private drawGird(canvas: SPainter, type: number, row: number, col: number): void {
         // 如果类型不为 0
         if (type != 0) {
             // 绘制小格
-            canvas.drawRect(col * 30 + 11, row * 30 + 11, 28, 28, this.gridPaint);
+            canvas.pen.color = SColor.Transparent;
+            canvas.brush.color = SColor.Red;
+            canvas.drawRect(col * 30 + 11, row * 30 + 11, 28, 28);
         }
     }