persagy-web-doc/docs/.vuepress/components/engine/demo/elsfk.vue

<template>
    <div>
        <canvas :id="id" width="320" height="620" tabindex="0"/>
    </div>
</template>

<script lang="ts">
    import { Component, 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.floor(Math.random() * 7));  // 0-6
        /** 方块变形索引 */
        dir: number = Number(Math.floor((Math.random() * 4)));  // 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坐标 */
        x = 5;
        /** 方块初始位置y坐标 */
        y = 0;
        /** 记录上次刷新时间 */
        t = Date.now();

        /**
         * 构造函数
         * @param id canvas DOM id
         */
        constructor(id: string) {
            super(id);
            this.initMap();
        }

        /**
         * 键盘按下事件
         * @param event 事件对象
         */
        onKeyDown(event: KeyboardEvent): void {
            //按键判断
            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();
        }

        /**
         * Item 绘制操作
         *
         * @param painter   绘制对象
         */
        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);
            }
        }

        /**
         * 绘制背景
         *
         * @param painter 绘制对象
         */
        private drawMap(painter: SPainter): void {
            for (let row = 0; row < 22; row++) {
                for (let col = 0; col < 14; col++) {
                    const x = col * 30 + 11 - 60;
                    const y = row * 30 + 11;
                    //赋到背景
                    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);
                    }
                }
            }
        }

        /**
         * 绘制实体图形
         *
         * @param painter   绘制对象
         */
        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);
                    }
                }
            }
        }

        /**
         * 是否碰撞
         *
         * @param x     x坐标
         * @param y     y坐标
         * @param dir   方块变形索引
         * @return 是否碰撞
         */
        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()
                    this.map.unshift(this.randomRow(10, 0))
                    // this.map.unshift([2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2]);
                    // row--;
                }
            }
        }

        /**
         * 随机数组生成
         *
         * @return 数组
         */
        private randomRow(len: number = 10, num: number = 2): number[] {
            let array = new Array(len + 4).fill(2);
            for (let i = 2; i < array.length - 2; i++) {
                array[i] = Math.floor(num * Math.random())
            }
            return array
        }
    }

    @Component
    export default class ElsfkCanvas extends Vue {
        id: string = uuid();

        mounted(): void {
            new TestView(this.id);
        }
    }
</script>