haojianlong преди 4 години
родител
ревизия
9ce05d53d8

+ 331 - 0
docs/.vuepress/components/engine/demo/elsfk.vue

@@ -0,0 +1,331 @@
+<template>
+    <div>
+        <canvas :id="id" width="320" height="620" tabindex="0"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
+    import {SCanvasView, SColor, SPainter} from "@persagy-web/draw/lib";
+
+    class TestView extends SCanvasView {
+        map: number[][] = [];
+        fkType: number = Number((Math.random() * 6).toFixed());  // 0-6
+        dir: number = Number((Math.random() * 2).toFixed());  // 0-3
+        fk: number[][][]=[
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 1, 1],
+                [0, 0, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 0, 0],
+                [1, 1, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [1, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 1],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 0],
+                [1, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 1],
+                [0, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 0],
+                [0, 1, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 1, 0],
+                [0, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 0, 0],
+            ]
+        ];
+        x = 5;
+        y = 0;
+        t = Date.now();
+
+        constructor(id: string) {
+            super(id);
+            this.initMap();
+        }
+
+        onKeyDown(event: KeyboardEvent): void {
+            console.log(event.code);
+            if (event.code == "KeyW") {
+                if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
+                    this.dir = (this.dir + 1) % 4;
+                }
+            } else if (event.code == "KeyA") {
+                if (!this.isPz(this.x - 1, this.y, this.dir)) {
+                    this.x--;
+                }
+            } else if (event.code == "KeyD") {
+                if (!this.isPz(this.x + 1, this.y, this.dir)) {
+                    this.x++;
+                }
+            }
+            else if (event.code == "KeyS") {
+                if (!this.isPz(this.x, this.y + 1, this.dir)) {
+                    this.y++;
+                } else {
+                    this.fullMap();
+                    this.xc();
+                }
+            }
+            this.update();
+        }
+
+        onDraw(painter: SPainter): void {
+            painter.clearRect(0,0,this.width, this.height);
+
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = SColor.Red;
+
+            this.drawMap(painter);
+            this.drawFk(painter);
+
+            if (Date.now() - this.t > 500) {
+                if (!this.isPz(this.x, this.y + 1, this.dir)) {
+                    this.y++;
+                } else {
+                    this.fullMap();
+                    this.xc();
+                }
+                this.t = Date.now();
+            }
+            this.update();
+        }
+
+        private initMap(): void {
+            this.map = [];
+            for (let row = 0; row < 22; row++) {
+                const m1:number[] = []
+                for (let col = 0; col < 14; col++) {
+                    if (row > 19 || col < 2 || col > 11) {
+                        m1.push(2);
+                    } else {
+                        m1.push(0);
+                    }
+                }
+                this.map.push(m1);
+            }
+        }
+
+        private drawMap(painter: SPainter): void {
+            for (let row = 0; row < 22; row++) {
+                for (let col = 0; col < 14; col++) {
+                    if (this.map[row][col] == 1) {
+                        painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
+                    }
+                    if (this.map[row][col] == 2) {
+                        painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
+                    }
+                }
+            }
+        }
+
+        private drawFk(painter: SPainter): void {
+            for (let row = 0; row < 4; row++) {
+                for (let col = 0; col < 4; col++) {
+                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
+                        painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
+                    }
+                }
+            }
+        }
+
+        private isPz(x: number, y: number, dir: number): boolean {
+            for (let row = 0; row < 4; row++) {
+                for (let col = 0; col < 4; col++) {
+                    if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+
+        private fullMap() {
+            for (let row = 0; row < 4; row++) {
+                for (let col = 0; col < 4; col++) {
+                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
+                        this.map[this.y + row][this.x + col] = 1;
+                    }
+                }
+            }
+
+            this.x = 5;
+            this.y = 0;
+            this.fkType = Number((Math.random() * 6).toFixed());
+            this.dir = Number((Math.random() * 2).toFixed());
+        }
+
+        private xc(): void{
+            for (let row = 0; row < 20; row++) {
+                let flag = true;
+                for (let col = 0; col < 14; col++) {
+                    if (this.map[row][col] == 0) {
+                        flag = false;
+                        break;
+                    }
+                }
+                if(flag){
+                    this.map.splice(row,1);
+                    this.map.unshift([2,2,0,0,0,0,0,0,0,0,0,0,2,2]);
+                    // row--;
+                }
+            }
+        }
+    }
+
+    @Component
+    export default class ElsfkCanvas extends Vue {
+        id: string = uuid();
+        mounted(): void {
+            new TestView(this.id);
+        }
+    }
+</script>

+ 379 - 0
docs/.vuepress/components/engine/demo/elsfkDifficult.vue

@@ -0,0 +1,379 @@
+<template>
+    <div>
+        <canvas :id="id" width="320" height="620" tabindex="0"/>
+        <p>{{score}}</p>
+        <el-button @click="reset">reset</el-button>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+    import { v1 as uuid } from "uuid";
+    import {SCanvasView, SColor, SPainter, STextAlign} from "@persagy-web/draw/lib";
+
+    class TestView extends SCanvasView {
+        map: number[][] = [];
+        fkType: number = Number((Math.random() * 6).toFixed());  // 0-6
+        dir: number = Number((Math.random() * 2).toFixed());  // 0-3
+        fk: number[][][]=[
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 1, 1],
+                [0, 0, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 0, 0],
+                [1, 1, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [1, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 1],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 0],
+                [1, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 1],
+                [0, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 0, 1, 0],
+                [0, 1, 1, 1],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [0, 1, 0, 0],
+                [0, 1, 1, 0],
+                [0, 1, 0, 0],
+            ],
+            [
+                [0, 0, 0, 0],
+                [1, 1, 1, 0],
+                [0, 1, 0, 0],
+                [0, 0, 0, 0],
+            ],
+            [
+                [0, 0, 1, 0],
+                [0, 1, 1, 0],
+                [0, 0, 1, 0],
+                [0, 0, 0, 0],
+            ]
+        ];
+        x = 5;
+        y = 0;
+        t = Date.now();
+        gameOver: boolean = false;
+        xzColor: SColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());
+
+        constructor(id: string) {
+            super(id);
+            this.initMap();
+        }
+
+        onKeyDown(event: KeyboardEvent): void {
+            if (this.gameOver) {
+                return;
+            }
+            if (event.code == "KeyW") {
+                if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
+                    this.dir = (this.dir + 1) % 4;
+                }
+            } else if (event.code == "KeyA") {
+                if (!this.isPz(this.x - 1, this.y, this.dir)) {
+                    this.x--;
+                }
+            } else if (event.code == "KeyD") {
+                if (!this.isPz(this.x + 1, this.y, this.dir)) {
+                    this.x++;
+                }
+            }
+            else if (event.code == "KeyS") {
+                if (!this.isPz(this.x, this.y + 1, this.dir)) {
+                    this.y++;
+                } else {
+                    this.fullMap();
+                }
+            }
+            this.update();
+        }
+
+        onDraw(painter: SPainter): void {
+            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');
+            painter.brush.color = new SColor("#2accc7");
+            this.drawMap(painter);
+
+            painter.pen.color = SColor.Transparent;
+            painter.brush.color = this.xzColor;
+            this.drawFk(painter);
+
+            if (Date.now() - this.t > 500) {
+                if (!this.isPz(this.x, this.y + 1, this.dir)) {
+                    this.y++;
+                } else {
+                    this.fullMap();
+                }
+                this.t = Date.now();
+            }
+            this.update();
+        }
+
+        initMap(): void {
+            this.gameOver = false;
+            this.map = [];
+            for (let row = 0; row < 22; row++) {
+                const m1:number[] = [];
+                for (let col = 0; col < 14; col++) {
+                    if (row > 19 || col < 2 || col > 11) {
+                        m1.push(2);
+                    } else {
+                        m1.push(0);
+                    }
+                }
+                this.map.push(m1);
+            }
+        }
+
+        private drawMap(painter: SPainter): void {
+            for (let row = 0; row < 22; row++) {
+                for (let col = 0; col < 14; col++) {
+                    const n = this.map[row][col];
+                    if (n == 1 || n == 2) {
+                        painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
+                    }
+                    // if (n == 0) {
+                    //     painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
+                    // }
+                }
+            }
+        }
+
+        private drawFk(painter: SPainter): void {
+            for (let row = 0; row < 4; row++) {
+                for (let col = 0; col < 4; col++) {
+                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
+                        painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
+                    }
+                }
+            }
+        }
+
+        private isPz(x: number, y: number, dir: number): boolean {
+            for (let row = 0; row < 4; row++) {
+                for (let col = 0; col < 4; col++) {
+                    if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+
+        private fullMap() {
+            for (let row = 0; row < 4; row++) {
+                for (let col = 0; col < 4; col++) {
+                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
+                        this.map[this.y + row][this.x + col] = 1;
+                    }
+                }
+            }
+
+            this.x = 5;
+            this.y = 0;
+            this.fkType = Number((Math.random() * 6).toFixed());
+            this.dir = Number((Math.random() * 2).toFixed());
+
+            if(this.isPz(this.x, this.y, this.dir)){
+                this.gameOver = true;
+            }
+            this.xc();
+            this.xzColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());
+        }
+
+        private xc(): void{
+            let xcSum = 1;
+            for (let row = 0; row < 20; row++) {
+                let flag = true;
+                for (let col = 0; col < 14; col++) {
+                    if (this.map[row][col] == 0) {
+                        flag = false;
+                        break;
+                    }
+                }
+                if(flag){
+                    this.map.splice(row,1);
+                    this.map.unshift([2,2, 0,0,0,0,0,0,0,0,0,0,2,2]);
+                    xcSum++;
+                }
+            }
+            if (xcSum > 1) {
+                this.$emit('score', xcSum);
+                this.map.shift();
+                this.map.splice(19, 0, [2,2, this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),2,2])
+            }
+        }
+
+        private random():number{
+            return Number(Math.random().toFixed())
+        }
+    }
+
+    @Component
+    export default class ElsfkCanvas extends Vue {
+        id: string = uuid();
+        scoreList: number[] = [100, 300, 600, 1000];
+        score: number = 0;
+        view: TestView | undefined = undefined;
+        mounted(): void {
+            this.view = new TestView(this.id);
+            this.view.connect('score', this, this.changeScore)
+            document.getElementById(this.id)!!.focus();
+        }
+
+        changeScore(v: SCanvasView, count: number[]) {
+            this.score+= this.scoreList[count[0] - 2];
+        }
+
+        reset(){
+            this.view!!.initMap();
+            this.score = 0;
+            this.view!!.update();
+            document.getElementById(this.id)!!.focus();
+        }
+    }
+</script>

+ 15 - 0
docs/guides/engine/demo/elsfk.md

@@ -0,0 +1,15 @@
+# 俄罗斯方块
+
+::: details 目录
+[[toc]]
+:::
+
+## 直线
+
+<engine-demo-elsfk /> 
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/engine/demo/elsfk.vue
+
+:::

+ 15 - 0
docs/guides/engine/demo/elsfkDifficult.md

@@ -0,0 +1,15 @@
+# 俄罗斯方块
+
+::: details 目录
+[[toc]]
+:::
+
+## 直线
+
+<engine-demo-elsfkDifficult /> 
+
+::: details 查看代码
+
+<<< @/docs/.vuepress/components/engine/demo/elsfkDifficult.vue
+
+:::

+ 1 - 1
docs/guides/engine/draw.md

@@ -1,4 +1,4 @@
-# 绘制形状111       
+# 绘制形状
 
 ::: details 目录
 [[toc]]

+ 7 - 0
docs/guides/index.js

@@ -23,6 +23,13 @@ const content = [
             ["/guides/engine/clip", "裁剪"],
             ["/guides/engine/arrow", "绘制带有箭头的线段"],
             ["/guides/engine/selectContainer", "选择容器"],
+            {
+                title: '综合示例',
+                children: [
+                    ["/guides/engine/demo/elsfk", "俄罗斯方块"],
+                    ["/guides/engine/demo/elsfkDifficult", "俄罗斯方块-英雄版"],
+                ]
+            }
         ]
     },
     {