您的位置:betway必威官网备用 > 阿达连连看 > 前端实现连连看小游戏(1)

前端实现连连看小游戏(1)

发布时间:2019-11-02 03:06编辑:阿达连连看浏览(62)

    图片 1

    【如下图,由于有2个转弯,不同于1个转弯的情况,我们需要有2个拐点。这2个拐点必须在同一个轴上(x轴 或者 y轴),那我们只要分别做这2个点的x轴的延伸,或者y轴的延伸,一个一个取点遍历扫描,若都可以连线,则可以连线~】

    连线判断

    图片 2

     

     

    前端实现连连看小游戏(1)。 

    前端实现连连看小游戏(1)。 

    前端实现连连看小游戏(1)。 

    前端实现连连看小游戏(1)。三. 2个物体不在同一直线上,连线有2个转弯 

    在判断能否连线的时候,肯定是从最简单的方法开始判断,如下:

    博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯。orz…

    getPath: function (p1, p2) {
                //开始搜索前对p1,p2排序,使p2尽可能的在p1的右下方。
                if (p1.x > p2.x) {
                    var t = p1;
                    p1 = p2;
                    p2 = t;
                }
                else if (p1.x == p2.x) {
                    if (p1.y > p2.y) {
                        var t = p1;
                        p1 = p2;
                        p2 = t;
                    }
                }
                //2点在同一直线上,可以直线连通
                if (this.hasLine(p1, p2).status) {
                    return true;
                }
                //如果两点中任何一个点被全包围,则不通。
                else if (this.isWrap(p1, p2)) {
                    return false;
                }
                //两点在一条直线上,不能直线连接但是可以连通
                else if (this.LineLink(p1, p2)) {
                    return true;
                }
                //不在同一直线但是可以连通
                else if (this.curveLink(p1, p2)) {
                    return true;
                }    
    }
    

    一. 2个物体在同一直线上,可以直接连通 (这个不需要解释啦)

    图片 3

    //判断同一条线能否连通,x轴相同或者y轴相同
            hasLine: function (p1, p2) {
                this.path = [];
                //同一点
                if (p1.x == p2.x && p1.y == p2.y) {
                    return {
                        status: false
                    };
                }
                if (this.onlineY(p1, p2)) {
                    var min = p1.y > p2.y ? p2.y : p1.y;
                    min = min + 1;
                    var max = p1.y > p2.y ? p1.y : p2.y;
                    for (min; min < max; min++) {
                        var p = {x: p1.x, y: min};
                        if (!this.isEmpty(p)) {
                            console.log('有障碍物p点………………');
                            console.log(p);
                            this.path = [];
                            break;
                        }
                        this.path.push(p);
                    }
                    if (min == max) {
                        return {
                            status: true,
                            data: this.path,
                            dir: 'y' //y轴
                        };
                    }
                    this.path = [];
                    return {
                        status: false
                    };
                }
                else if (this.onlineX(p1, p2)) {
                    var j = p1.x > p2.x ? p2.x : p1.x;
                    j = j + 1;
                    var max = p1.x > p2.x ? p1.x : p2.x;
                    for (j; j < max; j++) {
                        var p = {x: j, y: p1.y};
                        if (!this.isEmpty(p)) {
                            console.log('有障碍物p点………………');
                            console.log(p);
                            this.path = [];
                            break;
                        }
                        this.path.push(p);
                    }
    
                    if (j == max) {
                        return {
                            status: true,
                            data: this.path,
                            dir: 'x' //x轴
                        };
                    }
                    this.path = [];
                    return {
                        status: false
                    };
                }
                return {
                    status: false
                };
    //2点是否有其中一点被全包围,若有,则返回true
            isWrap: function (p1, p2) {
                //有一点为空,则条件不成立
                if (!this.isEmpty({x: p1.x, y: p1.y + 1}) && !this.isEmpty({
                        x: p1.x,
                        y: p1.y - 1
                    }) && !this.isEmpty({
                        x: p1.x - 1,
                        y: p1.y
                    }) && !this.isEmpty({x: p1.x + 1, y: p1.y})) {
                    return true;
                }
                if (!this.isEmpty({x: p2.x, y: p2.y + 1}) && !this.isEmpty({
                        x: p2.x,
                        y: p2.y - 1
                    }) && !this.isEmpty({
                        x: p2.x - 1,
                        y: p2.y
                    }) && !this.isEmpty({x: p2.x + 1, y: p2.y})) {
                    return true;
                }
                return false;
            }
      //两点在一条直线上,不能直线连接但是可以连通
            LineLink: function (p1, p2) {
                var pt0, pt1, pt2, pt3;
                //如果都在x轴,则自左至右扫描可能的路径,
                //每次构造4个顶点pt0, pt1, pt2, pt3,然后看他们两两之间是否连通
                if (this.onlineX(p1, p2)) {
                    for (var i = 0; i < this.H; i++) {
                        if (i == p1.y) {
                            continue;
                        }
                        pt0 = p1;
                        pt1 = {x: p1.x, y: i};
                        pt2 = {x: p2.x, y: i};
                        pt3 = p2;
                        //如果顶点不为空,则该路不通。
                        if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {
                            continue;
                        }
                        if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
                            this.drawLine(2, [pt0, pt3, pt1, pt2]);
                            return [pt0, pt1, pt2, pt3];
                        }
                    }
                }
                //如果都在y轴,则自上至下扫描可能的路径,
                //每次构造4个顶点pt0, pt1, pt2, pt3,然后看他们两两之间是否连通
                if (this.onlineY(p1, p2)) {
                    for (var j = 0; j < this.W; j++) {
                        if (j == p1.x) {
                            continue;
                        }
                        pt0 = p1;
                        pt1 = {x: j, y: p1.y};
                        pt2 = {x: j, y: p2.y};
                        pt3 = p2;
                        //如果顶点不为空,则该路不通。
                        if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {
                            continue;
                        }
                        if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
                            this.drawLine(2, [pt0, pt3, pt1, pt2]);
                            return [pt0, pt1, pt2, pt3];
                        }
                    }
                }
            },
     //两点不在一条直线上,看是否可通
            curveLink: function (p1, p2) {
                var pt0, pt1, pt2, pt3;
                //特殊情况,先判断是否是一个转弯
                var spec1 = {x: p1.x, y: p2.y},
                    spec2 = {x: p2.x, y: p1.y};
                if (this.isEmpty(spec1)) {
                    if (this.hasLine(p1, spec1).status && this.hasLine(p2, spec1).status) {
                        console.log('1个转弯');
                        this.drawLine(1, [p1, p2, spec1]);
                        return [p1, p2, spec1];
                    }
                }
                if (this.isEmpty(spec2)) {
                    if (this.hasLine(p1, spec2).status && this.hasLine(p2, spec2).status) {
                        console.log('1个转弯');
                        // console.table([pt0, spec2, pt3]);
                        this.drawLine(1, [p1, p2, spec2]);
                        return [p1, spec2, p2];
                    }
                }
                //先纵向扫描可能的路径
                //同样,每次构造4个顶点,看是否可通
                for (var k = 0; k <= this.H; k++) {
                    pt0 = p1;
                    pt1 = {x: p1.x, y: k};
                    pt2 = {x: p2.x, y: k};
                    pt3 = p2;
    
                    //2个交点都为空
                    if (this.isEmpty(pt1) && this.isEmpty(pt2)) {
                        //2个转弯
                        if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
                            console.log('2个转弯');
    
                            this.drawLine(2, [pt0, pt3, pt1, pt2]);
                            return [pt0, pt3, pt1, pt2];
                        }
                    }
                }
    
                //横向扫描所有可能的路径
                for (var k = 0; k <= this.W; k++) {
                    pt0 = p1;
                    pt1 = {x: k, y: p1.y};
                    pt2 = {x: k, y: p2.y};
                    pt3 = p2;
    
                    //2个交点都为空
                    if (this.isEmpty(pt1) && this.isEmpty(pt2)) {
                        //2个转弯
                        if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
                            console.log('2个转弯');
    
                            this.drawLine(2, [pt0, pt3, pt1, pt2]);
                            return [pt0, pt3, pt1, pt2];
                        }
                    }
                }
                return false;
            }
    

    至于画线,消除相同物体,只要会连线逻辑,肯定就会自己绘制线条,消除物体了,所以本篇文章就只讲连线判断啦~

    以上就是四种连线算法判断,动画只列举部分情况,每一种按照同样的原理扫描。可覆盖所有连线判断~

    图片 4图片 5

     

     代码思路:

    【2个物体分别在所在位置进行x,y轴的延伸,如下图则交点为A,B。 只需判断2个交点到2个物体直接是否有障碍物,若没有,则可以连通】

    2.判断该位置是否有物体,只需要判断对应的二维数组上值是否为1,若为1,则有物体,否则没有。

     

    二. 2个对象不在同一直线上,一个转弯

    说完连线判断的逻辑之后,写一下整体的游戏框架,游戏基本使用原生javascript,使用createjs游戏引擎进行开发。

     

    同一直线能否直线连通--->如何一点被包围,则不通--->两点在一条直线上,不能直线连接但是可以连通---> 不在同一直线但是可以连通

    1. 绘制游戏画图,确定为多少宫图,由于是在移动端的小游戏,根据最小屏幕尺寸(iphone4  320*480),确定为7*9的宫图。

    1. 创建一个二维数组,如果某个坐标上有物体,则设为1,否则为0

     

    看动画容易理解一点~

    在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,做了一些小动画,希望大家可以看一遍都懂啦~)

    本文由betway必威官网备用发布于阿达连连看,转载请注明出处:前端实现连连看小游戏(1)

    关键词: