linelinekan KKK笔记

<template>
    <view class="body">
        <view class="con">
            <block v-for="(item,index) in list" :key="index">
                <block v-for="(item2,index2) in item" :key="index2">
                    <view :id="'T'+index+'_'+index2" class="kuai" :style="[{'visibility':item2[1]==-1?'hidden':''} ]"
                        @tap='clickpoine' :data-in='item2'>
                        {{item2[1]}}
                    </view>
                </block>
            </block>
        </view>
        <canvas id="canvasdiv" canvas-id="canvasdiv"></canvas>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                itm: [],
                new: "",
                old: "",
                linelist: [],
                lineturn: 99,
                arossdata: {
                    star: "",
                    end: "",
                    list: []
                },
                getline: 0, //1完成连线 0 连线未完成
            };
        },
        onReady() {
            this.$titleText.getTitleText()
        },
        onLoad(options) {
            this.stargame()
        },
        onShow() {

        },
        onUnload() {
            if (this.initialstate) {
                this.$server.addFinish(this.residencetime)
            }
        },
        onHide() {
            if (this.initialstate) {
                this.$server.addFinish(this.residencetime)
            }
        },
        methods: {
            getPosi(id) {
                return new Promise((resolve, reject) => {
                    const query = uni.createSelectorQuery().in(this);
                    query.select('#' + id).boundingClientRect(data => {
                        // console.log("得到布局位置信息" + JSON.stringify(data));
                        // console.log("节点离页面顶部的距离为" + data);
                        resolve(data)
                    }).exec();
                })
            },
            async CreateLine() {
                let ctx = uni.createCanvasContext('canvasdiv');
                ctx.beginPath()
                for (let j = this.linelist.length - 1; j > 0; j--) {
                    let tid = await this.getPosi(this.linelist[j]);
                    let fid = await this.getPosi(this.linelist[j - 1]);
                    let f_width = fid.width;
                    let f_height = fid.height;
                    let t_width = tid.width;
                    let t_height = tid.height;
                    let f_top = fid.top + f_width / 2;
                    let f_left = fid.left + f_height / 2;
                    let t_top = tid.top + t_width / 2;
                    let t_left = tid.left + t_height / 2;
                    ctx.moveTo(f_left, f_top)
                    ctx.lineTo(t_left, t_top)
                }
                ctx.setStrokeStyle('red')
                ctx.lineWidth = 3
                ctx.stroke()
                ctx.draw()
            },
            //开始游戏
            stargame() {
                let difficulty = "";
                let i1 = 0;
                let i2 = 0;
                let itm = [];
                if (difficulty == "简单") {
                    i1 = 12;
                    i2 = 6;
                } else if (difficulty == "中等") {
                    i1 = 8;
                    i2 = 9;
                } else {
                    i1 = 12;
                    i2 = 6;
                }
                for (let i = 0; i < i2; i++) {
                    for (let a = 0; a < i1; a++) {
                        itm.push(a);
                    }
                }
                // 数组集合
                console.log(itm)
                // 打乱顺序
                Array.prototype.shuffle = function() {
                    var input = this;
                    for (var i = input.length - 1; i >= 0; i--) {
                        var randomIndex = Math.floor(Math.random() * (i + 1));
                        var itemAtIndex = input[randomIndex];
                        input[randomIndex] = input[i];
                        input[i] = itemAtIndex;
                    }
                    return input;
                }
                itm.shuffle()
                console.log(itm)
                let list = [];
                for (let i3 = 0; i3 < 11; i3++) {
                    let t = []
                    if (i3 == 0 || i3 == 10) {
                        for (let i = 0; i < 10; i++) {
                            let tmp = []
                            tmp.push(i3 + "" + i)
                            tmp.push(-1);
                            t.push(tmp);
                        }
                    } else {
                        for (let i = 0; i < 10; i++) {
                            if (i == 0 || i == 9) {
                                let tmp3 = []
                                tmp3.push(i3 + "" + i)
                                tmp3.push(-1)
                                t.push(tmp3)
                                continue;
                            }
                            //显示的八个
                            let tmp = itm.slice(0, 8)[i - 1]
                            let tmp2 = []
                            tmp2.push(i3 + "" + i)
                            tmp2.push(tmp)
                            t.push(tmp2)
                        }
                        itm.splice(0, 8)
                    }
                    list.push(t)
                }
                console.log(list)
                this.list = list
            },
            clickpoine(e) {
                //上条线路绘制中
                if (this.getline == 1)
                    return
                let i = this.new
                this.new = e.target.dataset["in"]
                let a = e.target.dataset["in"][0]
                console.log(a, i[0])
                if (i && i[0] != a) {
                    //拐点为0
                    this.lineturn = 0
                    let bl = this.wgd(i, e.target.dataset["in"], this.list)
                    //bl同行同列返回false 比邻返回true 
                    if (bl && bl != undefined) {
                        this.toline(i, this.new, this.list)

                    } else if (this.onegd(i, e.target.dataset["in"], this.list)) {
                        this.toline(i, this.new, this.list)
                    } else if (this.twogd(i, e.target.dataset["in"], this.list)) {
                        this.toline(i, this.new, this.list)
                    } else {
                        this.new = ""
                    }
                }
            },
            pares(e) {
                let row
                let col
                if (e[0].length == 2) {
                    row = Number(e[0].charAt(0))
                    col = Number(e[0].charAt(1))
                } else if (e[0].length == 3) {
                    row = Number(e[0].charAt(0) + e[0].charAt(1))
                    col = Number(e[0].charAt(2))
                }
                return {
                    row: row,
                    col: col,
                    value: e[1]
                };
            },
            arryigf(e) {
                let p = []
                let a = e.row
                let b = e.col
                let c = e.value
                p.push(a + "" + b)
                p.push(c)
                return p;
            },
            //判是否同行同列 且不是同一位置的
            wgd(star, end, list) {
                let _star = this.pares(star)
                let _end = this.pares(end)
                // 判断值
                if (_star.value == _end.value) {
                    if (_star.row == _end.row && _star.col != _end.col) {
                        return this.ljpd("h", _star.col, _end.col, _star.row, list)
                    } else if (_star.row != _end.row && _star.col == _end.col) {
                        return this.ljpd("s", _star.row, _end.row, _star.col, list)
                    } else {
                        return false
                    }
                }
            },
            // 同一行或者同一列,中空（-1）
            ljpd(hs, sr, er, c, list) {
                // 行列比值chang
                if (sr > er) {
                    let tmp = sr
                    sr = er;
                    er = tmp;
                }
                // 同行相邻
                if (er - sr == 1) {
                    this.linelist = []
                    return true
                }
                for (let i = 0; i < er - sr - 1; i++) {
                    if (hs == "h" && list[parseInt(c)][i + parseInt(sr) + 1][1] != -1) {
                        return false;
                    }
                    if (hs == "s" && list[i + parseInt(sr) + 1][parseInt(c)][1] != -1) {
                        return false;
                    }
                }
                if (this.lineturn == 0) {
                    this.linelist = []
                    if (hs == "h") {
                        this.linelist.push('T' + c + '_' + sr)
                        this.linelist.push('T' + c + '_' + er)
                    } else {
                        this.linelist.push('T' + sr + '_' + c)
                        this.linelist.push('T' + er + '_' + c)
                    }
                }
                return true
            },
            clickpointnull(gd, list) {
                if (list[gd.row][gd.col][1] == -1) {
                    return true
                } else {
                    return false
                }
            }, 
            onegd(star, end, list) {
                this.lineturn = 1
                let _star = this.pares(star)
                let _end = this.pares(end)
                if (_star.value == _end.value) {
                    let gd1 = {
                        row: 0,
                        col: 0,
                        value: ""
                    }
                    let gd2 = {
                        row: 0,
                        col: 0,
                        value: ""
                    }
                    gd1.row = _star.row
                    gd1.col = _end.col
                    gd1.value = _star.value
                    gd2.row = _end.row
                    gd2.col = _star.col
                    gd2.value = _star.value
                    if (this.clickpointnull(gd1, list)) {
                        if (this.wgd(this.arryigf(gd1), star, list) && this.wgd(this.arryigf(gd1), end, list)) {
                            this.getline = 1
                            this.linelist = []
                            this.linelist.push('T' + _star.row + '_' + _star.col)
                            this.linelist.push('T' + gd1.row + '_' + gd1.col)
                            this.linelist.push('T' + _end.row + '_' + _end.col)
                            console.log("单拐1")
                            return true
                        }
                    } else if (this.clickpointnull(gd2, list)) {
                        if (this.wgd(this.arryigf(gd2), star, list) && this.wgd(this.arryigf(gd2), end, list)) {
                            this.getline = 1
                            this.linelist = []
                            this.linelist.push('T' + _star.row + '_' + _star.col)
                            this.linelist.push('T' + gd2.row + '_' + gd2.col)
                            this.linelist.push('T' + _end.row + '_' + _end.col)
                            console.log("单拐2")
                            return true
                        }
                    } else {
                        return false
                    }
                } else {
                    return false
                }
            }, 
            twogd(star, end, list) {
                //已经完成单拐
                if (this.getline == 1)
                    return
                this.lineturn = 2
                let stardont = this.pares(star)
                let enddont = this.pares(end)
                let _star = this.pares(star)
                let _end = this.pares(end)
                for (let i1 = 0; i1 < 10; i1++) {
                    let g1 = _star
                    let g2 = _end
                    if (g1.col == i1 || g2.col == i1) {
                        continue
                    }
                    g1.col = i1
                    g2.col = i1
                    console.log(stardont, enddont, _star, _end, g1)
                    console.log(i1, g1, g2)
                    if (this.clickpointnull(g1, list) && this.clickpointnull(g2, list)) {
                        let p1 = this.wgd(this.arryigf(g1), this.arryigf(g2), list)
                        let p2 = this.wgd(this.arryigf(g1), star, list)
                        let p3 = this.wgd(this.arryigf(g2), end, list)
                        console.log("第一" + "p1:" + p1 + "    p2:" + p2 + "    p3:" + p3)
                        if (p1 && p2 && p3) {
                            this.getline = 1
                            this.linelist = []
                            this.linelist.push('T' + stardont.row + '_' + stardont.col)
                            this.linelist.push('T' + g1.row + '_' + g1.col)
                            this.linelist.push('T' + g2.row + '_' + g2.col)
                            this.linelist.push('T' + enddont.row + '_' + enddont.col)
                            console.log(this.linelist, 9898)
                            return true
                        }
                    }
                }
                for (let i2 = 0; i2 < 11; i2++) {
                    let g1 = this.pares(star)
                    let g2 = this.pares(end)
                    if (g1.row == i2 || g2.row == i2) {
                        continue
                    }
                    g1.row = i2
                    g2.row = i2
                    if (this.clickpointnull(g1, list) && this.clickpointnull(g2, list)) {
                        let p1 = this.wgd(this.arryigf(g1), this.arryigf(g2), list)
                        let p2 = this.wgd(this.arryigf(g1), star, list)
                        let p3 = this.wgd(this.arryigf(g2), end, list)
                        console.log(g1, g2)
                        console.log("第二" + "p1:" + p1 + "    p2:" + p2 + "    p3:" + p3)
                        if (p1 && p2 && p3) {
                            this.getline = 1
                            this.linelist = []
                            this.linelist.push('T' + stardont.row + '_' + stardont.col)
                            this.linelist.push('T' + g1.row + '_' + g1.col)
                            this.linelist.push('T' + g2.row + '_' + g2.col)
                            this.linelist.push('T' + enddont.row + '_' + enddont.col)
                            console.log(this.linelist, 9797)
                            return true
                        }
                    }
                }
            },
            toline(star, end, list) {
                // 连线
                if (this.linelist.length > 1) {
                    this.CreateLine();
                    setTimeout(() => {
                        this.xc(star, end, list)
                    }, 500)
                } else {
                    this.new = ""
                    this.getline = 0
                    let _star = this.pares(star)
                    let _end = this.pares(end)
                    star[1] = -1
                    end[1] = -1
                    list[_star.row][_star.col] = star
                    list[_end.row][_end.col] = end
                    this.list = list
                }
            },
            xc(star, end, list) {
                this.new = ""
                this.getline = 0
                let _star = this.pares(star)
                let _end = this.pares(end)
                let ctx = uni.createCanvasContext('canvasdiv');
                star[1] = -1
                end[1] = -1
                list[_star.row][_star.col] = star
                list[_end.row][_end.col] = end
                this.list = list
                ctx.clearRect(10, 10, 600, 600)
                ctx.draw()
            }
        }
    };
</script>

<style lang="scss" scoped>
    #canvasdiv {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        width: 100vw;
        height: 100vh;
    }

    .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 0rpx;
        box-sizing: border-box;
    }

    .body {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 0 0;
        box-sizing: border-box;
    }

    .tou {
        height: 10%;
        width: 100%;
    }

    .con {
        height: 65%;
        width: 640rpx;
    }

    .kuai {
        display: inline-block;
        height: 100rpx;
        width: 10%;
        text-align: center;
    }
</style>