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

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

在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,画了下面的图(图有点丑……)

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

二.2个物体在同一直线上,中间有障碍物,不能直接连通 (2个转弯)

【循环遍历黄线中的交点,比如A,B点,再判断蓝线有没有障碍物,若没有,则可以连通,若有,则继续循环查找新的A,B点】

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

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

四. 2个物体不在同一直线上,连线有2个转弯

【同二的原理,如下图,如果A,B 2个交点到物体均没有障碍物,则可以连通。其中A点的纵坐标和B相同】

另外一种情况,A,B 为2个物体所在x轴与中间y轴的交点,A,B的x坐标必须相同,连线如下:

以上就是四种连线算法判断,画图只画x轴的,每一种按照同样的原理增加y轴即可。可覆盖所有连线判断~

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

代码思路:

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

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

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

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

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

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

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;
            }
}

//判断同一条线能否连通,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;
        }

连线判断

时间: 2024-10-24 23:08:04

前端实现连连看小游戏(1)的相关文章

利用Python制作一个连连看小游戏,边学边玩!

导语 今天我们将制作一个连连看小游戏,让我们愉快地开始吧~ 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Python自带的模块 环境搭建 安装Python并添加到环境变量,pip安装需要的相关模块即可. 先睹为快 在cmd窗口运行"Game15.py"文件即可. 效果如下: 原理简介 游戏规则: 玩家通过鼠标交换相邻的拼图,若交换后水平/竖直方向存在连续三个相同的拼图,则这些拼图消失,玩家得分,同时生成新的拼图以补充消失的部分,否则,交换失败,玩家不

软件设计之基于Java的连连看小游戏(一)——开题及游戏首页的制作

原本计划紧张忙碌的考试月在图书馆和实验室度过,结果突如其来为期两周的软件设计把课余时间几乎捆绑在了机房.软设没有太多知识上的要求,只要成品简洁美观.实用准确即可.考虑了很久决定要用Java swing做一个完善的连连看小游戏. (一)工作计划安排: 1.16周完成游戏界面的制作以及图形消除功能的实现. 2.17周完成连线的显示以及菜单功能的实现(退出.再来一局等功能),并进行界面及性能的优化. 今天第一天确定了具体的实施方案,决定了游戏界面要达到的效果,并开始着手制作游戏首页的界面. (二)目前

连连看小游戏前端实现

上周五突然接到一个重磅消息:公司决定开发首款手机小游戏,运行平台是淘宝app上的微淘平台.这个微淘平台从技术上讲是一个能运行html5的平台,跟微信比较类似.接到这样的任务,我自然很高兴呀,因为这也是我的第一款手机游戏了.经过一个周末的奋战,算是初步把这个游戏跑起来了.在写之前我也是查看了不少算法和实际线上代码,因为这都是个被写烂了的游戏了,那么你只要百度一下'连连看算法'的话你基本都不用自己写了,算法也有好几种,一开始我也比较迷惑,不知道从何下手,经过几番比较,我还是选择了自己的一种简单算法,

结对项目——连连看小游戏

实验报告 一.题目简介: 游戏主要是鼠标两次点击的图片能否消去的问题.当前,前提是点击两张相同的图片,若点击的是同一张图片或者两张不同的图片,则不予处理.该游戏由多张不同的图片组成,游戏开始将会出现多张随机组合的图片,在规则下点击两张相同的图片后图片将会消失.图片全部消完为游戏成功. 二.结对分工及过程: 此次项目中:王庆祥负责设计图片及编写代码, 郝佳伟负责运行并测试程序是否正确运行. 完成连连看基本功能是:看图和判断. 为实现课程设计需求,需要实现的各个类.每个类需要负责实现的功能. 定义了

原生js实现一个连连看小游戏(二)-----------生成随机不重复数字

直接贴代码: <!DOCTYPE html> <html> <head> <title>生成随机不重复数</title> </head> <body> <script type="text/javascript"> var arr=new Array(); for(var i=0;i<10;i++){ arr.push(i); } // console.log(arr) var get

原生js实现一个连连看小游戏(三)-----------点击列表获取索引

需求:当点击一个列表时,我们要知道它在列表的第几项,即索引,代码实现如下: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <ul id="myUl"> <li>第1个li</li> <li>第1个li</li> <li>第1个li</li> &l

结对项目-小游戏连连看

我与我的结对同学作的是连连看小游戏,由王庆祥同学进行编码,我来检查以及运行监测,最后得结果如下图: 最后附上我的GitHub地址:https://github.com/jiaweihao/Test.git

javascrpit开发连连看记录-小游戏

工作之余,总想做点什么有意思的东西.但是苦于不知道做什么,也就一直没有什么动作.在一个午饭后,跟@jedmeng和@墨尘聊天过程中,发现可以写一些小东西来练练手,有以下几点好处: 1. 加强巩固前端相关知识 2. 可以用一些平时项目中想用但没用的新东西 3. 一块儿做相同的东西,可以分享各自不同的想法 先来一张效果图,也可以来这里玩玩~      接下来就介绍一下做这个小游戏,自己的一些步骤和思路: 首先就是熟悉连连看的规则,为此还专门下载了一个app感受了一下,规则简单的说就是:找到两个相同的

从头开始构建web前端应用——字符炸弹小游戏(二)

接上篇.欢迎指正. 现在,需要考虑如何拆分文件. 拆分文件的目的,是为了方便代码管理.很显然,样式表,网页源文件,js代码需要放在不同的地方.另外,对于前端开发来说,主要的逻辑控制流程,都在js文件里面,所以,还需要拆分js文件.我个人习惯上按功能模块来拆分.在拆分前,你需要仔细思考一下,每一个函数和其他函数之间的关联度,尽量做到相关功能函数在一个文件里. ok,开工.在html所在文件目录下创建2个新文件夹,分别命名为css,js. 1.拆分css. css样式表写的不多,直接在css文件夹下